diff options
Diffstat (limited to 'docs/html')
103 files changed, 2968 insertions, 5411 deletions
diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd deleted file mode 100644 index 713574a..0000000 --- a/docs/html/design/building-blocks/buttons.jd +++ /dev/null @@ -1,99 +0,0 @@ -page.title=Buttons -page.tags=button,input -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/buttons.html"> - <div> - <h3>Material Design</h3> - <p>Buttons<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/button.html"> - <div> - <h3>Developer Docs</h3> - <p>Buttons</p> - </div> -</a> - -<p itemprop="description">A button consists of text and/or an image that clearly communicates what action - will occur when the user touches it. A button can have an image, text, or both. -</p> - -<div class="cols" style="margin-top:22px"> - <div class="col-3"> - <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;"> - </div> - <div class="col-3"> - <img src="{@docRoot}design/media/buttons_text.png" style="height:94px;"> - </div> - <div class="col-7"> - <img src="{@docRoot}design/media/buttons_image_and_text.png" style="height:94px;"> - </div> -</div> - -<div class="cols" style="margin-top:0;"> - <div class="col-3"> - <p>An image alone works best when the action can be represented by a symbol that's well understood.</p> - </div> - <div class="col-3"> - <p>Text alone is most appropriate for actions that would be difficult to - represent visually, or are critical to convey in words to avoid any ambiguity.</p> - </div> - <div class="col-7"> - <p> - Both an icon and text is most appropriate when they complement each other: - each carrying its own bit of information, but together making a larger whole. - </p> - - <p> - For example, in a birthday reminder card in Google Now, the button's text - describes the action while its image indicates that the action will be done - in Google+. - </p> - </div> -</div> - -<h3>What about button backgrounds?</h3> - -<div class="cols"> - <div class="col-6"> - <p>For <strong>image-only</strong> buttons, a background isn't necessary because - users are accustomed to interacting with objects.</p> - - <div class="cols" style="margin-left:72px"> - <div class="col-2"> - <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div> - <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;"> - </div> - <div class="col-2" style="width:29px;margin-left:10px;"> - <div class="do-dont-label good"><strong>Do</strong></div> - <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;"> - </div> - </div> - </div> - -<div class="col-7"> -<p> - For buttons <strong>with text</strong>, a background is also usually - unnecessary. To invite users to touch, phrase it as a clear action (e.g. - "Start", "Sign in") and use different color and formatting than the screen's - usual body text. -</p> - -<p> - Use buttons with backgrounds sparingly. Because they have a heavy appearance, - they work best when there's only one or two of them on the screen. They're - most appropriate for: -</p> - -<ul> - <li>A call to action you really want users to pursue (e.g. "Sign up")</li> - <li>A key decision point (e.g. "Accept" / "Decline")</li> - <li>When the user is about to commit a significant action (e.g. "Erase - everything", "Buy now")</li> -</ul> -</div> -</div> - diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd deleted file mode 100644 index 70460ba..0000000 --- a/docs/html/design/building-blocks/dialogs.jd +++ /dev/null @@ -1,186 +0,0 @@ -page.title=Dialogs -page.tags=dialog,alert,popup,toast -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/dialogs.html"> - <div> - <h3>Material Design</h3> - <p>Dialogs<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/dialogs.html"> - <div> - <h3>Developer Docs</h3> - <p>Dialogs</p> - </div> -</a> - -<p itemprop="description">Dialogs prompt the user for decisions or additional information required by the app to continue a -task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the -user to adjust settings or enter text.</p> - -<img src="{@docRoot}design/media/dialogs_main.png"> - -<div class="with-callouts"> - -<ol> - <li> - <h4>Optional title region</h4> - <p>The title introduces the content of your dialog. It can, for example, identify the name of a - setting that the user is about to change, or request a decision.</p> - </li> - <li> - <h4>Content area</h4> - <p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as - sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system - settings. In other cases, such as alerts, the content may consist solely of text that provides - further context for a user decision.</p> - </li> - - <li> - <h4>Action buttons</h4> - <p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely action. However, if the options consist of specific actions such as Close or Wait rather than a confirmation or cancellation of the action described in the content, then all the buttons should be active verbs. Order actions following these rules:</p> - <ul> - - <li>The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.</li> - <li>The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.</li> - </ul> - </li> -</ol> -</div> - -<img src="{@docRoot}design/media/dialogs_examples.png"> -<div class="figure-caption"> - Samples of typical dialog use in Android. -</div> - -<h2 id="alerts">Alerts</h2> - -<p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before -proceeding. They differ slightly in appearance based upon the severity and impact of the message -conveyed.</p> - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/dialogs_w_no_title.png"> - - </div> - <div class="col-5"> - -<h4>Alerts without title bars</h4> -<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed -up succinctly in a sentence or two. The content area should either ask a question (such as "Delete -this conversation?") or make a clear statement whose relationship to the action buttons is obvious.</p> - - </div> -</div> - - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/dialogs_w_title.png"> - - </div> - <div class="col-5"> - -<h4>Alerts with title bars</h4> -<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving -potential loss of data, connectivity, extra charges, and so on requires a clear question or -statement (the title) and some additional explanation (in the content area).</p> -<p>Keep the question or statement short: for example, "Erase USB storage?" Avoid apologies. A user -should be able to skip the content completely and still have a clear idea of what choices are -available based on the title and the text of the action buttons.</p> - - </div> -</div> -<p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p> - -<div class="cols"> - <div class="col-4"> - <div class="do-dont-label bad">Don't</div> - <table class="ui-table bad"> - <thead> - <tr> - <th class="label"> - Are you sure? - </th> - </tr> - </thead> - </table> - </div> - <div class="col-4"> - <div class="do-dont-label bad">Don't</div> - <table class="ui-table bad"> - <thead> - <tr> - <th class="label"> - Warning! - </th> - </tr> - </thead> - </table> - </div> - <div class="col-5"> - <div class="do-dont-label good">Do</div> - <table class="ui-table good"> - <thead> - <tr> - <th class="label"> - Erase USB storage? - </th> - </tr> - </thead> - </table> - </div> -</div> - - -<h2 id="popups">Popups</h2> - -<p>Popups are lightweight version of dialogs that require a single selection from the user. Popups -don't have have explicit buttons that accept or cancel the operation. Instead, making a selection -advances the workflow, and simply touching outside the popup dismisses it.</p> - -<img src="{@docRoot}design/media/dialogs_popups_example.png"> - - -<h2 id="toasts">Toasts</h2> - - -<div class="cols"> - <div class="col-6"> - - <div class="vspace size-3"></div> - -<p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating -away from an email before you send it triggers a "Draft saved" toast to let you know that you can -continue editing later. Toasts automatically disappear after a timeout.</p> - -<a class="notice-designers-material left" - href="http://www.google.com/design/spec/components/snackbars-toasts.html"> - <div> - <h3>Material Design</h3> - <p>Toasts<p> - </div> -</a> - - -<a class="notice-developers left" href="{@docRoot}guide/topics/ui/notifiers/toasts.html"> - <div> - <h3>Developer Docs</h3> - <p>Toasts</p> - </div> -</a> - - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/dialogs_toasts.png"> - - </div> -</div> - diff --git a/docs/html/design/building-blocks/grid-lists.jd b/docs/html/design/building-blocks/grid-lists.jd deleted file mode 100644 index 7a1c652..0000000 --- a/docs/html/design/building-blocks/grid-lists.jd +++ /dev/null @@ -1,96 +0,0 @@ -page.title=Grid Lists -page.tags=gridview,layout,listview -@jd:body - -<img src="{@docRoot}design/media/gridview_overview.png"> - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/grid-lists.html"> - <div> - <h3>Material Design</h3> - <p>Grid lists<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/gridview.html"> - <div> - <h3>Developer Docs</h3> - <p>Grid View</p> - </div> -</a> - -<p itemprop="description">Grid lists are an alternative to standard list views. They are best suited for showing data sets -that represent themselves through images. In contrast to simple lists, grid lists may scroll either -vertically or horizontally.</p> - - - -<h2 id="generic_grid">Generic Grids</h2> - - -<p>The items in a grid list are arranged in two dimensions, one of which is fixed when scrolling -content. The scrolling direction dictates the ordering of the items within the grid list. Since the -scrolling direction is not deterministic, make it easy for the user to determine the orientation by -cutting off grid items to communicate where the overflow is located.</p> -<p>Avoid creating grid lists that scroll in two dimensions.</p> - - -<div class="cols"> - <div class="col-7"> - - <img src="{@docRoot}design/media/gridview_vertical.png"> - - </div> - <div class="col-6"> - -<h4>Vertical scrolling</h4> -<p>Vertically scrolling grid list items are sorted in traditional western reading direction: -left-to-right and top-down. When displaying the list, cut off the items in the bottom row to -communicate that the user can scroll the list down to show additional items. Be sure to retain this -scheme when the user rotates the screen.</p> - - </div> -</div> - -<div class="cols"> - <div class="col-7"> - - <img src="{@docRoot}design/media/gridview_horizontal.png"> - - </div> - <div class="col-6"> - -<h4>Horizontal scrolling</h4> -<p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically -scrolling lists, the sorting changes slightly to a top-down and left-to-right arrangement. Employ -the same technique of cutting off the items in the rightmost column to indicate the scrolling -direction.</p> -<p>Don't use scrolling tabs as a means to switch views in conjunction with horizontally scrolling grid -lists, because the horizontal gesture for view and content navigation will conflict. If you show -scrolling tabs for view navigation together with a grid list, use vertical grid scrolling for list -navigation.</p> - - </div> -</div> - - -<h2 id="with-labels">Grid List with Labels</h2> - -<p>Use labels to display additional contextual information for your grid list items.</p> - - -<div class="cols"> - <div class="col-7"> - - <img src="{@docRoot}design/media/gridview_style.png"> - - </div> - <div class="col-6"> - -<h4>Style</h4> -<p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to -control the contrast and ensures legibility of the labels while letting the content "shine through".</p> - - </div> -</div> diff --git a/docs/html/design/building-blocks/index.jd b/docs/html/design/building-blocks/index.jd deleted file mode 100644 index 7fb0e55..0000000 --- a/docs/html/design/building-blocks/index.jd +++ /dev/null @@ -1,30 +0,0 @@ -page.title=Building Blocks -header.justLinks=1 -footer.hide=1 -@jd:body - -<style> -#landing-graphic-container { - position: relative; -} - -#text-overlay { - position: absolute; - left: 0; - top: 520px; - width: 450px; -} -</style> - -<div id="landing-graphic-container"> - <div id="text-overlay"> - <span itemprop="description">Your inventory of ready-to-use elements for creating - outstanding apps.</span> - <br><br> - <a href="{@docRoot}design/building-blocks/tabs.html" class="landing-page-link">Tabs</a> - </div> - - <a href="{@docRoot}design/building-blocks/tabs.html"> - <img src="{@docRoot}design/media/building_blocks_landing.png"> - </a> -</div> diff --git a/docs/html/design/building-blocks/lists.jd b/docs/html/design/building-blocks/lists.jd deleted file mode 100644 index 85753c8..0000000 --- a/docs/html/design/building-blocks/lists.jd +++ /dev/null @@ -1,56 +0,0 @@ -page.title=Lists -page.tags=listview,layout -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/lists.html"> - <div> - <h3>Material Design</h3> - <p>Lists<p> - </div> -</a> - -<p itemprop="description">Lists present multiple line items in a vertical arrangement. They can be used for data selection as -well as drilldown navigation.</p> - -<div class="vspace size-1"> </div> - -<div class="cols clearfix"> - <div class="col-9"> - - <img src="{@docRoot}design/media/lists_main.png"> - - </div> - <div class="col-4 with-callouts"> - -<ol style="margin-bottom: 60px;"> -<li> -<h4>Section Divider</h4> -<p>Use section dividers to organize the content of your list into groups and facilitate scanning.</p> -</li> -<li> -<h4>Line Items</h4> -<p>List items can accommodate a wide range of data types in different arrangements, including - simple single-line items, multi-line items, and custom items with icons, checkboxes, and action - buttons.</p> -</li> -</ol> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/listview.html"> - <div> - <h3>Developer Docs</h3> - <p>List View</p> - </div> -</a> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/lists-controls.html"> - <div> - <h3>Material Design</h3> - <p>Lists: Controls<p> - </div> -</a> - - - </div> -</div> diff --git a/docs/html/design/building-blocks/pickers.jd b/docs/html/design/building-blocks/pickers.jd deleted file mode 100644 index 72da0f7..0000000 --- a/docs/html/design/building-blocks/pickers.jd +++ /dev/null @@ -1,40 +0,0 @@ -page.title=Pickers -page.tags=datepicker,timepicker -@jd:body - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/pickers.html"> - <div> - <h3>Developer Docs</h3> - <p>Pickers</p> - </div> -</a> - -<p itemprop="description">Pickers provide a simple way to select a single value from a set. In addition to touching the -up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe -gesture.</p> - -<div class="cols"> - <div class="col-6"> - - <img src="{@docRoot}design/media/picker_space.png"> - - </div> - <div class="col-6"> - -<h4>Space considerations</h4> -<p>Pickers can be used inline on a form, but their relatively large footprint is best suited for -display in a dialog. For inline display, consider using more compact controls such as text fields or -spinners.</p> - - </div> -</div> - -<h2 id="date-time">Date and time pickers</h2> - -<p>Android provides these as ready-to-use dialogs. Each picker is a dialog with a set of controls for -entering the parts of the date (month, day, year) or time (hour, minute, AM/PM). Using these in your -app helps ensure that a user's specification of a data or time input is valid and formatted -correctly. The format of a time and date picker adjusts automatically to the locale.</p> - -<img src="{@docRoot}design/media/picker_datetime.png"> - diff --git a/docs/html/design/building-blocks/progress.jd b/docs/html/design/building-blocks/progress.jd deleted file mode 100644 index ae81440..0000000 --- a/docs/html/design/building-blocks/progress.jd +++ /dev/null @@ -1,105 +0,0 @@ -page.title=Progress & Activity -page.tags=progressbar,download,network -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/progress-activity.html"> - <div> - <h3>Material Design</h3> - <p>Progress and Activity<p> - </div> -</a> - -<p>Progress bars and activity indicators signal to users that something is happening that will take a moment.</p> -<h2 id="progress">Progress bars</h2> - -<p>Progress bars are for situations where the percentage completed can be determined. They give users a quick sense of how much longer an operation will take.</p> - -<img src="{@docRoot}design/media/progress_download.png"> - -<p>A progress bar should always fill from 0% to 100% and never move backwards to a lower value. If multiple operations are happening in sequence, use the progress bar to represent the delay as a whole, so that when the bar reaches 100%, it doesn't return back to 0%.</p> - -<div class="vspace size-2"> </div> - -<img src="{@docRoot}design/media/progress_themes.png"> -<div class="figure-caption"> - Progress bar in Holo Dark and Holo Light. -</div> - -<h2 id="activity">Activity indicators</h2> - -<p>Activity indicators are for operations of an indeterminate length. They ask users to wait a moment while something finishes up, without getting into specifics about what's happening behind the scenes.</p> - -<p>Two styles are available: a bar and a circle. Each is offered in a variety of sizes, in both Holo Light and Holo Dark themes. Choose the appropriate style and size for the surrounding context. For example, the largest activity circle works well when displayed in a blank content area, but not in a smaller dialog box. Each operation should only be represented by one activity indicator.</p> - -<div class="cols"> - <div class="col-6"> - - <img src="{@docRoot}design/media/progress_activity.png"> - - </div> - <div class="col-7 with-callouts"> - - <ol> - <li class="value-1"><h4>Activity bar</h4> - <p>In this example, an activity bar (in Holo Dark) appears when a user first requests a download. There's an unknown period of time when the download has not yet started. As soon as the download starts, this activity bar transforms into a progress bar.</p> - </li> - </ol> - - </div> -</div> - -<div class="cols"> - <div class="col-6"> - - <img src="{@docRoot}design/media/progress_activity2.png"> - - </div> - <div class="col-7 with-callouts"> - - <ol> - <li class="value-2"><h4>Activity circle</h4> - <p>In this example, an activity circle (in Holo Light) is used in the Gmail application when a message is being loaded because it's not possible to determine how long it will take to download the email.</p> - <p>When displaying an activity circle, do not include text to communicate what the app is doing. The moving circle alone provides sufficient feedback about the delay, and does so in an understated way that minimizes the impact.</p> - <p> - <div style="margin-left:0;margin-top:1em;"> - <img src="{@docRoot}design/media/progress_activity_do_dont.png"> - </div> - </p> - </li> - </ol> - - </div> -</div> - -<h2 id="custom-indicators">Custom indicators</h2> -<p>The standard progress bar and activity indicators work well for most situations and should be used whenever possible to provide a consistent experience across Android. However, some situations may call for something more custom.</p> - -<p>Here's an example:<br> -In all of the Google Play apps (Music, Books, Movies, Magazines), we wanted the current download state of each item to be visible at all times at the top-level screen. These states are: - <ul> - <li>Not downloaded</li> - <li>Temporarily downloaded (automatically cached by the app)</li> - <li>Permanently downloaded on the device at the user's request</li> - </ul> -</p> -<p>We also needed to indicate progress from one download state to another, because downloading is not instantaneous.</p> -<p>This presented a challenge, because the Google Play apps use a variety of different layouts, and some of them are highly space-constrained. We didn't want this information to clutter the top-level screens, or compete too much with the cover art.</p> -<p>So we designed a custom indicator that could show all of the information in a tiny footprint, with the flexibility to appear on top of content if necessary.</p> - -<img src="{@docRoot}design/media/progress_activity_custom.png"> - -<p>The color indicates whether it's downloaded (blue) or not (gray). The appearance of the pin indicates whether the download is permanent (white, upright) or temporary (gray, diagonal). And when state is in the process of changing, progress is indicated by a moving pie chart.</p> - -<div class="cols"> - <div class="col-9"> - <img src="{@docRoot}design/media/progress_activity_custom_app.png"> - </div> - <div class="col-4"> - <div class="figure-caption"> - Across Google Play apps with different layouts, the same custom indicator appears with each item. It communicates download state as well as progress, in a compact package that can be incorporated into any screen design. - </div> - </div> -</div> - -<p>If you find that the standard indicators aren't meeting your needs (due to space constraints, state complexities), by all means design your own. Make it feel like part of the Android family by injecting some of the visual characteristics of the standard indicators. In this example, we carried over the circular shape, the same shade of blue, and the flat and simple style.</p> diff --git a/docs/html/design/building-blocks/scrolling.jd b/docs/html/design/building-blocks/scrolling.jd deleted file mode 100644 index 04b1e4a..0000000 --- a/docs/html/design/building-blocks/scrolling.jd +++ /dev/null @@ -1,39 +0,0 @@ -page.title=Scrolling -page.tags=scrollview,listview -@jd:body - - -<p>Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The -scrolling speed is proportional to the speed of the gesture.</p> -<h2 id="indicator">Scroll Indicator</h2> - -<p>Appears during scrolling to indicate what portion of the content is currently in view.</p> - -<div class="framed-nexus5-land-span-13"> - <video class="play-on-hover" autoplay> - <source src="{@docRoot}design/media/scroll_indicator.mp4" type="video/mp4"> - <source src="{@docRoot}design/media/scroll_indicator.webm" type="video/webm"> - <source src="{@docRoot}design/media/scroll_indicator.ogv" type="video/ogg"> - </video> -</div> -<div class="figure-caption"> - <div class="video-instructions"> </div> -</div> - -<h2 id="index-scrolling">Index Scrolling</h2> - -<p>In addition to traditional scrolling, a long alphabetical list can also offer index scrolling: a way -to quickly navigate to the items that begin with a particular letter. With index scrolling, a scroll -indicator appears even when the user isn't scrolling. Touching or dragging it causes the current -letter to pop up in a prominent way.</p> - -<div class="framed-nexus5-land-span-13"> - <video class="play-on-hover" autoplay> - <source src="{@docRoot}design/media/scroll_index.mp4" type="video/mp4"> - <source src="{@docRoot}design/media/scroll_index.webm" type="video/webm"> - <source src="{@docRoot}design/media/scroll_index.ogv" type="video/ogg"> - </video> -</div> -<div class="figure-caption"> - <div class="video-instructions"> </div> -</div> diff --git a/docs/html/design/building-blocks/seek-bars.jd b/docs/html/design/building-blocks/seek-bars.jd deleted file mode 100644 index 04446d2..0000000 --- a/docs/html/design/building-blocks/seek-bars.jd +++ /dev/null @@ -1,45 +0,0 @@ -page.title=Seek Bars and Sliders -page.tags=seekbar,progressbar -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/sliders.html"> - <div> - <h3>Material Design</h3> - <p>Sliders<p> - </div> -</a> - -<p>Interactive sliders make it possible to select a value from a continuous or discrete range of values -by moving the slider thumb. The smallest value is to the left, the largest to the right. The -interactive nature of the slider makes it a great choice for settings that reflect intensity levels, -such as volume, brightness, or color saturation.</p> - -<div class="cols"> - <div class="col-9"> - - <img src="{@docRoot}design/media/seekbar_example.png"> - - </div> - <div class="col-4"> - -<div class="vspace size-2"> </div> - -<h4>Example</h4> -<p>Interactive slider to set the ringer volume. The value can either be set through the hardware volume controls or interactively via a gesture.</p> - - </div> -</div> - - -<div class="cols"> - <div class="col-9"> - - <img src="{@docRoot}design/media/seekbar_style.png"> - <div class="figure-caption"> - Seek bars in Holo Light & Dark - </div> - - </div> - <div class="col-4"> </div> -</div> diff --git a/docs/html/design/building-blocks/spinners.jd b/docs/html/design/building-blocks/spinners.jd deleted file mode 100644 index 31c5558..0000000 --- a/docs/html/design/building-blocks/spinners.jd +++ /dev/null @@ -1,54 +0,0 @@ -page.title=Spinners -page.tags=spinner,dropdown -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/menus.html"> - <div> - <h3>Material Design</h3> - <p>Menus<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/spinner.html"> - <div> - <h3>Developer Docs</h3> - <p>Spinners</p> - </div> -</a> - -<p itemprop="description">Spinners provide a quick way to select one value from a set. In the default state, a spinner shows -its currently selected value. Touching the spinner displays a dropdown menu with all other available -values, from which the user can select a new one.</p> - - -<div class="cols"> - <div class="col-6"> - - <img src="{@docRoot}design/media/spinners_form.png"> - -<h4>Spinners in forms</h4> -<p>Spinners are useful for data picking in forms. They are compact and integrate nicely with other -components. Use spinners in forms for both simple data input and in combination with other input -fields. For example, a text field might let you edit an email address for a contact, while its -associated spinner allows you to select whether it's a Home or Work address.</p> - - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/spinners_actionbar.png"> - -<h4>Spinners in action bars</h4> -<p>Use spinners in action bars to switch views. For example, Gmail uses a spinner to permit switching -between accounts or commonly used labels. Spinners are useful when changing the view is important to -your app, but not necessarily a frequent occurrence. In cases where view switching is frequent, use -tabs.</p> - - </div> -</div> - -<img src="{@docRoot}design/media/spinners_hololightanddark.png"> -<div class="figure-caption"> - Spinners in the Holo Dark and Holo Light themes, in various states. -</div> - diff --git a/docs/html/design/building-blocks/switches.jd b/docs/html/design/building-blocks/switches.jd deleted file mode 100644 index 9dd09ca..0000000 --- a/docs/html/design/building-blocks/switches.jd +++ /dev/null @@ -1,64 +0,0 @@ -page.title=Switches -page.tags=switch,checkbox,radiobutton,button -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/selection-controls.html"> - <div> - <h3>Material Design</h3> - <p>Selection Controls<p> - </div> -</a> - -<p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio -buttons, and on/off switches.</p> - - - -<h2 id="checkboxes">Checkboxes</h2> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/checkbox.html"> - <div> - <h3>Developer Docs</h3> - <p>Checkboxes</p> - </div> -</a> - -<p itemprop="description">Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to -turn an option off or on. Instead, use an on/off switch.</p> - - <img src="{@docRoot}design/media/switches_checkboxes.png"> - - - -<h2 id="radio-buttons">Radio Buttons</h2> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/radiobutton.html"> - <div> - <h3>Developer Docs</h3> - <p>Radio Buttons</p> - </div> -</a> - -<p>Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive -selection if you think that the user needs to see all available options side-by-side. Otherwise, -consider a spinner, which uses less space.</p> - - <img src="{@docRoot}design/media/switches_radios.png"> - - - -<h2 id="switches">On/off Switches</h2> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/togglebutton.html"> - <div> - <h3>Developer Docs</h3> - <p>Toggle Buttons</p> - </div> -</a> - -<p>On/off switches toggle the state of a single settings option.</p> - - <img src="{@docRoot}design/media/switches_switches.png"> - - diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd deleted file mode 100644 index 1315a2f..0000000 --- a/docs/html/design/building-blocks/tabs.jd +++ /dev/null @@ -1,65 +0,0 @@ -page.title=Tabs -page.tags=tabs,actionbar,navigation,viewpager -@jd:body - -<img src="{@docRoot}design/media/tabs_overview.png"> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/tabs.html"> - <div> - <h3>Material Design</h3> - <p>Tabs<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}training/implementing-navigation/lateral.html"> - <div> - <h3>Developer Docs</h3> - <p>Creating Swipe Views<br>with Tabs</p> - </div> -</a> - -<p itemprop="description">Tabs in the action bar make it easy to explore and switch between different views or functional -aspects of your app, or to browse categorized data sets.</p> - -<p>For details on using gestures to move between tabs, see the <a href="{@docRoot}design/patterns/swipe-views.html">Swipe Views</a> pattern.</p> - -<h2 id="scrollable">Scrollable Tabs</h2> - - -<div class="cols"> - <div class="col-6"> - -<p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate -to the next/previous view, swipe left or right.</p> - - </div> - <div class="col-7"> - - <video width="400" class="with-shadow play-on-hover" autoplay> - <source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4"> - <source src="{@docRoot}design/media/tabs_scrolly.webm" type="video/webm"> - <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg"> - </video> - <div class="figure-caption"> - Scrolling tabs in the Play Store app. - <div class="video-instructions-image"> </div> - </div> - - </div> -</div> - - -<h2 id="fixed">Fixed Tabs</h2> -<p>Fixed tabs display all items concurrently. To navigate to a different view, touch the tab, or swipe left or right.</p> -<p>Fixed tabs are displayed with equal width, based on the width of the widest tab label. If there is insufficient room to display all tabs, the tab labels themselves will be scrollable. For this reason, fixed tabs are best suited for displaying 3 or fewer tabs.</p> - -<img src="{@docRoot}design/media/tabs_standard.png"> -<div class="figure-caption"> - Tabs in Holo Dark & Light. -</div> - -<img src="{@docRoot}design/media/tabs_youtube.png"> -<div class="figure-caption"> - Tabs in the Google Play Movies app. -</div> diff --git a/docs/html/design/building-blocks/text-fields.jd b/docs/html/design/building-blocks/text-fields.jd deleted file mode 100644 index 9403679..0000000 --- a/docs/html/design/building-blocks/text-fields.jd +++ /dev/null @@ -1,88 +0,0 @@ -page.title=Text Fields -page.tags=text,edittext,input -@jd:body - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/text-fields.html"> - <div> - <h3>Material Design</h3> - <p>Text Fields<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/text.html"> - <div> - <h3>Developer Docs</h3> - <p>Text Fields</p> - </div> -</a> - -<p itemprop="description">Text fields allow the user to type text into your app. They can be either single line or multi-line. -Touching a text field places the cursor and automatically displays the keyboard. In addition to -typing, text fields allow for a variety of other activities, such as text selection (cut, copy, -paste) and data lookup via auto-completion.</p> - - -<div class="cols"> - <div class="col-12"> - - <img src="{@docRoot}design/media/text_input_singlevsmultiline.png"> - - </div> -</div> - -<h4>Single line and multi line</h4> -<p>Single-line fields automatically scroll their content to the left as the text input cursor reaches -the right edge of the input field. Multi-line text fields automatically break to a new line for -overflow text and scroll vertically when the cursor reaches the lower edge.</p> - -<img src="{@docRoot}design/media/text_input_typesandtypedown.png"> - -<div class="cols"> - <div class="col-6"> - -<h4>Text field types</h4> -<p>Text fields can have different types, such as number, message, or email address. The type determines -what kind of characters are allowed inside the field, and may prompt the virtual keyboard to -optimize its layout for frequently used characters.</p> - - </div> - <div class="col-6"> - -<h4>Auto-complete text fields</h4> -<p>Use auto-complete text fields to present real-time completions or search results in popups, so users -can enter information more accurately and efficiently.</p> - - </div> -</div> - -<h2 id="text-selection">Text Selection</h2> - -<p>Users can select any word in a text field with a long press. This action triggers a text selection -mode that facilitates extending the selection or choosing an action to perform on the selected text. -Selection mode includes:</p> - -<div class="cols"> - <div class="col-9"> - - <img src="{@docRoot}design/media/text_input_textselection.png"> - - </div> - <div class="col-4 with-callouts"> - -<ol> -<li> -<h4>Contextual action bar</h4> -<p>A contextual action bar (CAB) displays the actions available to perform on the selection: - typically cut, copy, and paste, but apps can insert additional commands as needed.</p> -</li> -<li> -<h4>Selection handles</h4> -<p>Selection handles can be dragged to select more or less text while remaining in selection mode.</p> -</li> -</ol> - - </div> -</div> - diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs index 63f5cad..85569ef 100644 --- a/docs/html/design/design_toc.cs +++ b/docs/html/design/design_toc.cs @@ -1,15 +1,15 @@ <ul id="nav"> <li class="nav-section"> - <div class="nav-section-header"><a href="<?cs var:toroot ?>design/index.html">Get Started</a></div> + <div class="nav-section-header"><a href="<?cs var:toroot ?>design/get-started/creative-vision.html">Creative Vision</a></div> <ul> - <li><a href="<?cs var:toroot ?>design/get-started/creative-vision.html">Creative Vision</a></li> <li><a href="<?cs var:toroot ?>design/get-started/principles.html">Design Principles</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/new.html">New in Android</a></li> </ul> </li> <li class="nav-section"> - <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/material/index.html">Material Design</a></div> + <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/material/index.html">Material for Android</a></div> </li> <li class="nav-section"> @@ -43,59 +43,20 @@ </li> <li class="nav-section"> - <div class="nav-section-header"><a href="<?cs var:toroot ?>design/style/index.html">Style</a></div> + <div class="nav-section-header"><a href="<?cs var:toroot ?>design/style/index.html">Pure Android</a></div> <ul> <li><a href="<?cs var:toroot ?>design/style/devices-displays.html">Devices and Displays</a></li> - <li><a href="<?cs var:toroot ?>design/style/themes.html">Themes</a></li> - <li><a href="<?cs var:toroot ?>design/style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="<?cs var:toroot ?>design/style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="<?cs var:toroot ?>design/style/typography.html">Typography</a></li> - <li><a href="<?cs var:toroot ?>design/style/color.html">Color</a></li> - <li><a href="<?cs var:toroot ?>design/style/iconography.html">Iconography</a></li> - <li><a href="<?cs var:toroot ?>design/style/branding.html">Your Branding</a></li> - <li><a href="<?cs var:toroot ?>design/style/writing.html" zh-cn-lang="写作风格">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></div> - <ul> - <li><a href="<?cs var:toroot ?>design/patterns/new.html">New in Android</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/gestures.html">Gestures</a></li> <li><a href="<?cs var:toroot ?>design/patterns/app-structure.html">App Structure</a></li> <li><a href="<?cs var:toroot ?>design/patterns/navigation.html">Navigation</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/actionbar.html">Action Bar</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/navigation-drawer.html">Navigation Drawer</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/widgets.html">Widgets</a></li> <li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li> <li><a href="<?cs var:toroot ?>design/patterns/fullscreen.html">Full Screen</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li> <li><a href="<?cs var:toroot ?>design/patterns/confirming-acknowledging.html">Confirming & Acknowledging</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/widgets.html">Widgets</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/settings.html">Settings</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/help.html">Help</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li> <li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</a></li> <li><a href="<?cs var:toroot ?>design/patterns/accessibility.html">Accessibility</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="<?cs var:toroot ?>design/building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="<?cs var:toroot ?>design/building-blocks/tabs.html">Tabs</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/lists.html">Lists</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/spinners.html">Spinners</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/buttons.html">Buttons</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/switches.html">Switches</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/pickers.html">Pickers</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/help.html">Help</a></li> </ul> </li> @@ -103,8 +64,8 @@ <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></div> </li> - <li class="nav-section"> +<!-- <li class="nav-section"> <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/videos/index.html">Videos</a></div> - </li> + </li> --> </ul> diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd index 0b9f59f..089a4af 100644 --- a/docs/html/design/downloads/index.jd +++ b/docs/html/design/downloads/index.jd @@ -3,107 +3,16 @@ page.tags=Icons,stencils,color swatches @jd:body -<p>You may use these materials without restriction to facilitate your app design -and implementation.</p> +<p>For icons, sticker sheets, and other downloadable resources, visit the +<a href="http://www.google.com/design">Design site</a> or use the links below. </p> - -<h2 id="stencils">Phone & Tablet Stencils</h2> - -<div class="cols"> - <div class="col-5"> - - -<p>Drag and drop your way to beautifully designed Android apps. The stencils feature the -rich typography, colors, interactive controls, and icons found throughout Android, along with -phone and tablet outlines to frame your creations. Source files for icons and controls are also -available.</p> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/downloads_stencils.png"> - - </div> - - <div class="col-4"> - <a class="notice-designers-material" - style="width:218px;" - href="http://www.google.com/design/spec/resources/layout-templates.html"> - <div> - <h3>Material Design</h3> - <p>Layout Templates<p> - </div> - </a> - </div> - - <div class="col-4"> - <a class="notice-designers-material" - style="width:218px;" - href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html"> - <div> - <h3>Material Design</h3> - <p>Sticker Sheets<p> - </div> - </a> - </div> - - <div class="col-4"> -<p> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Photoshop Sources');" - href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe® Photoshop® Stencils and Sources</a> -</p> - - </div> -</div> - - - - - - -<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2> - -<div class="cols"> - <div class="col-5"> - -<p>Action bar icons are graphic buttons that represent the most important actions people can take -within your app. <a href="{@docRoot}design/style/iconography.html">More on Action Bar Iconography</a></p> -<p>The download package includes icons that are scaled for various screen densities and suitable for -use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can -modify to match your theme, plus source files.</p> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_style.png"> - - </div> - - <div class="col-4"> - <a class="notice-designers-material" - style="width:218px;" - href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html"> - <div> - <h3>Material Design</h3> - <p>Sticker Sheets<p> - </div> - </a> - </div> - - <div class="col-4"> - -<p> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Action Bar Icons');" - href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Action Bar Icon Pack</a> -</p> - - </div> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:design/landing/resources" + data-cardSizes="6x2" + data-maxResults="6"></div> </div> - - - <h2 id="Wear">Android Wear Materials</h2> <div class="cols"> @@ -243,86 +152,4 @@ system indicators. <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');" href="{@docRoot}downloads/design/Slide_IconExample.psd">Adobe® Photoshop® Icon</a> </div> -</div> - - - - -<h2 id="style">Style</h2> - -<div class="cols"> - <div class="col-5"> - -<h4 id="roboto">Roboto</h4> -<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the -requirements of UI and high-resolution screens.</p> -<p>For Android Wear, Roboto Condensed is the system font and the Regular and Light variants should be used by all Wear apps.</p> -<p><a href="{@docRoot}design/style/typography.html">More on Roboto</a></p> -<p><a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto on Google Fonts</a></p> -<p><a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed on Google Fonts</a></p> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png"> - - </div> - - <div class="col-4"> - <a class="notice-designers-material" - style="width:218px;" - href="http://www.google.com/design/spec/resources/roboto-noto-fonts.html"> - <div> - <h3>Material Design</h3> - <p>Roboto Font<p> - </div> - </a> - </div> - - <div class="col-4"> - -<p> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');" - href="{@docRoot}downloads/design/roboto-1.2.zip">Roboto</a> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto Specemin Book');" - href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a> -</p> - - </div> -</div> - -<div class="cols"> - <div class="col-5"> - -<h4>Color</h4> -<p>In Android's color palette, each color has a corresponding darker -shade that can be used as a complement when needed.</p> -<p><a href="{@docRoot}design/style/color.html">More on Color</a></p> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/downloads_color_swatches.png"> - - </div> - - <div class="col-4"> - <a class="notice-designers-material" - style="width:218px;" - href="http://www.google.com/design/spec/resources/color-palettes.html"> - <div> - <h3>Material Design</h3> - <p>Color Palettes<p> - </div> - </a> - </div> - - <div class="col-4"> - -<p> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches');" - href="{@docRoot}downloads/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a> -</p> - - </div> -</div> +</div>
\ No newline at end of file diff --git a/docs/html/design/get-started/creative-vision.jd b/docs/html/design/get-started/creative-vision.jd index 3955494..974d5d0 100644 --- a/docs/html/design/get-started/creative-vision.jd +++ b/docs/html/design/get-started/creative-vision.jd @@ -7,10 +7,9 @@ page.image=images/cards/design-creative-vision_2x.jpg <div class="vspace size-1"> </div> <p itemprop="description"> - Starting with Ice Cream Sandwich, we focused the design of - Android around these three overarching goals, which apply - to our core apps as well as the system at large. - As you work with Android, consider these goals. + Android design is shaped by three overarching goals for users that apply + to apps as well as the system at large. As you work with Android, + keep these goals in mind. </p> <div class="vspace size-1"> </div> diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd index 74af6e7..1ffb0a3 100644 --- a/docs/html/design/index.jd +++ b/docs/html/design/index.jd @@ -14,17 +14,14 @@ footer.hide=1 <img class="dac-hero-image" src="/design/media/hero-material-design.png"> </div> <div class="col-1of2 col-pull-1of2"> - <h1 class="dac-hero-title">Up and running with Material Design</h1> + <h1 class="dac-hero-title">Up and running with material design</h1> <p class="dac-hero-description"> - Android 5.0 introduces a design metaphor inspired by paper and ink that provides a reassuring sense of tactility. + Android uses a new design metaphor inspired by paper and ink that provides a reassuring + sense of tactility. Visit the <a href="http://www.google.com/design/spec/material-design/introduction">material design</a> site for more resources. </p> <a class="dac-hero-cta" href="https://www.google.com/design/spec/material-design/introduction.html"> <span class="dac-sprite dac-auto-chevron"></span> - Introducing Material Design - </a><br> - <a class="dac-hero-cta" href="/design/material/index.html"> - <span class="dac-sprite dac-auto-chevron"></span> - Material Design for Android + Introducing material design </a><br> <a class="dac-hero-cta" href="https://www.google.com/design/spec/resources/color-palettes.html"> <span class="dac-sprite dac-auto-chevron"></span> @@ -44,8 +41,12 @@ footer.hide=1 </div> </div> </section> - -<section class="dac-section dac-gray dac-small dac-invert"><div class="wrap"> +<div class="wrap dac-offset-parent"> + <a class="dac-fab dac-scroll-button" data-scroll-button href="#latest"> + <i class="dac-sprite dac-arrow-down-gray"></i> + </a> +</div> +<section class="dac-section dac-gray dac-small dac-invert" id="latest"><div class="wrap"> <h2 class="norule">Latest</h2> <div class="resource-widget resource-flow-layout col-16" data-query="collection:design/landing/latest" @@ -56,7 +57,7 @@ footer.hide=1 <section class="dac-section dac-light"><div class="wrap"> <h1 class="dac-section-title">Pure Android</h1> <div class="dac-section-subtitle"> - This is a place holder paragraph. Some text here would povide some context. + Design around Android's capabilities and conventions to give users the best experience. </div> <div class="resource-widget resource-flow-layout col-16" data-query="collection:design/landing/pureandroid" @@ -67,7 +68,7 @@ footer.hide=1 <section class="dac-section dac-gray"><div class="wrap"> <h1 class="dac-section-title">Resources</h1> <div class="dac-section-subtitle"> - This is a place holder paragraph. Some text here would povide some context. + Essential downloads, stencils, and tools to help you create your design. </div> <div class="resource-widget resource-flow-layout col-16" data-query="collection:design/landing/resources" diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd deleted file mode 100644 index b471ee3..0000000 --- a/docs/html/design/patterns/gestures.jd +++ /dev/null @@ -1,135 +0,0 @@ -page.title=Gestures -page.tags=gesture,input,touch -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/patterns/gestures.html"> - <div> - <h3>Material Design</h3> - <p>Gestures<p> - </div> -</a> - -<p>Gestures allow users to interact with your app by manipulating the screen objects you provide. The -following table shows the core gesture set that is supported in Android.</p> - -<div class="vspace size-2"> </div> - -<div class="cols"> - - <div class="col-4"> - <img src="{@docRoot}design/media/gesture_touch.png"> - <h4>Touch</h4> - <p>Triggers the default functionality for a given item.</p> - <ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>Press, lift</p></li> - </ul> - </div> - - <div class="col-4"> - <img src="{@docRoot}design/media/gesture_longtouch.png"> - <h4>Long press</h4> - <p>Enters data selection mode. Allows you to select one or more items in a view and act upon - the data using a contextual action bar. Avoid using long press for showing contextual menus.</p> - <ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>Press, wait, lift</p></li> - </ul> - </div> - - <div class="col-4"> - <img src="{@docRoot}design/media/gesture_swipe.png"> - <h4>Swipe or drag</h4> - <p>Scrolls overflowing content, or navigates between views in the same hierarchy. Swipes are - quick and affect the screen even after the finger is picked up. Drags are slower and more precise, - and the screen stops responding when the finger is picked up.</p> - <ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>Press, move, lift</p></li> - </ul> - </div> - -</div> - -<div class="vspace size-2"> </div> - -<div class="cols"> - - <div class="col-4"> - <img src="{@docRoot}design/media/gesture_drag.png"> - <h4>Long press drag</h4> - <p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p> - <ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>Long press, move, lift</p></li> - </ul> - </div> - - <div class="col-4"> - <img src="{@docRoot}design/media/gesture_doubletouch.png"> - <h4>Double touch </h4> - <p> Scales up a standard amount around the target with each repeated gesture until reaching - maximum scale. For nested views, scales up the smallest targetable view, or returns it to - its original scale. Also used as a secondary gesture for text selection.</p> - <ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>Two touches in quick succession</p> - </li> - </ul> - </div> - - <div class="col-4"> - <img src="{@docRoot}design/media/gesture_doubletouchdrag.png"> - <h4>Double touch drag</h4> - <p>Scales content by pushing away or pulling closer, centered around gesture.</p> - <ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>A single touch followed in quick succession by a drag up or down:</p> - <ul style="padding-left:1.5em;list-style-type:disc;"> - <li>Dragging up decreases content scale</li> - <li>Dragging down increases content scale</li> - <li>Reversing drag direction reverses scaling.</li> - </ul> - </li> - </ul> - </div> - -</div> - - -<div class="vspace size-2"> </div> - -<div class="cols"> - - <div class="col-4"> - <img src="{@docRoot}design/media/gesture_pinchopen.png" style="margin-left:-4px"> - <h4>Pinch open</h4> - <p>Zooms into content.</p> - <ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>2-finger press, move outwards, lift</p></li> - </ul> - </div> - - <div class="col-4"> - <img src="{@docRoot}design/media/gesture_pinchclose.png"> - <h4>Pinch close</h4> - <p>Zooms out of content.</p> - <ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>2-finger press, move inwards, lift</p> - </li> - </ul> - </div> - -</div> - diff --git a/docs/html/design/patterns/index.jd b/docs/html/design/patterns/index.jd deleted file mode 100644 index e091a29..0000000 --- a/docs/html/design/patterns/index.jd +++ /dev/null @@ -1,30 +0,0 @@ -page.title=Patterns -header.justLinks=1 -footer.hide=1 -@jd:body - -<style> -#landing-graphic-container { - position: relative; -} - -#text-overlay { - position: absolute; - left: 0; - top: 492px; - width: 200px; -} -</style> - -<div id="landing-graphic-container"> - <div id="text-overlay"> - <span itemprop="description">Design apps that behave in a consistent, predictable - fashion.</span> - <br><br> - <a href="{@docRoot}design/patterns/new.html" class="landing-page-link">New in Android</a> - </div> - - <a href="{@docRoot}design/patterns/new.html"> - <img src="{@docRoot}design/media/patterns_landing.png"> - </a> -</div> diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd deleted file mode 100644 index c9d3d84..0000000 --- a/docs/html/design/patterns/multi-pane-layouts.jd +++ /dev/null @@ -1,130 +0,0 @@ -page.title=Multi-pane Layouts -page.tags="tablet","navigation","layout","fragment" -page.metaDescription=Design guide with examples of how to flatten navigation and provide improved layout across the range of Android devices. - -@jd:body - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/layout/structure.html#structure-ui-regions"> - <div> - <h3>Material Design</h3> - <p>UI Regions and Guidance<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}training/basics/fragments/index.html"> - <div> - <h3>Developer Docs</h3> - <p>Building a Dynamic UI with Fragments</p> - </div> -</a> - -<p>When writing an app for Android, keep in mind that Android devices -come in many different screen sizes and types. Make sure that your app consistently provides a -balanced and aesthetically pleasing layout by adjusting its content to varying screen sizes and -orientations.</p> - -<p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into -one compound view when a lot of horizontal screen real estate is available and by splitting them up -when less space is available.</p> -<h2 id="combining-views">Combining Multiple Views Into One</h2> - -<p>On smaller devices your content is typically divided into a master grid or list view and a detail -view. Touching an item in the master view opens a different screen showing that item's detail -information.</p> - -<img src="{@docRoot}design/media/multipane_views.png"> - -<p>Because tablets have more screen real estate than phones, you can use panels to combine the related -list and detail views into a single compound view. This uses the additional space more efficiently -and makes navigating the app easier. </p> - -<img src="{@docRoot}design/media/multipane_view_tablet.png"> - -<p>In general, use the pane on the right to present more information about the item you selected in the -left pane. Make sure to keep the item in the left pane selected in order to establish the -relationship between the panels.</p> -<h2 id="orientation">Compound Views and Orientation Changes</h2> - -<p>Screens should strive to have the same functionality regardless of orientation. If you use a compound view in -one orientation, try not to split it up when the user rotates the screen. There are several techniques -you can use to adjust the layout after orientation change while keeping functional parity intact.</p> - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/multipane_stretch.png"> - - </div> - <div class="col-5"> - -<h4>Stretch/compress</h4> -<p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p> - - </div> -</div> - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/multipane_stack.png"> - - </div> - <div class="col-5"> - -<h4>Stack</h4> -<p>Rearrange the panels on your screen to match the orientation.</p> - - </div> -</div> - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/multipane_expand.png"> - - </div> - <div class="col-5"> - -<h4>Expand/collapse</h4> -<p>When the device rotates, collapse the left pane view to only show the most important information.</p> - - </div> -</div> - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/multipane_show.png"> - - </div> - <div class="col-5"> - -<h4>Show/hide</h4> -<p>If your screen cannot accommodate the compound view on rotation show the right pane in full screen view on rotation to portrait. Use the Up icon in action bar to show the parent screen.</p> - - </div> -</div> - - - - -<h2 id="checklist">Checklist</h2> - -<ul> -<li> -<p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p> -</li> -<li> -<p>Identify the most appropriate method for the panels in your compound views to reorganize - themselves when screen orientation changes.</p> -</li> -<li> -<p>Look for opportunities to consolidate your views into multi-panel compound views.</p> -</li> -<li> -<p>Make sure that your screens try to provide functional parity after the screen orientation - changes.</p> -</li> -</ul> diff --git a/docs/html/design/patterns/navigation-drawer.jd b/docs/html/design/patterns/navigation-drawer.jd deleted file mode 100644 index b359470..0000000 --- a/docs/html/design/patterns/navigation-drawer.jd +++ /dev/null @@ -1,346 +0,0 @@ -page.title=Navigation Drawer -page.tags=DrawerLayout,SlidingPaneLayout -@jd:body - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/layout/structure.html#structure-side-nav"> - <div> - <h3>Material Design</h3> - <p>Side Nav<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}training/implementing-navigation/nav-drawer.html"> - <div> - <h3>Developer Docs</h3> - <p>Creating a Navigation Drawer</p> - </div> -</a> - - -<p>The navigation drawer is a panel that transitions in from the left edge of the screen and -displays the app’s main navigation options.</p> - - -<h4>Displaying the navigation drawer</h4> - -<p>The user can bring the navigation drawer onto the screen by swiping from the left edge of the -screen or by touching the application icon on the action bar.</p> - -<p>As the navigation drawer expands, it overlays the content but not the action bar. When the -drawer is fully extended, the action bar adjusts its content by replacing the current action -bar title with the app name and removing all actions that are contextual to the view underneath -the navigation drawer. The overflow menu with the standard action items for Settings and Help -remains visible.</p> - -<img src="{@docRoot}design/media/navigation_drawer_overview.png"> -<div class="figure-caption"> - The user can open the drawer panel by touching the navigation drawer indicator. -</div> - -<p>Because they are transient, navigation drawers make views less cluttered. You can also use -them at deeper levels in the navigation hierarchy, allowing users to switch to your app's most -important screens from anywhere in the app.</p> - -<img src="{@docRoot}design/media/navigation_drawer_open_from_lower.png"> -<div class="figure-caption"> - Open the drawer from anywhere in your app by swiping from the left edge of the screen. -</div> - - -<h4>Dismissing the navigation drawer</h4> - -<p> When the navigation drawer is expanded, the user can dismiss it in one of four ways: </p> -<ul> - <li>Touching the content outside the navigation drawer</li> - <li>Swiping to the left anywhere on the screen (including edge swipe from right)</li> - <li>Touching the app icon/title in the action bar</li> - <li>Pressing Back</li> -</ul> - - -<h2 id="WhenToUse"> When to Use the Navigation Drawer </h2> - -<p> The navigation drawer is not a general replacement for top-level navigation via spinners -or tabs. The structure of your app should guide your choice of which pattern to use for -top-level switching. For more information on top-level switching mechanisms, see the -<a href="{@docRoot}design/patterns/app-structure.html">Application Structure</a> design pattern.</p> -<p> Here are some examples of where navigation drawers work best:</p> - -<h4>More than 3 top-level views</h4> -<p> Navigation drawers are great for displaying a large number of navigation targets -concurrently. Use the navigation drawer if you have more than 3 unique top-level views. -If not, use fixed tabs for top-level organization to ease discovery and interaction.</p> - -<h4>Cross-navigation from lower levels</h4> -<p> If your app requires cross-navigating between lower-level screens, consider using the -navigation drawer. Because it is accessible from anywhere in the app, the drawer enables -efficient navigation from lower-level screens to other important places in your app.</p> - -<img src="{@docRoot}design/media/navigation_drawer_cross_nav.png"> -<div class="figure-caption"> - The navigation drawer makes cross-navigation at lower levels possible. -</div> - - -<h4>Deep navigation branches</h4> -<p> If you have particularly deep branches, navigating to the top-level of your app can become -repetitive and cumbersome with Up and Back alone. Since navigation drawers are accessible from -anywhere in the app, navigation up to the top level is faster and more efficient.</p> - -<img src="{@docRoot}design/media/navigation_drawer_quick_to_top.png"> -<div class="figure-caption"> - The navigation drawer allows for quick jumps to the top-level of your app, removing the need - for repetitive Back or Up sequences. -</div> - - -<h2 id="Hubs">Navigation Hubs</h2> - -<p>The navigation drawer is a reflection of your app’s structure and displays its major -navigation hubs. Think of navigation hubs as those places in your app that a user will want -to visit frequently or use as a jumping-off point to other parts of the app. -At a minimum, the navigation hubs are the top-level views, since they correspond to your app’s -major functional areas.</p> -<p> If your app’s structure is deep, you can add screens from lower levels that your users will -likely visit often and make those navigation hubs as well.</p> - -<img src="{@docRoot}design/media/navigation_drawer_navigation_hubs.png"> -<div class="figure-caption"> - The navigation drawer contains all of your app's navigation hubs. Include your top level - screens as well as important lower-level screens. -</div> - -<div class="cols"> - <div class="col-8"> - <p> To facilitate access to the navigation drawer on navigation hubs, all screens that - correspond to an entry in your navigation drawer should show the navigation drawer indicator - next to the application icon in the action bar. Touching the app icon causes the navigation - drawer to slide in from the left. </p> - <p> All other lower-level screens show the traditional Up indicator next to the application - icon. The drawer is still accessible with an edge-swipe, but is not featured in the action bar.</p> - </div> - <div class="col-5"> - <img src="{@docRoot}design/media/navigation_drawer_indicator_big.png"> - <div class="figure-caption"> - App icon with navigation drawer indicator. - </div> - </div> -</div> - - -<h2 id="Content">Content of the Navigation Drawer</h2> - -<p> Keep the content of the navigation drawer focused on app navigation. Expose the navigation -hubs of your app as list items inside the navigation drawer - one item per row. - -<div class="cols"> - <div class="col-8"> - <h4>Titles, icons, and counters</h4> - <p> You can structure navigation targets by adding titles. The titles are not interactive, - but just organize navigation targets into functional topics. If you have many navigation - targets, use titles to orient the user within the drawer.</p> - <p> Navigation targets can have optional leading icons as well as trailing counters. Use - the counters to inform users about a changed state of data in the corresponding view.</p> - </div> - <div class="col-5"> - <img src="{@docRoot}design/media/navigation_drawer_titles_icons.png"> - <div class="figure-caption"> - Use titles and icons to organize your drawer. - </div> - </div> -</div> - -<div class="cols"> - <div class="col-8"> - <img src="{@docRoot}design/media/navigation_drawer_collapse.png"> - <div class="figure-caption"> - Collapsible navigation items are split. Use the left side for navigation and the right - to collapse and expand items. - </div> - </div> - <div class="col-5"> - <h4>Collapsible navigation items</h4> - <p>If you have many views with some subordinate to others, consider collapsing them into one - expandable item to conserve space. - The parent in the navigation drawer then turns into a split item. The left side allows - navigation to the parent item’s view, and the right side collapses or expands the list of - child items. </p> - <p> At launch, the initial state of the collapsible items is up to you. As a rule, all - top-level view entries of the navigation drawer should be visible. If you have many collapsible - items, consider collapsing all items to allow the user to see the top-level views in their - entirety.</p> - <p> When the user opens the drawer from a lower-level screen, expand the associated branch - of the top-level view to give a stronger sense of place and highlight navigation opportunities - close to the user’s current - location in the app.</p> - </div> -</div> - - -<h2 id="ActionBar">Navigation Drawers and Action Bars</h2> - -<p> When the user expands the navigation drawer, the task focus switches to selecting an item -from the drawer. Because the drawer does not overlay the action bar, users may not realize that -the items in the action bar do not pertain to the navigation drawer. </p> -<p> To reduce confusion, adjust the content of the action bar to the following, once the drawer -is fully expanded:</p> -<ul> - <li>App icon</li> - <li>App name</li> - <li>Remove actions from the action bar that are contextual to the underlying view (such as - Create new, Refresh). You may retain actions with global scope, such as “Search”.</li> - <li>Overflow menu with expected navigation targets, such as Settings and Help.</li> -</ul> - -<img src="{@docRoot}design/media/navigation_drawer_open_overflow.png"> -<div class="figure-caption"> - Clean up the action bar when the drawer is fully expanded. Remove actions that are not needed - and display your app's name in the title area. -</div> - -<h4>Actions</h4> -<div class="cols"> - <div class="col-6"> - <img src="{@docRoot}design/media/navigation_drawer_nav_and_actions.png"> - <div class="figure-caption"> - Keep actions on the right side of the action bar and in the overflow - </div> - </div> - <div class="col-6"> - <p> Don’t place actions in the navigation drawer. Actions belong in the action bar, and the - user expects to see them there. Keep in mind that not all applications use the navigation - drawer pattern. It may be tempting to expose all your app’s capabilities in a single place, - but keep the bigger picture in mind. Place your actions where all apps display them.</p> - </div> -</div> -<div class="cols"> - <div class="col-6"> - <p> This also applies to common navigation targets, such as access to Help or the app’s - Settings. As per style guide convention Help and Settings are always located in the action - overflow.</p> - </div> - <div class="col-6"> - <img src="{@docRoot}design/media/navigation_drawer_settings_help.png"> - <div class="figure-caption"> - Keep Help and Settings in the overflow. - </div> - </div> -</div> - - -<h4>Contextual action bars</h4> -<p> Sometimes the user will be in a state where a contextual action bar (CAB) appears instead -of the app’s action bar. This typically happens when the user selects text or selects multiple -items after a press-and-hold gesture. While the CAB is visible, you should still allow the -user to open the navigation drawer using an edge swipe. However, replace the CAB with the -standard action bar while the navigation drawer is open. When the user dismisses the drawer, -re-display the CAB.</p> - -<img src="{@docRoot}design/media/navigation_drawer_CAB.png"> -<div class="figure-caption"> - Hide contextual action bars while the drawer is visible. -</div> - -<p>If the user navigates away from a view with selected content, deselect the content before -before navigating to the new view.</p> - - -<h2 id="Interaction">Interaction Details</h2> - -<h4>Introduce the user to the drawer at first use</h4> -<p> Upon first launch of your app, introduce the user to the navigation drawer by -automatically opening it. This ensures that users know about the navigation drawer and prompts -them to learn about the structure of your app by exploring its content. Continue showing the -drawer upon subsequent launches until the user actively expands the navigation drawer manually. -Once you know that the user understands how to open the drawer, launch the app with the -navigation drawer closed. </p> - -<img src="{@docRoot}design/media/navigation_drawer_first_run.png"> -<div class="figure-caption"> - At first use, show the navigation drawer automatically to help the user learn the - functionality and structure of your app. -</div> - -<h4>Give the user a quick peek</h4> -<p> If the user touches the very left edge of the screen (within 20 dp from the left), have the -drawer peek out as soon as the finger makes contact with the display. This promotes accidental -discovery and provides richer feedback. </p> - -<img src="{@docRoot}design/media/navigation_drawer_peek.png"> -<div class="figure-caption"> - The navigation drawer peeks out when the user touches the very left edge of the screen. -</div> - -<h4>Highlights</h4> -<p> When you open the navigation drawer from a screen that is represented inside the drawer, -highlight its entry in the drawer. Vice versa, if you open the drawer from a screen that is -not listed in the drawer, none of the items of the drawer should be highlighted.</p> - - -<h2 id="ImpactOnNav">Impact of Drawer on Overall App Navigation</h2> - -<p>The navigation drawer is an alternative to other top-level navigation patterns. To make apps -with navigation drawers work consistently with apps that use a tab or spinner pattern, remember -that all navigation requirements for system Back and Up apply.</p> -<p>Pay special attention to the following situations:</p> - -<h4>System Back at the top level of the app</h4> -<p>Touching System Back at the app’s top level never opens the navigation drawer. Instead, -System Back behaves according to the navigation rules for the top level, such as navigating -to the previous app within the task or navigating to the Home screen.</p> - -<img src="{@docRoot}design/media/navigation_drawer_top_out.png"> -<div class="figure-caption"> - System Back does not show the drawer, but behaves according to the navigation rules for - the top level. -</div> - -<h4>System Back after cross navigation to lower hierarchy levels</h4> -<p>If the user navigates to a lower hierarchy screen from the navigation drawer and the screen -has a direct parent, then the Back stack is reset and Back points to the target screen’s parent. -This Back behavior is the same as when a user navigates into an app from a notification.</p> - -<img src="{@docRoot}design/media/navigation_drawer_reset_backstack.png"> -<div class="figure-caption"> - Reset the Back stack if your lower-level navigation target has direct parents. -</div> - - -<h2 id="Style">Style</h2> - -<p>The width of the navigation drawer depends on the content you want to display, but should be -between a minimum of 240 dp and a maximum of 320 dp. The height of the individual line items -should not fall below 48 dp. See the layout guideline below for recommendations on padding and -spacing.</p> - -<img src="{@docRoot}design/media/navigation_drawer_layout.png"> -<div class="figure-caption"> - Layout guidelines for the navigation drawer. -</div> - - -<p>Pick the drawer background to best match your app’s theme. See the following examples -for a Holo light and a Holo dark themed drawer.</p> - -<img src="{@docRoot}design/media/navigation_drawer_holo_dark_light.png"> -<div class="figure-caption"> - Navigation drawers in Holo light and Holo dark themed apps. -</div> - - -<h2 id="Checklist">Navigation Drawer Checklist</h2> - -<p>Even if you already support a similar navigation drawer, update your drawer to this -pattern to make sure that:</p> -<ul> - <li>The action bar remains in place and adjusts its content.</li> - <li>Your navigation drawer overlays the content.</li> - <li>Any view represented in the drawer has a navigation drawer indicator in its action bar - that allows the drawer to be opened by touching the app icon.</li> - <li>You take advantage of the new visual drawer transition.</li> - <li>Any view not represented in the drawer maintains the traditional Up indicator in its action bar.</li> - <li>You stay in sync with the general navigation patterns for Up and Back.</li> -</ul> - diff --git a/docs/html/design/patterns/selection.jd b/docs/html/design/patterns/selection.jd deleted file mode 100644 index e00f726..0000000 --- a/docs/html/design/patterns/selection.jd +++ /dev/null @@ -1,123 +0,0 @@ -page.title=Selection -page.tags=actionmode,navigation,contextual -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/patterns/selection.html"> - <div> - <h3>Material Design</h3> - <p>Selection<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/menus.html#context-menu"> - <div> - <h3>Developer Docs</h3> - <p>Menus: Creating Contextual Menus</p> - </div> -</a> - - -<p>Android 3.0 changed the <em>long press</em> gesture—that is, a touch that's held in the same position for a moment—to be the global gesture to select data.. This affects the way you should -handle multi-select and contextual actions in your apps.</p> - -<div class="vspace size-1"> </div> - -<div class="cols"> - <div class="col-6"> - -<h4>What has changed?</h4> -<p>In previous versions of Android, the long press gesture was universally used to display contextual -actions for a given data item in a contextual menu.</p> -<p>This pattern changed with Android 3.0. The long press gesture is now used to select data, combining -contextual actions and selection management functions for selected data into a new element called -the contextual action bar (CAB).</p> - - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/selection_context_menu.png"> - <div class="figure-caption"> - Traditional use of the long press gesture to show contextual menus. - </div> - - </div> -</div> - -<h4>Using the contextual action bar</h4> -<p itemprop="description">The contextual action bar (CAB) is a temporary action bar that overlays your app's current action bar while data -is selected. It appears after the user long-presses on a selectable data item.</p> - -<img src="{@docRoot}design/media/selection_cab_big.png"> - -<div class="vspace size-1"> </div> - -<div class="cols"> - <div class="col-6"> - -<p>From here the user can:</p> -<ul> -<li>Select additional data items by touching them.</li> -<li>Trigger an action from the CAB that applies to all highlighted data items. The CAB then - automatically dismisses itself.</li> -<li>Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button. This removes - the CAB along with all selection highlights.</li> -</ul> - - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/selection_cab_example.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-6"> - -<h4>Selecting CAB actions</h4> -<p>You can decide which actions and elements appear in the CAB. Use the guidelines in the <a href="actionbar.html">Action Bar -pattern</a> to decide which items to surface at the top level and which to move to the -action overflow.</p> -<h4>Dynamically adjust CAB actions</h4> -<p>In most cases you need to adjust the actions in the CAB dynamically as the user adds more items to -the selection. Actions that apply to a single selected data item don't necessarily apply to multiple -selected data items of the same kind.</p> - - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/selection_adjusting_actions.png"> - <div class="figure-caption"> - Adjusting actions in the CAB as additional items are selected. - </div> - - </div> -</div> - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to create a contextual action bar, read - <a href="{@docRoot}guide/topics/ui/menus.html#CAB">Using the contextual action mode</a>.</p> -</div> - - -<h2 id="checklist">Checklist</h2> - -<ul> -<li> -<p>Whenever your app supports the selection of multiple data items, make use of the contextual action - bar (CAB).</p> -</li> -<li> -<p>Reserve the long press gesture for selection exclusively. Don't use it to display traditional - contextual menus.</p> -</li> -<li> -<p>If you don't support multi-selection within a list, long press should do nothing.</p> -</li> -<li> -<p>Plan the actions you want to display inside of a CAB in the same way you would plan the actions - inside your app's action bar.</p> -</li> -</ul> diff --git a/docs/html/design/patterns/settings.jd b/docs/html/design/patterns/settings.jd deleted file mode 100644 index 9ba837a..0000000 --- a/docs/html/design/patterns/settings.jd +++ /dev/null @@ -1,708 +0,0 @@ -page.title=Settings -page.tags=preferences,sharedpreferences -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/patterns/settings.html"> - <div> - <h3>Material Design</h3> - <p>Settings<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/settings.html"> - <div> - <h3>Developer Docs</h3> - <p>Settings</p> - </div> -</a> - - -<p itemprop="description">Settings is a place in your app where users indicate their preferences for how your app should -behave. This benefits users because:</p> - -<ul> -<li>You don't need to interrupt them with the same questions over and over when certain situations -arise. The settings predetermine what will always happen in those situations (see design -principle: <a href="{@docRoot}design/get-started/principles.html#decide-for-me">Decide for me but -let me have the final say</a>).</li> -<li>You help them feel at home and in control (see design principle: -<a href="{@docRoot}design/get-started/principles.html#make-it-mine">Let me make it mine</a>).</li> -</ul> - -<h2 id="flow-structure">Flow and Structure</h2> - -<h4 id="settings-access">Provide access to Settings in the action overflow</h4> - -<p>Settings is given low prominence in the UI because it's not frequently needed. Even if there's -room in the <a href="{@docRoot}design/patterns/actionbar.html">action bar</a>, never make Settings -an action button. Always keep it in the action overflow and label it "Settings". Place it below -all other items except "Help".</p> - -<img src="{@docRoot}design/media/settings_overflow.png"> - -<div class="vspace size-2"> </div> - -<h4 id="what-to-make-a-setting">Avoid the temptation to make everything a setting</h4> - -<p>Because Settings is a few navigational steps away, no matter how many items you have, they'll -never clutter up the core part of your UI. This may seem like good news, but it also poses a -challenge.</p> - -<p>Settings can be a tempting place to keep a lot of stuff—like a hall closet where things -get stashed when you tidy up before company comes over. It's not a place where you spend lots of -time, so it's easy to rationalize and ignore its cluttered condition. But when users visit -Settings—however infrequently—they'll have the same expectations for the experience as -they do everywhere else in your app. More settings means more choices to make, and too many are -overwhelming.</p> - -<p>So don't punt on the difficult product decisions and debates that can bring on the urge to -"just make it a setting". For each control you're considering adding to Settings, make sure it -meets the bar:</p> - -<img src="{@docRoot}design/media/settings_flowchart.png"> - -<div class="vspace size-3"> </div> - -<div class="cols"> - <div class="col-5 with-callouts"> - -<h4 id="group-settings">If you still have lots of settings, group related settings together</h4> - -<p>The number of items an average human can hold in short-term memory is 7±2. If you -present a list of 10 or more settings (even after applying the criteria above), users will have -more difficulty scanning, comprehending, and processing them.</p> - -<p>You can remedy this by dividing some or all of the settings into groups, effectively turning -one long list into multiple shorter lists. A group of related settings can be presented in one of -two ways:</p> - -<ol> -<li><h4>Under a section divider</h4></li> -<li><h4>In a separate subscreen</h4></li> -</ol> - -<p>You can use one or both these grouping techniques to organize your app's settings.</p> - -<p>For example, in the main screen of the Android Settings app, each item in the list navigates -to a subscreen of related settings. In addition, the items themselves are grouped under section -dividers.</p> - - </div> - <div class="col-8"> - - <img src="{@docRoot}design/media/settings_grouping.png"> - - </div> -</div> - -<p>Grouping settings is not an exact science, but here's some advice for how to approach it, based -on the total number of settings in your app.</p> - -<div class="vspace size-1"> </div> - -<div class="cols"> - <div class="col-2"> - -<h4>7 or fewer</h4> - - </div> - <div class="col-11"> - -<p>Don't group them at all. It won't benefit users and will seem like overkill.</p> - - </div> -</div> - -<div class="cols"> - <div class="col-2"> - -<h4>8 to 10</h4> - - </div> - <div class="col-11"> - -<p>Try grouping related settings under 1 or 2 section dividers. If you have any "singletons" -(settings that don't relate to any other settings and can't be grouped under your section -dividers), treat them as follows:</p> - -<ul> -<li>If they include some of your most important settings, list them at the top without a section -divider.</li> -<li>Otherwise, list them at the bottom with a section divider called "OTHER", in order of -importance.</li> -</ul> - - </div> -</div> - -<div class="cols"> - <div class="col-2"> - -<h4>11 to 15</h4> - - </div> - <div class="col-11"> - -<p>Same advice as above, but try 2 to 4 section dividers.</p> - -<p>Also, try the following to reduce the list:</p> - -<ul> -<li>If 2 or more of the settings are mainly for power users, move them out of your main Settings -screen and into an "Advanced" subscreen. Place an item in the action overflow called "Advanced" to -navigate to it.</li> -<li>Look for "doubles": two settings that relate to one another, but not to any other settings. -Try to combine them into one setting, using the design patterns described later in this section. -For example, you might be able to redesign two related checkbox settings into one multiple choice -setting.</li> -</ul> - - </div> -</div> - -<div class="cols"> - <div class="col-2"> - -<h4>16 or more</h4> - - </div> - <div class="col-11"> - -<p>If you have any instances of 4 or more related settings, group them under a subscreen. Then use -the advice suggested above for the reduced list size.</p> - - </div> -</div> - - -<h2 id="patterns">Design Patterns</h2> - -<div class="cols"> - <div class="col-3"> - -<h4>Checkbox</h4> -<p>Use this pattern for a setting that is either selected or not selected.</p> - - </div> - <div class="col-10"> - -<img src="{@docRoot}design/media/settings_checkbox.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-3"> - -<h4>Multiple choice</h4> -<p>Use this pattern for a setting that needs to present a discrete set of options, from which the -user can choose only one.</p> - - </div> - <div class="col-10"> - -<img src="{@docRoot}design/media/settings_multiple_choice.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-3"> - -<h4>Slider</h4> -<p>Use this pattern for a setting where the range of values are not discrete and fall along a -continuum.</p> - - </div> - <div class="col-10"> - -<img src="{@docRoot}design/media/settings_slider.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-3"> - -<h4>Date/time</h4> -<p>Use this pattern for a setting that needs to collect a date and/or time from the user.</p> - - </div> - <div class="col-10"> - -<img src="{@docRoot}design/media/settings_date_time.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-3"> - -<h4>Subscreen navigation</h4> -<p>Use this pattern for navigating to a subscreen or sequence of subscreens that guide the user -through a more complex setup process.</p> -<ul> -<li>If navigating to a single subscreen, use the same title in both the subscreen and the label -navigating to it.</li> -<li>If navigating to a sequence of subscreens (as in this example), use a title that describes the -first step in the sequence.</li> -</ul> - - </div> - <div class="col-10"> - -<img src="{@docRoot}design/media/settings_subscreen_navigation.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-3"> - -<h4>List subscreen</h4> -<p>Use this pattern for a setting or category of settings that contains a list of equivalent items. -</p> -<p>The label provides the name of the item, and secondary text may be used for status. (In this -example, status is reinforced with an icon to the right of the label.) Any actions associated with -the list appear in the action bar rather than the list itself.</p> - - </div> - <div class="col-10"> - -<img src="{@docRoot}design/media/settings_list_subscreen.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-3"> - -<h4>Master on/off switch</h4> -<p>Use this pattern for a category of settings that need a mechanism for turning on or off as a -whole.</p> -<p>An on/off switch is placed as the first item in the action bar of a subscreen. When the switch -is turned off, the items in the list disappear, replaced by text that describes why the list is -empty. If any actions require the switch to be on, they become disabled.</p> - - </div> - <div class="col-10"> - -<img src="{@docRoot}design/media/settings_master_on_off.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-3"> - -<div class="vspace size-2"> </div> - -<p>You can also echo the master on/off switch in the menu item that leads to the subscreen. -However, you should only do this in cases where users rarely need to access the subscreen once -it's initially set up and more often just want to toggle the switch.</p> - - </div> - <div class="col-10"> - -<img src="{@docRoot}design/media/settings_master_on_off_2.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-3"> - -<h4>Individual on/off switch</h4> -<p>Use this pattern for an individual setting that requires a more elaborate description than can -be provided in checkbox form.</p> -<p>The on/off switch only appears in the subscreen so that users aren't able to toggle it without -also being exposed to the descriptive text. Secondary text appears below the setting label to -reflect the current selection.</p> -<p>In this example, Android Beam is on by default. Since users might not know what this setting -does, we made the status more descriptive than just "On".</p> - - </div> - <div class="col-10"> - -<img src="{@docRoot}design/media/settings_individual_on_off.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-3"> - -<h4>Dependency</h4> -<p>Use this pattern for a setting that changes availability based on the value of another setting. -</p> -<p>The disabled setting appears below its dependency, without any indentation. If the setting -includes a status line, it says "Unavailable", and if the reason isn't obvious, a brief -explanation is included in the status.</p> -<p>If a given setting is a dependency to 3 or more settings, consider using a subscreen with a -master on/off switch so that your main settings screen isn't cluttered by lots of disabled items. -</p> - - </div> - <div class="col-10"> - -<img src="{@docRoot}design/media/settings_dependency.png"> - - </div> -</div> - -<h2 id="defaults">Defaults</h2> - -<p>Take great care in choosing default values for each of your settings. Because settings -determine app behavior, your choices will contribute to users' first impressions of your app. Even -though users can change settings, they'll expect the initial states to be sensible. The following -questions (when applicable) may help inform your decisions:</p> - -<ul> -<li>Which choice would most users be likely to choose on their own if there were no default?</li> -<li>Which choice is the most neutral or middle-of-the-road?</li> -<li>Which choice is the least risky, controversial, or over-the-top?</li> -<li>Which choice uses the least amount of battery or mobile data?</li> -<li>Which choice best supports the design principle -<a href="{@docRoot}design/get-started/principles.html#never-lose-my-stuff">Never lose my stuff</a>?</li> -<li>Which choice best supports the design principle -<a href="{@docRoot}design/get-started/principles.html#interrupt-only-if-important">Only interrupt -me if it's important</a>? -</li> -</ul> - -<h2 id="writing">Writing Guidelines</h2> - -<h4>Label clearly and concisely</h4> - -<p>Writing a good label for a setting can be challenging because space is very limited. You only -get one line, and it's incredibly short on the smallest of devices. Follow these guidelines to -make your labels brief, meaningful, and scannable:</p> - -<ul> -<li>Write each label in sentence case (i.e. only the first word and proper nouns are capitalized). -</li> -<li>Don't start a label with an instructional verb like "Set", "Change", "Edit", "Modify", -"Manage", "Use", "Select", or "Choose". Users already understand that they can do these things to -settings.</li> -<li>Likewise, don't end a label with a word like "setting" or "settings". It's already implied. -</li> -<li>If the setting is part of a grouping, don't repeat the word(s) used in the section divider or -subscreen title.</li> -<li>Avoid starting a label with a negative word like "Don't" or "Never". For example, "Don't -allow" could be rephrased to "Block".</li> -<li>Steer clear of technical jargon as much as possible, unless it's a term widely understood by -your target users. Use common verbs and nouns to convey the setting's purpose rather than its -underlying technology.</li> -<li>Don't refer to the user. For example, for a setting allowing the user to turn notifications on -or off, label it "Notifications" instead of "Notify me".</li> -</ul> - -<p>Once you've decided on labels for your settings, be sure to preview them on an -<a href="{@docRoot}design/style/metrics-grids.html">LDPI handset</a> in portrait to make sure -they'll fit everywhere.</p> - -<h4>Secondary text below is for status, not description…</h4> - -<p>Before Ice Cream Sandwich, we often displayed secondary text below a label to further describe -it or provide instructions. Starting in Ice Cream Sandwich, we're using secondary text for status. -</p> - -<div class="cols"> - <div class="col-4"> - - <div class="do-dont-label bad emulate-content-left-padding">Before</div> - - <table class="ui-table bad emulate-content-left-padding"> - <thead> - <tr> - <th class="label"> - Screen timeout - </th> - </tr> - </thead> - <tbody> - <tr> - <td class="secondary-text"> - Adjust the delay before the screen automatically turns off - </td> - </tr> - </tbody> - </table> - - </div> - <div class="col-4"> - - <div class="do-dont-label good">After</div> - - <table class="ui-table good"> - <thead> - <tr> - <th class="label"> - Sleep - </th> - </tr> - </thead> - <tbody> - <tr> - <td class="secondary-text"> - After 10 minutes of inactivity - </td> - </tr> - </tbody> - </table> - - </div> -</div> - -<p>Status in secondary text has the following benefits:</p> -<ul> -<li>Users can see at a glance what the current value of a setting is without having to navigate -any further.</li> -<li>It applies the design principle -<a href="{@docRoot}design/get-started/principles.html#keep-it-brief">Keep it brief</a>, which -users greatly appreciate.</li> -</ul> - -<h4>…unless it's a checkbox setting</h4> -<p>There's one important exception to the using secondary text for status: checkbox settings. -Here, use secondary text for description, not status. Status below a checkbox is unnecessary -because the checkbox already indicates it. The reason why it's appropriate to have a description -below a checkbox setting is because—unlike other controls—it doesn't display a dialog -or navigate to another screen where additional information can be provided.</p> - -<p>That said, if a checkbox setting's label is clear enough on its own, there's no need to also -provide a description. Only include one if necessary.</p> - -<p>Follow these guidelines to write checkbox setting descriptions:</p> -<ul> -<li>Keep it to one sentence and don't use ending punctuation.</li> -<li>Convey what happens when the setting is checked, phrased in the form of a command. Example: -"Allow data exchange", not "Allows data exchange".</li> -<li>Avoid repetition by choosing words that don't already appear in the label.</li> -<li>Don't refer to the user unless it's necessary for understanding the setting.</li> -<li>If you must refer to the user, do so in the second person ("you") rather than the first person -("I"). Android speaks to users, not on behalf of them.</li> -</ul> - -<h4>Writing examples</h4> - -<p>The following are examples of changes we made to labels and secondary text in the Settings app -in Ice Cream Sandwich.</p> - -<div class="cols"> - <div class="col-4"> - - <div class="do-dont-label bad emulate-content-left-padding">Before</div> - - <table class="ui-table bad emulate-content-left-padding"> - <thead> - <tr> - <th class="label"> - Use tactile feedback - </th> - </tr> - </thead> - </table> - - </div> - <div class="col-4"> - - <div class="do-dont-label good">After</div> - - <table class="ui-table good"> - <thead> - <tr> - <th class="label"> - Vibrate on touch - </th> - </tr> - </thead> - </table> - - </div> - <div class="col-5"> - -<p>In this checkbox setting, we eliminated the throwaway word "Use" and rephrased the label to be -more direct and understandable.</p> - - </div> - -</div> - -<div class="cols"> - <div class="col-4"> - - <div class="do-dont-label bad emulate-content-left-padding">Before</div> - - <table class="ui-table bad emulate-content-left-padding"> - <thead> - <tr> - <th class="label"> - Screen timeout - </th> - </tr> - </thead> - <tbody> - <tr> - <td class="secondary-text"> - Adjust the delay before the screen automatically turns off - </td> - </tr> - </tbody> - </table> - - </div> - <div class="col-4"> - - <div class="do-dont-label good">After</div> - - <table class="ui-table good"> - <thead> - <tr> - <th class="label"> - Sleep - </th> - </tr> - </thead> - <tbody> - <tr> - <td class="secondary-text"> - After 10 minutes of inactivity - </td> - </tr> - </tbody> - </table> - - </div> - <div class="col-5"> - -<p>In this multiple choice setting, we changed the label to a friendlier term and also replaced -the description with status. We put some descriptive words around the selected value, "10 -minutes", because on its own, the meaning could be misinterpreted as "sleep for 10 minutes".</p> - - </div> -</div> - -<div class="cols"> - <div class="col-4"> - - <div class="do-dont-label bad emulate-content-left-padding">Before</div> - - <table class="ui-table bad emulate-content-left-padding"> - <thead> - <tr> - <th class="label"> - Change screen lock - </th> - </tr> - </thead> - <tbody> - <tr> - <td class="secondary-text"> - Change or disable pattern, PIN, or password security - </td> - </tr> - </tbody> - </table> - - </div> - <div class="col-4"> - - <div class="do-dont-label good">After</div> - - <table class="ui-table good"> - <thead> - <tr> - <th class="label"> - Screen lock - </th> - </tr> - </thead> - <tbody> - <tr> - <td class="secondary-text"> - Pattern - </td> - </tr> - </tbody> - </table> - - </div> - <div class="col-5"> - -<p>This setting navigates to a a sequence of subscreens that allow users to choose a type of -screen lock and then set it up. We eliminated the throwaway word "Change" in the label, and -replaced the description with the current type of screen lock set up by the user. If the user -hasn't set up a screen lock, the secondary text says "None".</p> - - </div> -</div> - -<div class="cols"> - <div class="col-4"> - - <div class="do-dont-label bad emulate-content-left-padding">Before</div> - - <table class="ui-table bad emulate-content-left-padding"> - <thead> - <tr> - <th class="label"> - NFC - </th> - </tr> - </thead> - <tbody> - <tr> - <td class="secondary-text"> - Use Near Field Communication to read and exchange tags - </td> - </tr> - </tbody> - </table> - - </div> - <div class="col-4"> - - <div class="do-dont-label good">After</div> - - <table class="ui-table good"> - <thead> - <tr> - <th class="label"> - NFC - </th> - </tr> - </thead> - <tbody> - <tr> - <td class="secondary-text"> - Allow data exchange when the phone touches another device - </td> - </tr> - </tbody> - </table> - - </div> - <div class="col-5"> - -<p>In this checkbox setting—although it's technical jargon—we kept the "NFC" label -because: (1) we couldn't find a clear, concise alternative, and (2) user familiarity with the -acronym is expected to increase dramatically in the next couple of years.</p> -<p>We did, however, rewrite the description. It's far less technical than before and does a better -job of conveying how and why you'd use NFC. We didn't include what the acronym stands for because -it doesn't mean anything to most users and would have taken up a lot of space.</p> - - </div> -</div> - - - -<h2 id="checklist">Checklist</h2> -<ul> -<li><p>Make sure each item in Settings meets the criteria for belonging there.</p></li> -<li><p>If you have more than 7 items, explore ways to group related settings.</p></li> -<li><p>Use design patterns wherever applicable so users don't face a learning curve.</p></li> -<li><p>Choose defaults that are safe, neutral, and fit the majority of users.</p></li> -<li><p>Give each setting a clear, concise label and use secondary text appropriately.</p></li> -</ul> diff --git a/docs/html/design/style/branding.jd b/docs/html/design/style/branding.jd deleted file mode 100644 index 5995d03..0000000 --- a/docs/html/design/style/branding.jd +++ /dev/null @@ -1,128 +0,0 @@ -page.title=Your Branding -page.tags=branding,logo -@jd:body - -<p>Following Android design patterns doesn't mean that your app has to look the same as -everyone else's. In Android, your app can shine as an extension of your brand. </p> - -<h2 id="color">Color</h2> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/color.html#color-ui-color-application"> - <div> - <h3>Material Design</h3> - <p>UI Color Application<p> - </div> -</a> - -<p>Use your brand color for accent by overriding the Android framework's default blue in UI elements like checkboxes, progress bars, radio buttons, sliders, tabs, and scroll indicators.</p> - -<p>Look for opportunities to use high-contrast color for emphasis, for example, as the background color of the action bar or a primary button. But don't go overboard: not all actions are equal, so use it only for the one or two most important things.</p> -<p>When customizing colors, <a href="{@docRoot}design/style/touch-feedback.html">touch feedback</a> - should be subtle — just slightly lighter or darker than the untouched color.</p> - -<div class="vspace size-1"> </div> - -<div class="cols"> - <div class="col-6"> - <img src="{@docRoot}design/media/branding_wallet.png" style="width:94%"> - <div class="figure-caption"> - The four colors of the Google Wallet logo provide a playful accent to the four dots - that appear as the user enters a PIN. - </div> - </div> - <div class="col-6"> - <img src="{@docRoot}design/media/branding_googlemusic.png" style="width:94%"> - <div class="figure-caption"> - The Google Play Music app has an orange theme color, which is used for emphasis - in the action bar and for accent in the selected tab, scroll indicator, and - hyperlinks. - </div> - </div> -</div> - -<h2 id="logo">Logo</h2> - -<p>Your app's <a href="{@docRoot}design/style/iconography.html#launcher">launcher icon</a> is - a key place to incorporate your logo, because it's what - users will look for and touch to begin using your app. You can carry the launcher - icon through to all the screens in your app by showing it in the - <a href="{@docRoot}design/patterns/actionbar.html">action bar</a> along - with the name of the app.</p> - -<p>Another approach to consider is to have your logo take the place of the launcher icon -and app name in the action bar.</p> - - -<div class="vspace size-1"> </div> - -<div class="cols"> - <div class="col-6" style="padding-top:24px;"> - <img src="{@docRoot}design/media/branding_launcher_icon.png" style="width:60px;float:left;padding-right:1em;"> - <div class="figure-caption" style="width:290px;margin-left:20px;"> - Google+ reinforces its brand by carrying its launcher icon through to the action bar. - </div> - <img src="{@docRoot}design/media/branding_logo_icon_action_bar.png" style="width:320px;float:left;padding-right:1em;"> - </div> - <div class="col-6"> - <img src="{@docRoot}design/media/yourbranding_app.png" style="width:320px;"> - <div class="figure-caption" style="width:320px;"> - Example of a the logo in the action bar. This works well in cases where the brand's logo matches the name of the app. - </div> - </div> -</div> - -<h2 id="logo">Icons</h2> - -<a class="notice-designers-material" href="http://www.google.com/design/spec/style/icons.html"> - <div> - <h3>Material Design</h3> - <p>Icons<p> - </div> -</a> - -<p>If you have icons that you're already using for your app on other platforms -and they have a distinctive look intended to fit your brand, use them on your -Android app as well. <strong>If you take this approach, make sure your brand styling is -applied to every single icon in your app.</strong></p> - - -<div class="cols"> - <div class="col-6"> - <p>One exception: For any icon in your existing set where the symbol is different from - Android's, use Android's symbol but give it your brand's styling. That way, users will - understand what the purpose of the icon is based on what they've learned in other - Android apps (Design principle: - <a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that - work everywhere</a>). But the icon will still look like it belongs with all of - your other icons as a part of your brand.</p> - - </div> - - <div class="col-6"> - <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;"> - </div> - </div> -</div> - -<div class="cols"> - <div class="col-6"> - <p><strong>Example</strong>:<br /> - </p> - <p>The brand's normal icon for sharing on other platforms is a right arrow. - </div> - - <div class="col-6 lasyout-with-list-item-margins"> - - <div style="margin-bottom:1em;"> - <span class="do-dont-label bad" style="margin-left:12px">Don't</span> - <span style="margin-left: 64px;" class="do-dont-label good"><strong>Do</strong></span> - </div> - <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:180px;"> - </div> -</div> - -<p>What if you don't already have your own icons — for example, if you're creating a -brand new app only for Android? In this case, use Android's standard icons and rely -more on color and logo for branding. Get the Action Bar Icon Pack, available for free -in <a href="{@docRoot}design/downloads/index.html">Downloads</a>.</p> diff --git a/docs/html/design/style/color.jd b/docs/html/design/style/color.jd deleted file mode 100644 index 4c5f5ab..0000000 --- a/docs/html/design/style/color.jd +++ /dev/null @@ -1,141 +0,0 @@ -page.title=Color -@jd:body - -<style> - .color-row { - width: 760px; - margin:0; - - display: -webkit-box; - display: -moz-box; - display: box; - - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - - cursor: pointer; - - -webkit-user-select: none; - user-select: none; - /* nested user-select in FF is broken as of Jan 2012, don't use it */ - } - - .color-row-container { - line-height: 0; /* to remove more top space in FF for -moz-box elements */ - } - - .color-row-container + .color-row-container { - margin-top: -10px !important; - } - - .color-row li { - margin-left: 0 !important; - position: relative; - list-style-type: none; - height: 80px; - display: block; - - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-flex: 1; - } - - .color-row li:before { - display: none; - } - - .color-row li.thin { - height: 40px; - } - - .color-row li span { - display: none; - position: absolute; - top: -30px; - left: 50%; - margin-left: -2.5em; - width: 5em; - background-color: #fff; - padding: 10px; - font-weight: 600; - line-height: 20px; - text-align: center; - box-shadow: 0 5px 5px rgba(0,0,0,0.1); - cursor: text; - - -webkit-user-select: text; - user-select: text; - /* nested user-select in FF is broken as of Jan 2012, don't use it */ - } - - .color-row li:hover span { - display: block; - } - - /* triangle callout */ - .color-row li span:after { - content: ''; - display: block; - position: absolute; - left: 50%; - bottom: -16px; - border: 8px solid transparent; - border-top-color: #fff; - width: 0; - height: 0; - margin-left: -8px; - } -</style> - -<a class="notice-designers-material" href="http://www.google.com/design/spec/style/color.html"> - <div> - <h3>Material Design</h3> - <p>Color<p> - </div> -</a> - -<p>Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast -between visual components. Note that red and green may be indistinguishable to color-blind users.</p> - - <div class="color-row-container"> - <ul class="color-row"> - <li><span>#33b5e5</span></li> - <li><span>#aa66cc</span></li> - <li><span>#99cc00</span></li> - <li><span>#ffbb33</span></li> - <li><span>#ff4444</span></li> - </ul> - </div> - - <div class="color-row-container"> - <ul class="color-row"> - <li class="thin"><span>#0099cc</span></li> - <li class="thin"><span>#9933cc</span></li> - <li class="thin"><span>#669900</span></li> - <li class="thin"><span>#ff8800</span></li> - <li class="thin"><span>#cc0000</span></li> - </ul> - </div> - -<h2 id="palette">Palette</h2> - -<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker -shade that can be used as a complement when needed.</p> -<p><a onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches (@color page)');" - href="{@docRoot}downloads/design/Android_Design_Color_Swatches_20120229.zip">Download the swatches</a></p> - -<img src="{@docRoot}design/media/color_spectrum.png"> - -<script> - $(document).ready(function() { - $('.color-row li').each(function() { - var color = $(this).text(); - $(this).css('background-color', color); - $(this).find('span') - .css('color', color) - .text(color.toUpperCase()); - }); - - }); -</script> diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd deleted file mode 100644 index 8b6f3ab..0000000 --- a/docs/html/design/style/iconography.jd +++ /dev/null @@ -1,601 +0,0 @@ -page.title=Iconography -page.tags="icons" -meta.tags="icons, googleplay, listing, branding" -page.titleFriendly=Guidelines for creating your app's icons -@jd:body - -<img src="{@docRoot}design/media/iconography_overview.png"> - - -<p>An icon is a graphic that takes up a small portion of screen real estate and provides a quick, -intuitive representation of an action, a status, or an app.</p> - -<p>When you design icons for your app, it's important to keep in mind that your -app may be installed on a variety of devices that offer a range of -pixel densities, as mentioned in -<a href="{@docRoot}design/style/devices-displays.html">Devices -and Displays</a>. But you can make your icons look great on all devices -by providing each icon in multiple sizes. When your app runs, Android checks the characteristics of -the device screen and loads the appropriate density-specific assets for your app. </p> - -<p>Because you will deliver each icon in multiple sizes to support different densities, -the design guidelines below -refer to the icon dimensions in <acronym title="density-independent pixels">dp</acronym> -units, which are based on the pixel dimensions of a medium-density (MDPI) screen.</p> - -<img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" /> - -<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6:8 -scaling ratio</strong> between the five primary densities (medium, high, x-high, xx-high, and -xxx-high respectively). For example, consider that the size for a launcher icon is specified to be -48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the -high-density(HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high -density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.</p> - -<p class="note"><strong>Note:</strong> Android also supports low-density (LDPI) screens, -but you normally don't need to create custom assets at this size because Android -effectively down-scales your HDPI assets by 1/2 to match the expected size.</p> - - - - -<h2 id="launcher">Launcher</h2> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/icons.html#icons-product-icons"> - <div> - <h3>Material Design</h3> - <p>Product Icons<p> - </div> -</a> - -<p>The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the -user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on -any type of background.</p> - -<div class="cols"> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_launcher_size.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_launcher_focal.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_launcher_style.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-4"> - - <h4>Sizes & scale</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Launcher icons on a mobile device must be <strong>48x48 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> - <li class="no-bullet with-icon web"> - <p>Launcher icons for display on Google Play must be <strong>512x512 pixels</strong>.</p></li> - </ul> - - </div> - <div class="col-4"> - - <h4>Proportions</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Full asset, <strong>48x48 dp</strong></p> - </li> - </ul> - - </div> - <div class="col-4"> - -<h4>Style</h4> -<p>Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed -from above, so that users perceive some depth.</p> - - </div> -</div> - - -<div class="cols"> - <div class="col-4"> - - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/iconography_launcher_example.png"> - - </div> - <!-- 2 free columns --> -</div> - -<div class="cols"> - <div class="col-12"> - - <img src="{@docRoot}design/media/iconography_launcher_example2.png"> - - <div class="vspace size-2"> </div> - - </div> - <!-- 1 free columns --> -</div> - - -<h2 id="action-bar">Action Bar</h2> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/icons.html#icons-system-icons"> - <div> - <h3>Material Design</h3> - <p>System Icons<p> - </div> -</a> - -<p> - -Action bar icons are graphic buttons that represent the most important actions people can take -within your app. Each one should employ a simple metaphor representing a single concept that most -people can grasp at a glance. - -</p> -<p> - -Pre-defined glyphs should be used for certain common actions such as "refresh" and "share." The -download link below provides a package with icons that are scaled for various screen densities and -are suitable for use with the Holo Light and Holo Dark themes. The package also includes unstyled -icons that you can modify to match your theme, in addition to Adobe® Illustrator® source -files for further customization. - -</p> -<p> -<a onClick="ga('send', 'event', 'Design', 'Download', 'Action Bar Icons (@iconography page)');" - href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a> -</p> - -<div class="cols"> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_size.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_focal.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_style.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-4"> - - <h4>Sizes & scale</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Action bar icons for phones should be <strong>32x32 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> - </ul> - - </div> - <div class="col-4"> - - <h4>Focal area & proportions</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Full asset, <strong>32x32 dp</strong></p> - <p>Optical square, <strong>24x24 dp</strong></p> - </li> - </ul> - - </div> - <div class="col-4"> - -<h4>Style</h4> -<p>Pictographic, flat, not too detailed, with smooth curves or sharp shapes. If the graphic is thin, -rotate it 45° left or right to fill the focal space. The thickness of the strokes and negative -spaces should be a minimum of 2 dp.</p> - - </div> -</div> - - -<div class="cols"> - <div class="col-3"> - -<h4>Colors</h4> -<p>Colors: <strong>#333333</strong><br /> -Enabled: <strong>60%</strong> opacity<br /> -Disabled: <strong>30%</strong> opacity</p> -<div class="vspace size-1"> </div> - -<p>Colors: <strong>#FFFFFF</strong><br /> -Enabled: <strong>80%</strong> opacity<br /> -Disabled: <strong>30%</strong> opacity</p> - - </div> - <div class="col-9"> - - <img src="{@docRoot}design/media/iconography_actionbar_colors.png"> - - </div> -</div> - - -<h2 id="small-contextual">Small / Contextual Icons</h2> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/icons.html#icons-system-icons"> - <div> - <h3>Material Design</h3> - <p>System Icons<p> - </div> -</a> - -<p>Within the body of your app, use small icons to surface actions and/or provide status for specific -items. For example, in the Gmail app, each message has a star icon that marks the message as -important.</p> - - -<div class="cols"> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_small_size.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_small_focal.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_small_style.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-4"> - - <h4>Sizes & scale</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Small icons should be <strong>16x16 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> - </ul> - - </div> - <div class="col-4"> - - <h4>Focal area & proportions</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Full asset, <strong>16x16 dp</strong></p> - <p>Optical square, <strong>12x12 dp</strong></p> - </li> - </ul> - - </div> - <div class="col-4"> - -<h4>Style</h4> -<p>Neutral, flat, and simple. Filled shapes are easier to see than thin strokes. Use a single visual -metaphor so that a user can easily recognize and understand its purpose.</p> - - </div> -</div> - - -<div class="cols"> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_small_colors.png"> - - <div class="vspace size-2"> </div> - -<h4>Colors</h4> -<p>Use non-neutral colors sparingly and with purpose. For example, Gmail uses yellow in the star icon -to indicate a bookmarked message. If an icon is actionable, choose a color that contrasts well with -the background.</p> - - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/iconography_small_example.png"> - - </div> - <!-- 2 free columns --> -</div> - - -<h2 id="notification">Notification Icons</h2> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/icons.html#icons-system-icons"> - <div> - <h3>Material Design</h3> - <p>System Icons<p> - </div> -</a> - - -<p>If your app generates notifications, provide an icon that the system can display in the status bar -whenever a new notification is available.</p> - - -<div class="cols"> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_notification_size.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_notification_focal.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_notification_style.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-4"> - - <h4>Sizes & scale</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Notification icons must be <strong>24x24 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> - </ul> - - </div> - <div class="col-4"> - - <h4>Focal area & proportions</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Full asset, <strong>24x24 dp</strong></p> - <p>Optical square, <strong>22x22 dp</strong></p> - </li> - </ul> - - </div> - <div class="col-4"> - -<h4>Style</h4> -<p>Keep the style flat and simple, using the same single, visual metaphor as your launcher icon.</p> - - </div> -</div> - - -<div class="cols"> - <div class="col-4"> - -<h4>Colors</h4> -<p>Notification icons must be entirely white. Also, the system may scale down and/or darken the icons.</p> - - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/iconography_notification_example.png"> - - </div> - <!-- 2 free columns --> -</div> - - - - - - - - - - -<h2 id="DesignTips">Design Tips</h2> - -<p>Here are some tips you might find useful as you create icons or other -drawable assets for your application. These tips assume you are using -Adobe® Photoshop® or a similar raster and vector image-editing program.</p> - - - - -<h3>Use vector shapes where possible</h3> - -<p>Many image-editing programs such as Adobe® Photoshop® allow you to use a -combination of vector shapes and raster layers and effects. When possible, -use vector shapes so that if the need arises, assets can be scaled up without -loss of detail and edge crispness.</p> - -<p>Using vectors also makes it easy to align edges and corners to pixel -boundaries at smaller resolutions.</li> - - - -<h3>Start with large artboards</h3> - -<p>Because you will need to create assets for different screen densities, -it is best to start your icon -designs on large artboards with dimensions that are multiples of the target icon -sizes. For example, launcher icons are 48, 72, 96, or 144 pixels wide, -depending on screen density (mdpi, hdpi, xhdpi, and xxhdpi, respectively). If you -initially draw launcher icons on an 864x864 artboard, it will be easier and -cleaner to adjust the icons when you scale the artboard down to the target -sizes for final asset creation.</p> - - - -<h3>When scaling, redraw bitmap layers as needed</h3> - -<p>If you scaled an image up from a bitmap layer, rather than from a vector -layer, those layers will need to be redrawn manually to appear crisp at higher -densities. For example if a 60x60 circle was painted as a bitmap for -mdpi it will need to be repainted as a 90x90 circle for hdpi.</p> - - - -<h3>Use common naming conventions for icon assets</h3> - -<p>Try to name files so that related assets will group together inside a -directory when they are sorted alphabetically. In particular, it helps to use a -common prefix for each icon type. For example:</p> - -<table> -<tr> -<th>Asset Type</th> -<th>Prefix</th> -<th>Example</th> -</tr> -<tr> -<td>Icons</td> -<td><code>ic_</code></td> -<td><code>ic_star.png</code></td> -</tr> -<tr> -<td>Launcher icons</td> -<td><code>ic_launcher</code></td> -<td><code>ic_launcher_calendar.png</code></td> -</tr> -<tr> -<td>Menu icons and Action Bar icons</td> -<td><code>ic_menu</code></td> -<td><code>ic_menu_archive.png</code></td> -</tr> -<tr> -<td>Status bar icons</td> -<td><code>ic_stat_notify</code></td> -<td><code>ic_stat_notify_msg.png</code></td> -</tr> -<tr> -<td>Tab icons</td> -<td><code>ic_tab</code></td> -<td><code>ic_tab_recent.png</code></td> -</tr> -<tr> -<td>Dialog icons</td> -<td><code>ic_dialog</code></td> -<td><code>ic_dialog_info.png</code></td> -</tr> -</table> - -<p>Note that you are not required to use a shared prefix of any -type—doing so is for your convenience only.</p> - - -<h3>Set up a working space that organizes files by density</h3> - -<p>Supporting multiple screen densities means you must create multiple versions -of the same icon. To help keep the multiple copies of files safe and easier to -find, we recommend creating a directory structure in your working space that -organizes asset files based on the target density. For example:</p> - -<pre> -art/... - mdpi/... - _pre_production/... - <em>working_file</em>.psd - <em>finished_asset</em>.png - hdpi/... - _pre_production/... - <em>working_file</em>.psd - <em>finished_asset</em>.png - xhdpi/... - _pre_production/... - <em>working_file</em>.psd - <em>finished_asset</em>.png - xxhdpi/... - _pre_production/... - <em>working_file</em>.psd - <em>finished_asset</em>.png -</pre> - -<p>Because the structure in your working space is similar to that of the application, you -can quickly determine which assets should be copied to each -resources directory. Separating assets by density also helps you detect any -variances in filenames across densities, which is important because -corresponding assets for different densities must share the same filename.</p> - -<p>For comparison, here's the resources directory structure of a typical -application: </p> - -<pre>res/... - drawable-ldpi/... - <em>finished_asset</em>.png - drawable-mdpi/... - <em>finished_asset</em>.png - drawable-hdpi/... - <em>finished_asset</em>.png - drawable-xhdpi/... - <em>finished_asset</em>.png - drawable-xxhdpi/... - <em>finished_asset</em>.png - - mipmap-ldpi/... - <em>finished_launcher_asset</em>.png - mipmap-mdpi/... - <em>finished_launcher_asset</em>.png - mipmap-hdpi/... - <em>finished_launcher_asset</em>.png - mipmap-xhdpi/... - <em>finished_launcher_asset</em>.png - mipmap-xxhdpi/... - <em>finished_launcher_asset</em>.png - mipmap-xxxhdpi/... - <em>finished_launcher_asset</em>.png -</pre> - -<p>For more information about how to save resources in the application project, -see <a href="{@docRoot}guide/topics/resources/providing-resources.html">Providing Resources</a>. -</p> - -<p> For more information about using the mipmap folders, see -<a href="{@docRoot}tools/projects/index.html#mipmap">Managing Projects Overview</a>.</p> - -<h3 id="xxxhdpi-launcher">Provide an xxx-high-density launcher icon</h3> - -<p>Some devices scale-up the launcher icon by as much as 25%. For example, if your highest density -launcher icon image is already extra-extra-high density, the scaling process will make it appear -less crisp. So you should provide a higher density launcher icon in the <code>mipmap-xxxhdpi -</code> directory, which the system uses instead of scaling up a smaller version of the icon.</p> - -<p class="note"><strong>Note:</strong> The <code>mipmap-xxxhdpi</code> qualifier is necessary -only to provide a launcher icon that can appear larger than usual on an xxhdpi device. It is best -practice to place all your launcher icons in the <code>res/mipmap-[density]/</code> folders. This -enables your app to display launcher icons that have a higher density than the device, without -scaling up a lower density version of the icon. You do not need to provide xxxhdpi assets for all -your app's images.</p> - -<p>See <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple Screens</a> for -more information.</p> - - -<h3>Remove unnecessary metadata from final assets</h3> - -<p>Although the Android SDK tools will automatically compress PNGs when packaging -application resources into the application binary, a good practice is to remove -unnecessary headers and metadata from your PNG assets. Tools such as <a -href="http://optipng.sourceforge.net/">OptiPNG</a> or <a -href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a> can ensure that this -metadata is removed and that your image asset file sizes are optimized.</p> - - diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd deleted file mode 100644 index 97915b8..0000000 --- a/docs/html/design/style/metrics-grids.jd +++ /dev/null @@ -1,90 +0,0 @@ -page.title=Metrics and Grids -page.metaDescription=Optimize your app's UI by designing layouts based on density-independent grids. -page.tags="layout","screens" -meta.tags="multiple screens, layout, tablets" -page.image=/design/media/metrics_closeup.png -@jd:body - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/layout/metrics-keylines.html"> - <div> - <h3>Material Design</h3> - <p>Metrics and Keylines<p> - </div> -</a> - - -<p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per -inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as -falling into a particular size bucket and density bucket:</p> -<ul> - <li>The size buckets are <em>handset</em> (smaller than -600<acronym title="Density-independent pixels: One dp is one pixel on a 160 dpi (mdpi) -screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp).</li> - <li>The density buckets are <acronym -title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160 -dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, <acronym title -="Extra-high density (320 dpi)">XHDPI</acronym>, <acronym title -="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>, and <acronym title -="Extra-extra-extra!-high density (640 dpi)">XXXHDPI</acronym>.</li> -</ul> - -<p>Optimize your application's UI by designing -alternative layouts for some of the different size buckets, and provide alternative bitmap images -for different density buckets.</p> - -<p>Because it's important that you design and implement your layouts for multiple densities, -the guidelines below and throught the documentation -refer to layout dimensions with <acronym title="Density-independent pixels: One dp is one pixel -on a 160 dpi (mdpi) screen.">dp</acronym> measurements instead of pixels.</p> - - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/metrics_diagram.png"> - - </div> - <div class="col-5"> - -<h4>Space considerations</h4> -<p>Devices vary in the amount of density-independent pixels (dp) they can display.</p> -<p>To see more, visit the -<a href="http://developer.android.com/resources/dashboard/screens.html" target="_blank"> -Screen Sizes and Densities Device Dashboard</a>.</p> - - </div> -</div> - - -<h2 id="48dp-rhythm">48dp Rhythm</h2> - -<p>Touchable UI components are generally laid out along 48dp units.</p> - -<img src="{@docRoot}design/media/metrics_48.png"> - -<div class="vspace size-2"> </div> - -<h4>Why 48dp?</h4> -<p>On average, 48dp translate to a physical size of about 9mm (with some variability). This is -comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users -will be able to reliably and accurately target them with their fingers.</p> -<p>If you design your elements to be at least 48dp high and wide you can guarantee that:</p> -<ul> -<li>your targets will never be smaller than the minimum recommended target size of 7mm regardless of - what screen they are displayed on.</li> -<li>you strike a good compromise between overall information density on the one hand, and - targetability of UI elements on the other.</li> -</ul> - -<img src="{@docRoot}design/media/metrics_closeup.png"> - -<div class="vspace size-2"> </div> - -<h4>Mind the gaps</h4> -<p>Spacing between each UI element is 8dp.</p> - -<h2 id="examples">Examples</h2> - -<img src="{@docRoot}design/media/metrics_forms.png"> diff --git a/docs/html/design/style/themes.jd b/docs/html/design/style/themes.jd deleted file mode 100644 index 6c8169b..0000000 --- a/docs/html/design/style/themes.jd +++ /dev/null @@ -1,53 +0,0 @@ -page.title=Themes -@jd:body - -<div class="cols"> - <div class="col-5"> - - <img src="{@docRoot}design/media/themes_holo_light.png"> - <div class="figure-caption"> - Gmail in Holo Light. - </div> - - <img src="{@docRoot}design/media/themes_holo_dark.png"> - <div class="figure-caption"> - Settings in Holo Dark. - </div> - - </div> - <div class="col-7"> - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/color.html#color-themes"> - <div> - <h3>Material Design</h3> - <p>Color Themes<p> - </div> -</a> - - -<p>Themes are Android's mechanism for applying a consistent style to an app or activity. -The style specifies the visual properties of the elements that make up your user interface, -such as color, height, padding and font size. To promote greater cohesion between all apps -on the platform, Android provides two system themes that you can choose from when building apps:</p> -<ul> -<li>Holo Light</li> -<li>Holo Dark</li> -</ul> -<p>Applying these themes will go a long way in helping you to build apps that fit right into the -general visual language of Android.</p> -<p>Pick the system theme that best matches the needs and design aesthetics for your app. If your -desire is to have a more distinct look for your app, using one of the system themes as a starting -point for your customizations is a good idea. The system themes provide a solid foundation on top -of which you can selectively implement your own visual stylings.</p> - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to apply themes such as Holo Light and Dark, and - how to build your own themes, see the - <a href="{@docRoot}guide/topics/ui/themes.html">Styles and Themes</a> API guide.</p> -</div> - - </div> -</div> diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd deleted file mode 100644 index e1fac2f..0000000 --- a/docs/html/design/style/touch-feedback.jd +++ /dev/null @@ -1,95 +0,0 @@ -page.title=Touch Feedback -page.tags=input,button -@jd:body - -<div class="cols" style="margin-bottom: -100px"> -<div class="col-7"> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/animation/responsive-interaction.html"> - <div> - <h3>Material Design</h3> - <p>Responsive Interaction<p> - </div> -</a> - - -<p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors -of gestures, and indicate what actions are enabled and disabled.</p> - -<p><strong>Be responsive to touches in a gentle way</strong>. Whenever a user touches an -actionable area in your app, let them know the app is "listening" by providing a visual -response. Make it subtle —just slightly lighter or darker than the untouched color. This -provides two benefits:</p> - -<ul> -<li><a href="{@docRoot}design/get-started/principles.html#sprinkle-encouragement">Sprinkles -of encouragement</a> are more pleasant than jolts.</li> -<li>Incorporating <a href="{@docRoot}design/style/branding.html">your branding</a> is much -easier because the default touch feedback works with whatever hue you choose.</li> -</ul> - -</div> - -<div class="col-6" style="float:right;"> - <video class="play-on-hover" width="268" height="442" autoplay style="border:1px solid #ddd;background-color:#f9f9f9;" poster=""> - <source src="{@docRoot}design/media/touch_feedback.mp4" type="video/mp4"> - <source src="{@docRoot}design/media/touch_feedback.webm" type="video/webm"> - <source src="{@docRoot}design/media/touch_feedback.ogv" type="video/ogg"> - </video> - <div class="figure-caption"> - <div style="color:#a3a3a3;margin-left:130px;"><em>Click image to replay...</em></div> - </div> -</div> - -<h4 style="clear:both;">States</h4> - - -<div class="vspace size-1"> </div> - -<img src="{@docRoot}design/media/touch_feedback_states.png"> -<div class="figure-caption"> - Most of Android's UI elements have touch feedback built in, including - states that indicate whether touching the element will have any effect. -</div> - -<div class="vspace size-3"> </div> - -<div class="cols"> - <div class="col-6"> - - <h4>Communication</h4> -<p>When your objects react to more complex gestures, help users -understand what the outcome will be.</p> - -<p>In Recents, when a user starts swiping a thumbnail left or right, it -begins to dim. This helps the user understand that swiping will cause the -item to be removed.</p> - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/touch_feedback_manipulation.png"> - - </div> -</div> -<div class="vspace size-3"> </div> - -<div class="cols"> - <div class="col-6"> - - <img src="{@docRoot}design/media/touch_feedback_communication.png"> - <p><em>If a user attempts to scroll past the last home screen panel, the screen - content tilts to the right to indicate that further navigation in this direction - isn’t possible.</em></p> - - </div> - <div class="col-6"> - -<h4>Boundaries</h4> -<p> - When users try to scroll past the beginning or end of a scrollable area, - communicate the boundary with a visual cue. Many of Android's scrollable UI - widgets, like lists and grid lists, have support for boundary feedback built - in. If you’re building custom widgets, keep boundary feedback in mind and - provide it from within your app. -</p> diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd deleted file mode 100644 index af76c40..0000000 --- a/docs/html/design/style/typography.jd +++ /dev/null @@ -1,78 +0,0 @@ -page.title=Typography -page.tags="textview","font" -page.metaDescription=How to use typography in your Android apps. -@jd:body - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/typography_main.png"> - - </div> - -<a class="notice-designers-material" - style="width: 278px;" - href="http://www.google.com/design/spec/style/typography.html"> - <div> - <h3>Material Design</h3> - <p>Typography<p> - </div> -</a> - -<div class="col-5"> - -<p> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');" - href="{@docRoot}downloads/design/roboto-1.2.zip">Download Roboto</a> -</p> - -<p>The Android design language relies on traditional typographic tools such as scale, space, rhythm, -and alignment with an underlying grid. Successful deployment of these tools is essential to help -users quickly understand a screen of information. To support such use of typography, Ice Cream -Sandwich introduced a new type family named -<a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto</a>, created -specifically for the requirements of UI and high-resolution screens.</p> - -<p>The current {@link android.widget.TextView} framework offers Roboto in thin, light, regular and bold -weights, along with an italic style for each weight. The framework also offers the -<a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed</a> -variant in regular and bold weights, along with an italic style for each weight.</p> - - <img src="{@docRoot}design/media/typography_variants@2x.png" width="220"> - -<p><a onClick="ga('send', 'event', 'Design', 'Download', 'Roboto Specimen Book (@typography page)');" - href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a></p> - - </div> -</div> - -<hr> - -<div class="cols"> - <div class="col-6"> - -<h4>Default type colors</h4> -<p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and -<code>textColorSecondary</code>. For light themes use <code>textColorPrimaryInverse</code> and -<code>textColorSecondaryInverse</code>. The framework text color styles also support variants for -touch feedback states when used inside UI elements.</p> - - <img src="{@docRoot}design/media/typography_defaults.png"> - - </div> - <div class="col-6"> - -<h4>Typographic Scale</h4> -<p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too -many different sizes in the same UI can be messy. The Android framework uses the following limited -set of type sizes:</p> - -<img src="{@docRoot}design/media/typography_sizes.png"> - -<p>Users can select a system-wide scaling factor for text in the Settings app. In order to support -these accessibility features, type should be specified in scale-independent pixels -(<acronym title="Scale-independent pixels. One sp is one pixel on a 160 dpi screen if the user's global text scale is set to 100%.">sp</acronym>) -wherever possible. Layouts supporting scalable types should be tested against these settings.</p> - - </div> -</div> diff --git a/docs/html/design/style/writing.jd b/docs/html/design/style/writing.jd deleted file mode 100644 index 0c62a55..0000000 --- a/docs/html/design/style/writing.jd +++ /dev/null @@ -1,322 +0,0 @@ -page.title=Writing Style -page.tags=dialog,toast,notification -@jd:body - -<h2 id="voa">Android's Voice</h2> - -<p>When writing text that appears in your app, keep it concise, simple, and friendly.</p> - -<h4 id="concise">Concise</h4> - -<ul> - <li>Describe only what the user needs to know.</li> - <li>Eliminate redundancy, such as titles that restate the body of an information box.</li> - <li>Keep text as short as possible.</li> -</ul> - -<p><em>Avoid wordy, stilted text</em></p> - -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - - <div class="do-dont-label bad">Don't</div> - - <table class="ui-table good"><tbody><tr><td> - Consult the documentation that came with your phone for further instructions. - </td></tr></tbody></table> - - </div> - <div class="col-6"> - - <div class="do-dont-label good">Do</div> - - <table class="ui-table good"><tbody><tr><td> - Read the instructions that came with your phone. - </td></tr></tbody></table> - - </div> -</div> - -<p><em>Don't provide unnecessary information</em></p> - -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - - <div class="do-dont-label bad">From a Setup Wizard screen</div> - - <table class="ui-table bad"> - <thead> - <tr> - <th> - Signing in... - </th> - </tr> - </thead> - <tbody> - <tr> - <td> - Your phone needs to communicate with<br> - Google servers to sign in to your account.<br> - This may take up to five minutes. - </td> - </tr> - </tbody> - </table> - - </div> - <div class="col-6"> - - <div class="do-dont-label good">From a Setup Wizard screen</div> - - <table class="ui-table good"> - <thead> - <tr> - <th> - Signing in... - </th> - </tr> - </thead> - <tbody> - <tr> - <td> - Your phone is contacting Google.<br> - This can take up to 5 minutes. - </td> - </tr> - </tbody> - </table> - - </div> -</div> - -<h4 id="simple">Simple</h4> - -<ul> - <li>Use short words, active verbs, and common nouns.</li> - <li>Put the most important thing first. “Front-load” the first 11 characters - with the most salient information in the string.</li> - <li>Don’t try to explain subtle differences. They are lost on most users.</li> -</ul> - -<p><em>Focus on the user's concern, not technical details</em></p> - -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - - <div class="do-dont-label bad">Don't</div> - - <table class="ui-table good"><tbody><tr><td> - Manually control GPS to prevent other apps from using it - </td></tr></tbody></table> - - </div> - <div class="col-6"> - - <div class="do-dont-label good">Do</div> - - <table class="ui-table good"><tbody><tr><td> - To save power, switch Location mode to Battery saving - </td></tr></tbody></table> - - </div> -</div> - -<p><em>Put top news first</em></p> - -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - - <div class="do-dont-label bad">Don't</div> - - <table class="ui-table good"><tbody><tr><td> - 77 other people +1’d this, including Larry Page - </td></tr></tbody></table> - - </div> - <div class="col-6"> - - <div class="do-dont-label good">Do</div> - - <table class="ui-table good"><tbody><tr><td> - Larry Page and 76 others +1’d this - </td></tr></tbody></table> - - </div> -</div> - -<p><em>Put the user's goal first</em></p> - -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - - <div class="do-dont-label bad">Don't</div> - - <table class="ui-table good"><tbody><tr><td> - Touch Next to complete setup using a Wi-Fi connection - </td></tr></tbody></table> - - </div> - <div class="col-6"> - - <div class="do-dont-label good">Do</div> - - <table class="ui-table good"><tbody><tr><td> - To finish setup using Wi-Fi, touch Next - </td></tr></tbody></table> - - </div> -</div> - - -<h4 id="friendly">Friendly</h4> - -<ul> - <li>Use contractions.</li> - <li>Talk directly to the reader. Use “you” to refer to the reader.</li> - <li>Keep your tone casual and conversational, but avoid slang.</li> -</li> -</ul> - -<p><em>Avoid being confusing or annoying</em></p> -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - <div class="do-dont-label bad">Don't</div> - <table class="ui-table bad"> - <thead> - <tr> - <th> - Sorry! - </th> - </tr> - </thead> - <tbody> - <tr> - <td> - Activity MyAppActivity (in application<br /> - MyApp) is not responding - </td> - </tr> - </tbody> - </table> - - </div> - <div class="col-6"> - <div class="do-dont-label good">Do</div> - <table class="ui-table good"> - <thead> - <tr> - <th> - MyApp isn’t responding - </th> - </tr> - </thead> - <tbody> - <tr> - <td> - Do you want to close it? - </td> - </tr> - </tbody> - </table> - </div> -</div> - - -<h4>Words to avoid</h4> - -<div style="padding:5px 2.1em;"> -<table> - <tr> - <td class="do-dont-label bad" style="width:40%">Don't use</td> - <td class="do-dont-label good" style="width:40%">Use</td> - </tr> - <tr> - <td>one, two, three, four, ...</td> - <td>1, 2, 3, 4, ...</td> - </tr> - <tr> - <td>application</td> - <td>app</td> - </tr> - <tr> - <td>cannot, could not, do not, did not -will not, you will</td> - <td><em>Contractions:</em> can’t, couldn’t, don’t, didn’t won’t, you’ll, and so on</td> - </tr> - <tr> - <td>okay, ok</td> - <td>OK</td> - </tr> - <tr> - <td>please, sorry, thank you</td> - <td><em>Attempts at politeness can annoy the user, especially in messages that say - something has gone wrong.<br /> - Exception: In Japanese, “please” is mandatory and imperative verbs should - be localized accordingly (turn on -> please turn on). - </em></td> - </tr> - <tr> - <td>there is, there are, it is<br /> - <em>and other “disappeared” subjects (grammatical expletives)</em></td> - <td><em>Use a noun as the subject</em></td> - </tr> - <tr> - <td>abort, kill, terminate</td> - <td>stop, cancel, end, exit</td> - </tr> - <tr> - <td>fail, failed, <em>negative language</em></td> - <td><em>In general, use positive phrasing<br /> - (for example, “do” rather than “don’t,” except in cases such as “Don’t show - again,” “Can’t connect,” and so on.)</em></td> - </tr> - <tr> - <td>me, I, my, mine</td> - <td>you, your, yours</td> - </tr> - <tr> - <td>Are you sure? Warning!</td> - <td><em>Tell user the consequence instead, for example, “You’ll lose all photos - and media”</em></td> - </tr> -</table> - -</div> - -<h2 id="formatting_text">Formatting text</h2> - -<h4 id="capitalization">Capitalization</h4> - -<ul> - <li>Use sentence-style capitalization for all UI strings: “Words to live by.”</li> - <li>Capitalize all important words in: - <ul> - <li>App names (Calendar, Google Drive)</li> - <li>Named features (Android Beam, Face Unlock)</li> - <li>Proper nouns (Statue of Liberty, San Francisco Giants)</li> - </ul> - </li> - <li>Be conservative. Don't capitalize words that aren't part of a formal feature name: - <ul> - <li>Sim card lock, Home screen, not Sim Card Lock, Home Screen.</li> - </ul> - </li> -</ul> - - -<h4 id="punctuation">Punctuation</h4> -<ul> - <li><strong>Period.</strong> Don't use a period after a single sentence or - phrase used in isolation, such as in a toast, label, or notification. Wherever two or - more sentences run together, use a period for each sentence. </li> - <li><strong>Ellipsis.</strong> Use the ellipsis character (…) (Option-; on MacOS and &hellip; - in HTML) to indicate - <ul> - <li>Incompleteness, such as an action in progress (“Downloading...”) or truncated text.</li> - <li>That a menu item (such as Print… or Share…) leads to further UI involving significant - choices. Exception: Commands whose wording already implies further (but limited) UI, such - as <strong>Find in page</strong> or <strong>Pick a date</strong>, do not require an - ellipsis. </li> - </ul> - </li> -</ul> diff --git a/docs/html/design/videos/index.jd b/docs/html/design/videos/index.jd deleted file mode 100644 index 3845b44..0000000 --- a/docs/html/design/videos/index.jd +++ /dev/null @@ -1,130 +0,0 @@ -page.title=Videos -@jd:body - -<p>The Android Design Team presents design-oriented sessions at Google I/O every year. Visit these pages to view the videos and presentations from the conferences.</p> - -<img src="{@docRoot}images/home/io-logo-2013-alt.png"> - -<div class="vspace size-2"> </div> - -<div class="cols"> - <div class="col-7"> - <h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326368573">Enchant, Simplify, Amaze: Android's Design Principles</a></h3> - <p>Want to enchant people, simplify their lives, and make them feel amazing with your app? Learn how Android's Design Principles can help you create products that resonate with people. Find out about the meaning and research behind the principles. See real-world examples and practices from the Android Design team. Discover techniques for applying the principles in your daily work. No design experience necessary.</p> - </div> - <div class="col-6"> - <iframe width="355" height="200" src="//www.youtube.com/embed/s0HIP8EdlnE" frameborder="0" allowfullscreen=""></iframe> - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="cols"> - <div class="col-7"> - <h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326301704">Structure in Android App Design</a></h3> - <p>Life is simple when your app is simple. But when your apps gets more complex, how do you choose between spinners, tabs, and drawers for navigation? Members of the Android Design team look at techniques for making your app predictable and pleasing to use.</p> - </div> - <div class="col-6"> - <iframe width="355" height="200" src="//www.youtube.com/embed/XpqyiBR0lJ4" frameborder="0" allowfullscreen=""></iframe> - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="cols"> - <div class="col-7"> - <h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326425499">Fireside Chat with the Android Team</a></h3> - <p>Pull up a chair and join the Android platform team for a fireside chat. It's your opportunity to ask us about the platform and learn a little bit more about why things work the way they do, from the people who built it. </p> - </div> - <div class="col-6"> - <iframe width="355" height="200" src="//www.youtube.com/embed/A5OOJDIrYls" frameborder="0" allowfullscreen=""></iframe> - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="cols"> - <div class="col-7"> - <h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326483138">Agile UX Research Practice in Android</a></h3> - <p>In the Android UX team, it is critical to get user feedback frequently and consistently so that we are able to iterate and develop the best-in-class designs for our users. We will discuss how the team applied "Pulse Studies" (iterative research sessions) in order to put new ideas, designs, and concepts in front of users on a regular basis; it requires minimal advance planning, it can have an immediate product impact, and it can meet urgent needs. </p> - </div> - <div class="col-6"> - <iframe width="355" height="200" src="//www.youtube.com/embed/6MOeVNbh9cY" frameborder="0" allowfullscreen=""></iframe> - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="cols"> - <div class="col-7"> - <h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326460111">Cognitive Science and Design</a></h3> - <p>This session will provide an in-depth look at human perception and cognition, and its implications for interactive and visual design. The human brain is purely treated as an information processing machine, and we will teach the audience its attributes, its advantages, its limitations, and generally how to hack it. </p> - </div> - <div class="col-6"> - <iframe width="355" height="200" src="//www.youtube.com/embed/z2exxj4COhU" frameborder="0" allowfullscreen=""></iframe> - </div> -</div> - -<img src="{@docRoot}design/media/extras_googleio_12.png"> - -<div class="vspace size-2"> </div> - -<div class="cols"> - <div class="col-7"> - <h3 id="design-for-success"><a href="https://developers.google.com/events/io/sessions/gooio2012/112/">Android Design for Success</a></h3> - <p>You have a great idea for an Android app. You want it to stand out among hundreds of thousands. You want your users to love it and tell everyone they know. The Android User Experience team is here to help. We talk about the Android Design guide and other tricks of the trade for creating apps that delight users and help them accomplish their goals. No design background is required.</p> - </div> - <div class="col-6"> - <iframe width="355" height="200" src="//www.youtube.com/embed/2NL_83EG0no" frameborder="0" allowfullscreen=""></iframe> - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="cols"> - <div class="col-7"> - <h3 id="design-for-engineers"><a href="https://developers.google.com/events/io/sessions/gooio2012/1204/">Android Design for Engineers</a></h3> - <p>Design isn't black magic, it's a field that people can learn. In this talk two elite designers from Google give you an advanced crash course in interactive and visual design. Topics include mental models, natural mappings, metaphors, mode errors, visual hierarchies, typography and gestalt principles. Correctly applied, this knowledge can drastically improve the quality of your work.</p> - </div> - <div class="col-6"> - <iframe width="355" height="200" src="//www.youtube.com/embed/iJDoxOTyMdk" frameborder="0" allowfullscreen=""></iframe> - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="cols"> - <div class="col-7"> - <h3 id="navigation-in-android"><a href="https://developers.google.com/events/io/sessions/gooio2012/114/">Navigation in Android</a></h3> - <p>An app is useless if people can't find their way around it. Android introduced big navigation-support changes in 3.0 and 4.0. The Action Bar offers a convenient control for Up navigation, the Back key's behavior became more consistent within tasks, and the Recent Tasks UI got an overhaul. In this talk, we discuss how and why we got where we are today, how to think about navigation when designing your app's user experience, and how to write apps that offer effortless navigation in multiple Android versions.</p> - </div> - <div class="col-6"> - <iframe width="355" height="200" src="//www.youtube.com/embed/XwGHJJYBs0Q" frameborder="0" allowfullscreen=""></iframe> - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="cols"> - <div class="col-7"> - <h3 id="now-what"><a href="https://developers.google.com/events/io/sessions/gooio2012/115/">So You've Read the Design Guide; Now What?</a></h3> - <p>The Android Design Guide describes how to design beautiful Android apps, but not how to build them. In this talk we give practical tips for how to apply fit & finish as you implement your design, we show you how to avoid some common pitfalls, we describe some useful patterns, and show how tools can help.</p> - </div> - <div class="col-6"> - <iframe width="355" height="200" src="//www.youtube.com/embed/2jCVmfCse1E" frameborder="0" allowfullscreen=""></iframe> - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="cols"> - <div class="col-7"> - <h3 id="playing-with-patterns"><a href="https://developers.google.com/events/io/sessions/gooio2012/131/">Playing with Patterns</a></h3> - <p>Best-in-class application designers and developers talk about their experience in developing for Android, showing screenshots from their app, exploring the challenges they faced, and offering creative solutions congruent with the Android Design guide. Guests are invited to show examples of visual and interaction patterns in their application that manage to keep it simultaneously consistent and personal.</p> - </div> - <div class="col-6"> - <iframe width="355" height="200" src="//www.youtube.com/embed/8iUbr8RZKtg" frameborder="0" allowfullscreen=""></iframe> - </div> -</div> - -<p>Videos for the entire Design Track can also be found on the <a href="http://www.youtube.com/playlist?list=PL54FA004D676C3EE9">Android Developers Channel</a> on YouTube.</p> diff --git a/docs/html/develop/index.jd b/docs/html/develop/index.jd index 5c3990c..80e42f2 100644 --- a/docs/html/develop/index.jd +++ b/docs/html/develop/index.jd @@ -9,41 +9,52 @@ tabbedList=1 excludeFromSuggestions=true @jd:body -<section class="dac-expand dac-hero dac-light"> + <section class="dac-expand dac-hero dac-blue"> <div class="wrap"> <div class="cols dac-hero-content"> <div class="col-1of2 col-push-1of2 dac-hero-figure"> <img class="dac-hero-image" src="/images/develop/hero-android-studio-on-device.png"> </div> <div class="col-1of2 col-pull-1of2"> - <h1 class="dac-hero-title">Start!</h1> + <h1 class="dac-hero-title">Get Started with Android</h1> <p class="dac-hero-description"> - Set up your environment and create an app. Build faster with sample projects and templates. + Everything you need to build incredible app experiences on phones and tablets, Wear, TV, and Auto. </p> + +<!--Set up your environment and create an app. Build faster with sample projects and templates.--> </p> - <a class="dac-hero-cta" href="/sdk/index.html"> + <a class="dac-hero-cta" href="{@docRoot}sdk/index.html"> <span class="dac-sprite dac-auto-chevron"></span> Set up Android Studio </a><br> - <a class="dac-hero-cta" href="/training/basics/firstapp/index.html"> + <a class="dac-hero-cta" href="{@docRoot}training/basics/firstapp/index.html"> <span class="dac-sprite dac-auto-chevron"></span> - Make your first app + Build your first app </a><br> - <a class="dac-hero-cta" href="/guide/index.html"> + <a class="dac-hero-cta" href="{@docRoot}guide/index.html"> <span class="dac-sprite dac-auto-chevron"></span> Learn about Android </a><br> + <a class="dac-hero-cta" href="{@docRoot}guide/index.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Sample projects + </a><br> </div> </div> - <div class="dac-section dac-small"> + <!--<div class="dac-section dac-small"> <div class="resource-widget resource-flow-layout col-16" data-query="collection:develop/landing/mainlinks" data-cardSizes="6x2" data-maxResults="6"></div> - </div> + </div>--> </div> </section> +<div class="wrap dac-offset-parent"> + <a class="dac-fab dac-scroll-button" data-scroll-button href="#latest"> + <i class="dac-sprite dac-arrow-down-gray"></i> + </a> +</div> -<section class="dac-section dac-gray dac-small dac-invert"><div class="wrap"> +<section class="dac-section dac-gray dac-small dac-invert" id="latest"><div class="wrap"> <h2 class="norule">Latest</h2> <div class="resource-widget resource-flow-layout col-16" data-query="collection:develop/landing/latest" @@ -51,6 +62,20 @@ excludeFromSuggestions=true data-maxResults="3"></div> </div></section> +<section class="dac-section dac-section-light"><div class="wrap"> + <h1 class="dac-section-title">Tools for building apps</h1> + <div class="dac-section-subtitle"> + Insights into Android's tools and libraries to speed your development. + </div> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:develop/landing/tools" + data-cardSizes="6x6" + data-maxResults="3" + data-sortOrder="random"></div> + <ul class="dac-section-links"> + </ul> +</div></section> + <section class="dac-section dac-light"><div class="wrap"> <h1 class="dac-section-title">Android performance patterns</h1> <div class="dac-section-subtitle"> @@ -68,39 +93,35 @@ excludeFromSuggestions=true </ul> </div></section> -<section class="dac-section dac-dark dac-invert"><div class="wrap"> - <h1 class="dac-section-title">Build with Google</h1> - <div class="dac-section-subtitle">Services on billions of Android devices worldwide to help you build better apps.</div> +<section class="dac-section dac-gray"><div class="wrap"> + <h1 class="dac-section-title">Ubiquitous computing on Android</h1> + <div class="dac-section-subtitle"> + Opening up new stuff. + </div> <div class="resource-widget resource-flow-layout col-16" - data-query="collection:develop/landing/buildwithgoogle" + data-query="collection:develop/landing/ubicomp" data-cardSizes="6x6" data-maxResults="3"></div> <ul class="dac-section-links"> - <li class="dac-section-link"><a href="https://developers.google.com/"> + <li class="dac-section-link"><a href="/wear/index.html"> <span class="dac-sprite dac-auto-chevron"></span> - Get started with Google << NEEDS LINK + Wear </a></li> - </ul> -</div></section> - -<section class="dac-section dac-light"><div class="wrap"> - <h1 class="dac-section-title">DevBytes</h1> - <div class="dac-section-subtitle">Learn Android in short, focused tutorials.</div> - <div class="resource-widget resource-flow-layout col-16" - data-query="collection:develop/landing/devbytes" - data-cardSizes="6x6" - data-maxResults="6"></div> - <ul class="dac-section-links"> - <li class="dac-section-link"><a href="https://www.youtube.com/watch?v=wlFVIIstKmA&list=PLOU2XLYxmsIJJHY5OrsREtKewtBhc0Uy2"> + <li class="dac-section-link"><a href="/tv/index.html"> + <span class="dac-sprite dac-auto-chevron"></span> + TV + </a></li> + <li class="dac-section-link"><a href="/auto/index.html"> <span class="dac-sprite dac-auto-chevron"></span> - DevBytes 2014 playlist + Auto </a></li> </ul> </div></section> -<section class="dac-section dac-gray"><div class="wrap"> - <h1 class="dac-section-title">Courses</h1> - <div class="dac-section-subtitle">Take free online courses from Android experts that bring you step-by-step to building your own apps.</div> +<section class="dac-section dac-light"><div class="wrap"> + <h1 class="dac-section-title">Online Courses</h1> + <div class="dac-section-subtitle">Free online courses from Android + experts that bring you step-by-step to building your own apps.</div> <div class="resource-widget resource-flow-layout col-16" data-query="collection:develop/landing/courses" data-cardSizes="6x6" diff --git a/docs/html/distribute/engage/ads.jd b/docs/html/distribute/engage/ads.jd new file mode 100644 index 0000000..9ca72f3 --- /dev/null +++ b/docs/html/distribute/engage/ads.jd @@ -0,0 +1,58 @@ +page.title=Drive engagement with AdWords Ads +page.metaDescription=Keep users coming back. AdWords offers re-engagement tools to help your app stay top of mind with users. +page.tags="engagement, adwords" +page.image=images/cards/adwords_2x.jpg +@jd:body + +<p>Successful apps keep users coming back again and again. AdWords offers app +re-engagement tools to help your app stay top of mind with users who’ve +already installed it on their phone. AdWords can remind them of key features +and encourage them to try your app again, or help them complete an activity +they didn't know your app could handle.</p> + +<p> + <a href="https://support.google.com/adwords/answer/6032073">Get started with AdWords mobile + app engagement campaigns</a>. +</p> + +<div> + <div class="figure-left" style="width:46%;"> + <h3>From search</h3> + <img src="/images/distribute/promote_ads.png"> + <p class="figure-caption">Add deep links to your app, then bring users straight + to relevant app content when they’re searching.</p> + </div> + <div class="figure-right" style="width:46%;"> + <h3>From apps</h3> + <img src="/images/distribute/promote_ads_inapp.png"> + <p class="figure-caption">Use remarketing and deep links to bring users to just the right + place in your app to re-engage and convert, from other apps and games they love.</p> + </div> +</div> + +<h3 id="tips">Tips</h2> + +<ul> + <li> Track what users do in your app after they click an ad, by installing the + AdWords <a href="https://developers.google.com/app-conversion-tracking/">conversion tracking + SDK</a>. + <li> Advertise a compelling reason for users to re-engage with your app, such as a + reminder or a special offer. + <li> <a href="https://developers.google.com/app-indexing/webmasters/app">Add deep links</a> to + your app and bring users directly to the most relevant and interesting + parts of your app, where they can easily take action. + <li> Re-engage with your app users across the Display Network with remarketing lists +and search with keywords. + <li> Use remarketing lists to target high value users so that you can drive more +conversions in your app. +</ul> + +<h2 id="related_resources">Related resources</h2> + +<div class="resource-widget resource-flow-layout col-13" + data-query="collection:distribute/engage/reengage" + data-sortorder="-timestamp" + data-cardsizes="9x3" + data-maxresults="6"> +</div> + diff --git a/docs/html/distribute/engage/appindexing.jd b/docs/html/distribute/engage/appindexing.jd new file mode 100644 index 0000000..2b8f315 --- /dev/null +++ b/docs/html/distribute/engage/appindexing.jd @@ -0,0 +1,61 @@ +page.title=Bring Users from Google Search +page.metaDescription=Use search to bring your existing users back into your app. +page.image=images/cards/adwords_2x.jpg +page.tags="engagement, search" +@jd:body + +<p>Use the features of Google Search for Android to drive the use of your apps: </p> + +<ul> +<li>Once users have installed your app, search can bring them back with <strong>deep-links</strong> direct to your app. </li> + <li>When users use <strong>voice commands</strong> to ask Google to perform a task, your app can be one of those +completing the task.</li> + +<li>You can also take advantage of <strong>Google Now</strong> to +display cards for event, flight, hotel, and restaurant reservations you notify +to users’ gmail addresses, and bring users back from the email linked to the +card.</li> +</ul> + +<p>Start now by <a href="https://developers.google.com/app-indexing/">indexing your app</a>, then take advantage of <a href="https://developers.google.com/voice-actions/">Voice Actions</a>, the <a href="https://developers.google.com/app-indexing/webmasters/appindexingapi">App Indexing API</a>, and <a href="https://developers.google.com/schemas/now/cards">Google Now Cards</a>.</p> + + +<h2 id="help_users_find_your_information">Help Users Find Your Information</h2> + +<p>Re-engage with your users with deep-links displayed in search results, links +that take users directly to content within your app.</p> + + +<div style="margin-top:1.5em;margin-left:24px"> +<img src="{@docRoot}images/distribute/more-app-engagement.png"> +</div> +<h2 id="empower_users_in_your_app">Empower your users to get things done in your app</h2> + +<p>Brings your users into your app to take action with voice actions such as “Ok +Google, play a song” with the music app of choice, or “Ok Google, search for +hotels in Maui on TripAdvisor” in the TripAdvisor app.</p> + +<div style="margin-top:1em"> +<img src="{@docRoot}images/distribute/music-action.png"> +</div> + + +<h2 id="assist_your_users">Assist your users where and when they need it</h2> + +<div class="figure"> +<img src="https://developers.google.com/schemas/images/now_eventconfirmation.png"> +</div> + +<p>Inform your users of their reservations with cards created from structured data +markup delivered in Gmail notifications. Cards also lead users quickly back to +your email message, for further engagement.</p> + +<h2 style="clear:both" id="related-resources">Related Resources</h2> + +<div class="resource-widget resource-flow-layout col-13" + data-query="collection:distribute/engage/appindexing" + data-sortOrder="-timestamp" + data-cardSizes="9x3" + data-maxResults="6"></div> + + diff --git a/docs/html/distribute/engage/deep-linking.jd b/docs/html/distribute/engage/deep-linking.jd index ea1f1de..b8d974c 100644 --- a/docs/html/distribute/engage/deep-linking.jd +++ b/docs/html/distribute/engage/deep-linking.jd @@ -26,27 +26,26 @@ page.image=images/cards/google-search_2x.png before accessing the resource. </p> -<div style="padding:2em, auto;width:550px;"> - <div style="float:right; width:260px; padding-left:1em;"> - <img src="{@docRoot}images/gp-engage-5.jpg" class="border-img"> - <p class="img-caption"> + +<div style="inline-block"> + +<div class="col-5"> + <img src="{@docRoot}images/gp-engage-5.jpg"> + <p class="figure-caption"> G+ Post with Deep Link to Buy </p> - </div> +</div> - <div style="width:260px;float:left;"> - <img src="{@docRoot}images/gp-engage-6.jpg" class="border-img"> - <p class="img-caption"> +<div class="col-5"> + <img src="{@docRoot}images/gp-engage-6.jpg"> + <p class="figure-caption"> Purchase page within app </p> - </div> </div> - -<div class="headerLine"> -<h2>Deep Linking from Google Search — App Indexing</h2> </div> +<h2 style="clear:both">Deep Linking from Google Search — App Indexing</h2> <div style="float:right;"> <img src="/images/gp-listing-4.jpg" style="padding-top:1em;padding-left:2em;"> @@ -65,15 +64,15 @@ page.image=images/cards/google-search_2x.png content</a>. </p> -<div class="clearfloat" style="margin-top:2em;"></div> -<div style="float:right;width:340px;padding-left:2em;"> - <img src="/images/gp-ads-linking2.jpg" style="padding-top:1em;"> -</div> -<div class="headerLine "> -<h2>Deep Linking from Google Ads</h2> +<h2 style="clear:both" style="padding-top:2em">Deep Linking from Google Ads</h2> + + +<div class="col-5" style="float:right"> + <img src="{@docRoot}images/gp-ads-linking2.jpg" > </div> + <p> Ads can remind users about the apps they already have. </p> diff --git a/docs/html/distribute/engage/engage_toc.cs b/docs/html/distribute/engage/engage_toc.cs index eb176f9..4639d55 100644 --- a/docs/html/distribute/engage/engage_toc.cs +++ b/docs/html/distribute/engage/engage_toc.cs @@ -31,18 +31,37 @@ </li> <li class="nav-section"> <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs - var:toroot?>distribute/engage/game-services.html"> - <span class="en">Encourage Competition</span></a> + var:toroot?>distribute/engage/ads.html"> + <span class="en">Drive engagement with Ads</span></a> </div> </li> <li class="nav-section"> <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs + var:toroot?>distribute/engage/appindexing.html"> + <span class="en">Bring Users from Search</span></a> + </div> + </li> + <li class="nav-section"> + <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs + var:toroot?>distribute/engage/intents.html"> + <span class="en">Use the Power of Intents</span></a> + </div> + </li> + + <li class="nav-section"> + <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/engage/analytics.html"> <span class="en">Understand User Behavior</span></a> </div> </li> <li class="nav-section"> <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs + var:toroot?>distribute/engage/game-services.html"> + <span class="en">Encourage Competition</span></a> + </div> + </li> + <li class="nav-section"> + <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/engage/app-updates.html"> <span class="en">Update Regularly</span></a> </div> diff --git a/docs/html/distribute/engage/index.jd b/docs/html/distribute/engage/index.jd index 2b103c3..a47e004 100644 --- a/docs/html/distribute/engage/index.jd +++ b/docs/html/distribute/engage/index.jd @@ -1,5 +1,5 @@ page.title=Engage & Retain Users -page.metaDescription=Engaging and retaining active users is the key to success. Here are some resources to help you build an active user base. +page.metaDescription=Engaging and retaining active users are the keys to success. Here are some resources to help you build an active user base. section.landing=true nonavpage=true @@ -15,8 +15,13 @@ nonavpage=true <div class="resource-widget resource-flow-layout landing col-16" data-query="collection:distribute/engagelanding" - data-cardSizes="9x6,9x6,6x6,6x6,6x6,9x6,9x6,6x6,6x6,6x6" - data-maxResults="10"> + data-cardSizes="6x6" + data-maxResults="6"> + </div> + <div class="resource-widget resource-flow-layout landing col-16" + data-query="collection:distribute/engagelanding" + data-cardSizes="6x2" + data-maxResults="20"> </div> <h3>Related Resources</h3> diff --git a/docs/html/distribute/engage/intents.jd b/docs/html/distribute/engage/intents.jd new file mode 100644 index 0000000..0371ac4 --- /dev/null +++ b/docs/html/distribute/engage/intents.jd @@ -0,0 +1,39 @@ +page.title=Drive On-Device Discovery through Android Intents +page.metaDescription=Make your app available to users as they perform tasks in other apps through Intents. +page.tags="engagement" +@jd:body + +<p>Let the user choose <em>your app</em> to handle specific tasks from another app, +such as sharing a picture, sending a message, or playing music. You can do this though +Android's open Intents system. By adding Intent filters for the tasks your app can handle, +you make it easy for the user to access your app’s features from other apps and from voice +commands in Google Now.</p> + +<img src="{@docRoot}images/distribute/engage-intents.png"> + +<p>By declaring Intent Filters in your app, it informs the Android OS about the +actions it can perform for other apps. And in addition to making it easy for +your users to make full use of your app’s features, it can help them discover +features they didn’t know it supported.</p> + +<p>To learn about all the ways you can use Intents, check out <a +href="{@docRoot}guide/components/intents-filters.html">Intents and Intent Filters</a>.</p> + +<h2 id=tips>Tips</h2> + +<ul> + <li> Identify and package any features your app can offer to other apps. + <li> Use the "view" intent to give users the option to open any links to your +website within your app instead. + <li> Familiarize yourself with actions commonly accomplished with intents, such as +sharing, so that you can focus on your app's core functionality and outsource +common actions. +</ul> + +<h2 style="clear:both" id="related-resources">Related Resources</h2> + +<div class="resource-widget resource-flow-layout col-13" + data-query="collection:distribute/engage/intents" + data-sortOrder="-timestamp" + data-cardSizes="9x3" + data-maxResults="6"></div> diff --git a/docs/html/distribute/index.jd b/docs/html/distribute/index.jd index c49fe3e..bff8df6 100644 --- a/docs/html/distribute/index.jd +++ b/docs/html/distribute/index.jd @@ -10,7 +10,13 @@ page.metaDescription=The most visited store in the world for Android apps. Cloud <div class="dac-hero-carousel" data-carousel-query="collection:distribute/landing/carousel"> </div> -<section class="dac-section dac-gray dac-small dac-invert"><div class="wrap"> +<div class="wrap dac-offset-parent"> + <a class="dac-fab dac-scroll-button" data-scroll-button href="#latest"> + <i class="dac-sprite dac-arrow-down-gray"></i> + </a> +</div> + +<section class="dac-section dac-gray dac-small dac-invert" id="latest"><div class="wrap"> <h2 class="norule">Latest</h2> <div class="resource-widget resource-flow-layout col-16" data-query="type:youtube+tag:googleplay+tag:developerstory+tag:featured, type:blog+tag:googleplay+tag:distribute+tag:featured" diff --git a/docs/html/distribute/monetize/ads.jd b/docs/html/distribute/monetize/ads.jd index b5c5f4a..8f6c8b0 100644 --- a/docs/html/distribute/monetize/ads.jd +++ b/docs/html/distribute/monetize/ads.jd @@ -1,138 +1,129 @@ -page.title=Monetize with Ads -page.metaDescription=Ads are a quick and easy way to incorporate a monetization option into both your free and paid apps. -page.tags="monetizing", "free", "freemium", "ads" -page.image=/distribute/images/advertising.jpg - +page.title=Earn Revenue from AdMob Ads +page.metaDescription=Gain insights about your users, drive more in-app purchases, and maximize your ad revenue. +page.tags="monetizing", "ads", "admob", "ads" +page.image=distribute/images/advertising.jpg @jd:body <div class="figure"> <img src="{@docRoot}distribute/images/advertising.jpg" style="width:460px;"> </div> -<p> - Ads can be a quick and easy way to earn more from your <a href= - "{@docRoot}distribute/monetize/freemium.html">freemium</a>, <a href= - "{@docRoot}distribute/monetize/premium.html">premium</a>, and <a href= - "{@docRoot}distribute/monetize/subscriptions.html">subscription</a> apps. - AdMob and the Google Mobile Ads SDK let you add advertising to your apps with - just a few lines of code. -</p> - -<p> - The question is: which model gets the best results for your app? Google's ad - tools are made to help you figure out what combination works best for both - your audience and your bottom line. </p> - -<p>Start by linking your AdMob and Google - Analytics accounts to get better insights and more earning power: for - instance, AdMob can promote in-app purchases to the people who buy them most - often, while showing income-generating ads to those less likely to buy right - now. -</p> - -<p> - Using <a href= - "http://www.google.com/ads/admob/monetize.html#subid=us-en-et-dac">AdMob</a> - and the <a href="{@docRoot}google/play-services/ads.html">Google Mobile Ads - SDK</a> included in Google Play Services, you’re able to add advertising into - your apps, with just a few lines of code. -</p> - -<p> - When including ads in your apps you should consider: -</p> +<p>Ads are an effective and easy way to earn revenue from your apps. AdMob brings +together best-in-class technology in a single ad platform for your app, so you +can gain insights about your users, drive more in-app purchases, and maximize +your ad revenue. You won’t need to rely on a combination of tools or use +precious development resources to build your own solution.</p> + +<p>Why choose AdMob?</p> <ul> - <li> - <p> - <strong>Placement within your apps</strong> — Well-placed ads make - it more likely that users will click through and convert. Poorly-placed - ads lead to lower click-through rates, and even poor ratings and users - abandoning your apps. Our <a href= - "{@docRoot}training/monetization/ads-and-ux.html">developer training</a> - on using ads shows some of the best ways to place ads. - </p> - </li> - - <li> - <p> - <strong>Ad formats</strong> — Every app offers a different type of - experience for users, so it’s important that your ad formats match that - experience. While banner ads may work well for a flashlight utility app, - an immersive gaming app may benefit more from a video interstitial. - Mismatched ad formats can make users unhappy and leave money on the - table. - </p> - </li> - - <li> - <p> - <strong>Maximizing your performance</strong> — Make sure you’re - optimizing your advertising revenue by maximizing your CPMs and fill - rate. Ad providers often cite their very high CPMs but don't mention low - fill rates that can severely decrease your effective CPM. Be sure to look - at both of these figures. Consider using a <a href= - "https://support.google.com/admob/v2/answer/3063564?hl=en&ref_topic=3063091#subid=us-en-et-dac"> - mediation</a> solution if you’d like to use multiple ad providers in your - apps. Look for solutions that offer yield management or <a href= - "https://support.google.com/admob/v2/answer/3379794?hl=en&ref_topic=3379793#subid=us-en-et-dac"> - network optimization</a> features to serve the highest paying ad for each - impression. - </p> - </li> - - <li> - <p> - <strong>Exercising control options</strong> — A variety of ads may - show up within your app. It may make sense to <a href= - "https://support.google.com/admob/v2/answer/3150235?hl=enl#subid=us-en-et-dac"> - block</a> certain of those advertisements from appearing, depending on - your goals and the type of experience you want to provide. Some - developers, for instance, don’t want ads for apps in their same category - showing to their users, while others don’t mind at all. - </p> - </li> - - <li> - <p> - <strong>Cross promoting your other apps</strong> — Ads can do more - than earn revenue. Consider running <a href= - "https://support.google.com/admob/v2/answer/3210452?hl=en#subid=us-en-et-dac"> - house ads</a> within your apps to promote other apps in your portfolio. - When you launch a new app, this kind of promotion is a free and easy way - to attract new users quickly. - </p> - </li> + <li> Over 650,000 apps use AdMob + <li> $1 billion+ paid to developers in the last 2 years + <li> Fast, reliable payment in local currencies + <li> High CPMs and the best fill rates + <li> Industry-leading mediation platform </ul> -<p> - Don't forget that paid channels like AdWords and YouTube can help you cast a - wider net by reaching targeted audiences outside the app ecosystem. They're a - great way to find new users at a price that you control. <a href= - "https://support.google.com/adwords/answer/2549053">Learn more</a>. -</p> +<p><a href="http://www.google.com/ads/admob/#subid=us-en-et-dac">Sign-up for AdMob</a> +today and start showing ads by integrating the <a +href="https://developers.google.com/mobile-ads-sdk/download">Google Mobile Ads SDK</a> +in your app with a few lines of code.</p> + +<h2 id="key_features">Key features</h2> + +<div style="display:inline-block"> +<h3 id="maximize_your_ad_revenue">Maximize your ad revenue</h3> + +<div class="col-4"> + <h4 id="maximize_earnings">Maximize earnings</h4> + <p>Earn more with our industry-leading ad service, which includes <a href= + "https://support.google.com/admob/answer/3063564">free mediation</a> to + automatically improve your earnings, and access to all of Google’s advertiser + demand from AdMob, AdWords, and the DoubleClick Ad Exchange.</p> +</div> + +<div class="col-4"> + <h4 id="get_paid_fast">Get paid fast</h4> + <p>Get paid in local currencies quickly and reliably, with no wire fees charged by + AdMob.</p> +</div> + +<div class="col-4"> + <h4 id="easy_and_free">Easy and free</h4> + <p>The SDK can be installed quickly, and there are no standard fees for using the + platform.</p> +</div> +</div> + +<div style="display:inline-block"> +<h3 id="grow_your_business_with_a_trusted_partner">Grow your business with a trusted partner</h3> + +<div class="col-6"> + <h4 id="powered_by_googles_ad_technology">Powered by Google’s ad technology</h4> + <p>For over a decade, Google has helped millions of developers grow their digital + businesses.</p> +</div> + +<div class="col-6"> +<h4 id="auto_updates_on_google_play">Auto updates on Google Play</h4> +<p>AdMob’s integration with Google Play services pushes automatic performance + improvements to Android apps without additional SDK changes.</p> +</div> +</div> + +<div style="display:inline-block"> +<h3 id="drive_more_in-app_purchases_and_downloads">Drive more in-app purchases and downloads</h3> + +<div class="col-6"> +<h4 id="sell_more_in-app_purchases">Sell more in-app purchases</h4> +<p>Earn more revenue by intelligently promoting your in-app purchases to the users +most likely to buy them.</p> +</div> + +<div class="col-6"> +<h4 id="promote_your_apps_for_free">Promote your apps for free</h4> +<p>Cross-sell your other apps (or your friend’s apps) to your existing users, +using free AdMob <a href="https://support.google.com/admob/answer/3210452">house ads</a>.</p> +</div> +</div> + +<div style="display:inline-block"> +<h3 id="drive_more_in-app_purchases_and_downloads">Drive more in-app purchases and downloads</h3> -<p> - To start monetizing with ads, sign up for AdMob and integrate the Google - Mobile Ads SDK into your apps. If you also need to manage direct deals with - advertisers, consider using DoubleClick for Publishers Small Business. -</p> +<div class="col-6"> +<h4 id="analytics_for_apps">Analytics for apps</h4> +<p>Analyze your app’s performance from within AdMob with Google Analytics. +Discover where people are downloading your app, and the features they use the +most in real time.</p> +</div> + +<div class="col-6"> +<h4 id="flow_visualization_reports">Flow visualization reports</h4> +<p>In Analytics, see how people are navigating through your app with graphical +<a href="https://support.google.com/analytics/answer/2519986">flow reports</a>. +View the path they take to making a purchase, and the point where they exit +the app, plus much more.</p> +</div> +</div> -<p> - To start monetizing with ads sign up for <a href= - "http://www.google.com/ads/admob/#subid=us-en-et-dac">AdMob</a> and integrate - the <a href="https://developers.google.com/mobile-ads-sdk/download">Google - Mobile Ads SDK</a> into your apps. If you also need to manage direct deals - with advertisers, consider using <a href= - "http://www.google.com/doubleclick/publishers/small-business/index.html#subid=us-en-et-dac"> - DoubleClick for Publishers Small Business</a>. -</p> +<h2 id=tips>Tips</h2> + +<ul> + <li> Place ads wisely, they shouldn't be too intrusive but still need to be clearly +visible to attract clickthroughs. + <li> Use banner, interstitial, and other ad formats appropriately. + <li> Make use of targeting features to match ads with your users and your app. + <li> Remember that ads form part of your app and must match its age rating. + <li> Exercise control options sensibly, don't get carried away excluding potentially +competing ads at the expense of revenue. +</ul> + -<div class="headerLine"><h2 id="related-resources">Related resources</h2></div> +<h2 id=related_resources>Related resources</h2> <div class="resource-widget resource-flow-layout col-13" - data-query="collection:distribute/monetize/advertising" + data-query="collection:distribute/monetize/admob" data-sortOrder="-timestamp" data-cardSizes="9x3" data-maxResults="6"></div> diff --git a/docs/html/distribute/monetize/monetize_toc.cs b/docs/html/distribute/monetize/monetize_toc.cs index 8211689..aa1bdd6 100644 --- a/docs/html/distribute/monetize/monetize_toc.cs +++ b/docs/html/distribute/monetize/monetize_toc.cs @@ -24,7 +24,7 @@ </li> <li class="nav-section"> <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/monetize/ads.html"> - <span class="en">Ads</span> + <span class="en">AdMob Ads</span> </a> </div> </li> diff --git a/docs/html/distribute/users/appindexing.jd b/docs/html/distribute/users/appindexing.jd new file mode 100644 index 0000000..6a3fec6 --- /dev/null +++ b/docs/html/distribute/users/appindexing.jd @@ -0,0 +1,46 @@ +page.title=Drive installs from Google Search +page.metaDescription=Surface the content of your apps in Google Search and link it to app installs. +meta.tags="getusers", "search", "appindexing" +page.image=images/cards/google-search_2x.png +@jd:body + +<p>Google Search now helps users discover your app, with App Indexing. When users +search with Google on their Android device the results will include details of +relevant, indexed apps. The search results will include an install button that +takes users to your app in the Google Play store. And when your app is +installed, the user will be taken straight to the right content within it.</p> + +<div class="figure-left"> +<img src="{@docRoot}images/distribute/appindexing.gif"> +</div> + +<p>This free service expands your opportunities to turn the investment you’ve made +in creating an outstanding app or game into installs. </p> + +<p>Start now by adding deep linking support to your app, verifying your app’s +official website, and defining deep links. To learn how, check out these <a +href="https://developers.google.com/app-indexing/webmasters/details">instructions</a>. </p> + +<p>Once your app is index, links to its content will join the 30 billion app index +links already available to Google Search.</p> + +<h2 id=tips>Tips</h2> + +<ul> + <li> App Indexing will also be used as a ranking signal for all users on Android, +regardless of whether they have your app installed or not. + <li> App Indexing also helps drive use of your app — when your app is installed on a +user’s device, search results will include deep links to your app that bring +the user straight to the relevant app content. + <li> Use the App Indexing API to help users discover relevant content in your app +before they complete a query with auto-completions. +</ul> + +<h2 id=related_resources>Related resources</h2> + +<div class="resource-widget resource-flow-layout col-13" + data-query="collection:distribute/users/appindexing" + data-sortOrder="-timestamp" + data-cardSizes="9x3" + data-maxResults="6"></div> + diff --git a/docs/html/distribute/users/promote-with-ads.jd b/docs/html/distribute/users/promote-with-ads.jd index c1d79fc..d71b8c9 100644 --- a/docs/html/distribute/users/promote-with-ads.jd +++ b/docs/html/distribute/users/promote-with-ads.jd @@ -1,43 +1,126 @@ page.title=Promote Your App with Ads -page.metaDescription=Promote your app through AdMob, AdWords, and YouTube to find new users at the right moment. +page.metaDescription=Promote your app with AdWords to find new users at the right moment. page.image=images/cards/adwords_2x.jpg -page.tags="users, ads, analytics" - +page.tags="users, ads, adwords" @jd:body -<p> - AdMob is Google's advertising platform for mobile apps. You can use it to - monetize your app and promote your apps, and you can link your Google - Analytics account to AdMob so you can analyze your apps — all in one - place. -</p> - -<p> - <a href="http://www.google.com/ads/admob/">AdMob</a> is the largest mobile ad - app network. But you get more than just massive scale: AdMob will soon help - you find the right users in related apps. If your app is for bicycling, AdMob - can promote your app on other fitness and cycling-related apps worldwide. - <a href= - "https://apps.admob.com/admob/signup?subid=us-en-et-dac&_adc=ww-ww-et-admob2&hl=en"> - Sign up for AdMob</a>. -</p> - -<p> - AdMob also offers new solutions to help you achieve app-related goals such as - downloads, re-engagement and in-app purchases using Google search and the - Google Display Network. These solutions include streamlined campaign creation - flows and tools to track performance across the entire app lifecycle. - <a href="https://support.google.com/adwords/answer/2549053?hl=en">Learn - More</a>. -</p> -<div style="margin-top:2em;"> - <img src="{@docRoot}images/gp-ads-console.jpg"> +<p>Users have a huge amount of choice when it comes to which apps they install and +use, so it’s important to actively find new ways to promote your app and drive +ongoing engagement. AdWords is a powerful and effective way to do both.</p> + + +<h2 id=drive_installs>Drive installs</h2> + +<p><a href="http://adwords.google.com">AdWords</a> promotes your app to interested users where they spend time on phones and +tablets – with app install ads on Google Search, YouTube, Gmail, and within +apps and across the web on the Google Display Network. AdWords is a powerful +way to scale app promotion across Google networks and find customers that are +most likely to install your app. </p> + +<p><a href="https://support.google.com/adwords/answer/6032059">Get started with AdWords app install ads</a>.</p> + +<div style="display:inline-block"> + <div class="figure-left" style="width:40%;"> + <h3>From Google Play</h3> + <img src="/images/distribute/promote_ads_play.png"> + <p class="figure-caption">Search ads on Google Play are still undergoing testing and not yet available to +buy. <a href="http://android-developers.blogspot.com/2015/02/a-new-way-to-promote-your-app-on-google.html">Find out more</a>.</p> + </div> + <div class="figure-right" style="width:40%;"> + <h3>From apps</h3> + <img src="/images/distribute/promote_ads_search.png"> + <p class="figure-caption">Connect with users as they search for content and services provided by your +app.</p> + </div> </div> -<div class="headerLine"> -<h2 id="related-resources">Related Resources</h2> +<div style="display:inline-block"> + <div class="figure-left" style="width:40%;"> + <h3>From YouTube</h3> + <img src="/images/distribute/promote_ads_youtube.png"> + <p class="figure-caption">Promote your app when users are watching related videos.</p> + </div> + <div class="figure-right" style="width:40%;"> + <h3>From apps</h3> + <img src="/images/distribute/promote_ads_apps.png"> + <p class="figure-caption">Reach users while they’re engaged with apps and games across the AdMob network.</p> + </div> +</div> + +<div style="display:inline-block"> + <div class="figure-left" style="width:40%;"> + <h3>From the web</h3> + <img src="/images/distribute/promote_ads_web.png"> + <p class="figure-caption">Reach users while they’re engaged with websites across the Google Display Network.</p> + </div> + <div class="figure-right" style="width:40%;"> + <h3>From Gmail</h3> + <img src="/images/distribute/promote_ads_gmail.png"> + <p class="figure-caption">Promote your app while users communicate and get things done in Gmail.</p> + </div> +</div> + +<h3>Tips</h3> + +<ul> + <li> Estimate how much an app user is worth to your business, so that you can work +out an appropriate cost-per-install that you’re willing to pay. + <li> Ensure that your ads and Play Store listing are compelling and clearly describe +your app’s value. + <li> Check that you’re accurately tracking and attributing installs by installing +the AdWords <a href="https://developers.google.com/app-conversion-tracking/">conversion tracking SDK</a>. + <li> Promote your app broadly across display, search, and video to reach even more +potential users and drive a higher volume of installs. + <li> Start with broader targeting and then fine tune your bidding once you’ve +assessed your campaign results. + <li> Use Conversion Optimizer to automate your bidding so that your ads target users +who are most likely to install your app. + <li> Use Conversion Optimizer for in-app buyers to automate your bidding so that +your ads target high value users who are most likely to make purchases in your +app. +</ul> + + +<h2 id=engage_with_users>Engage with users</h2> + +<p>Getting a user to install an app is one thing, but you'll also want them to +open it regularly. AdWords offers app re-engagement tools to help your app stay +in mind with users who’ve already installed it on their phone. AdWords can +remind them of key features and encourage them to try your app again, or help +them complete an activity they didn't know your app could handle.</p> + +<div> + <div class="figure-left" style="width:46%;"> + <h3>From search</h3> + <img src="/images/distribute/promote_ads.png"> + <p class="figure-caption">Add deep links to your app, then bring users straight + to relevant app content when they’re searching.</p> + </div> + <div class="figure-right" style="width:46%;"> + <h3>From apps</h3> + <img src="/images/distribute/promote_ads_inapp.png"> + <p class="figure-caption">Use remarketing and deep links to bring users to just the right + place in your app to re-engage and convert, from other apps and games they love.</p> + </div> </div> +<h3>Tips</h3> + +<ul> + <li> Track what users do in your app after they’ve clicked an ad, by installing the +AdWords <a href="https://developers.google.com/app-conversion-tracking/">conversion tracking SDK</a>. + <li> Advertise a compelling reason for users to re-engage with your app (such as a +reminder or a special offer). + <li> <a href="https://developers.google.com/app-indexing/webmasters/app">Add deep links</a> to your app that’ll take users directly to the parts of your app that will be +most relevant and interesting to them, where they can easily take action. + <li> Re-engage your app users across the display network with remarketing lists and +search with keywords. + <li> Use remarketing lists to target high value users so that you can drive more +conversions in your app. +</ul> + +<h2 id="related-resources">Related Resources</h2> + <div class="resource-widget resource-flow-layout col-13" data-query="collection:distribute/users/promotewithads" data-sortOrder="-timestamp" diff --git a/docs/html/distribute/users/users_toc.cs b/docs/html/distribute/users/users_toc.cs index edfa874..2e796c8 100644 --- a/docs/html/distribute/users/users_toc.cs +++ b/docs/html/distribute/users/users_toc.cs @@ -11,26 +11,32 @@ </div> </li> <li class="nav-section"> - <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/users/build-buzz.html"> - <span class="en">Build Buzz</span> + <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/users/expand-to-new-markets.html"> + <span class="en">Expand to New Markets</span> </a> </div> </li> <li class="nav-section"> - <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/users/build-community.html"> - <span class="en">Build Community</span> + <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/users/promote-with-ads.html"> + <span class="en">Promote with Ads</span> </a> </div> </li> <li class="nav-section"> - <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/users/expand-to-new-markets.html"> - <span class="en">Expand to New Markets</span> + <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/users/appindexing.html"> + <span class="en">Drive Installs through Search</span> </a> </div> </li> <li class="nav-section"> - <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/users/promote-with-ads.html"> - <span class="en">Promote with Ads</span> + <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/users/build-buzz.html"> + <span class="en">Build Buzz</span> + </a> + </div> + </li> + <li class="nav-section"> + <div class="nav-section-header empty" style="font-weight:normal"><a href="<?cs var:toroot?>distribute/users/build-community.html"> + <span class="en">Build Community</span> </a> </div> </li> diff --git a/docs/html/guide/topics/renderscript/compute.jd b/docs/html/guide/topics/renderscript/compute.jd index 2e7ce56..eef8cda 100644 --- a/docs/html/guide/topics/renderscript/compute.jd +++ b/docs/html/guide/topics/renderscript/compute.jd @@ -185,50 +185,101 @@ precision (such as SIMD CPU instructions).</p> <p>You can check and update the installed version of these tools in the <a href="{@docRoot}tools/help/sdk-manager.html">Android SDK Manager</a>.</p> -<p class="note"> - <strong>Note:</strong> Use of Support Library RenderScript APIs is not currently supported with - Android Studio or Gradle-based builds. -</p> -<p>To use the Support Library RenderScript APIs in Eclipse:</p> +<p>To use the Support Library RenderScript APIs:</p> <ol> <li>Make sure you have the required Android SDK version and Build Tools version installed.</li> - <li>Open the {@code project.properties} file in the root folder of your application project.</li> - <li>Add the following lines to the file: + <li> Update the settings for the Android build process to include the RenderScript settings: + + <p><strong>For Android Studio or Gradle-based builds</strong></p> + <ul> + <li>Open the {@code build.gradle} file in the app folder of your application module. </li> + <li>Add the following RenderScript settings to the file: + +<pre> +android { + compileSdkVersion 19 + buildToolsVersion "19.0.3" + + defaultConfig { + minSdkVersion 8 + targetSdkVersion 16 +<strong> + renderscriptTargetApi 18 + renderscriptSupportModeEnabled true +</strong> + } +} +</pre> + + + <p>The settings listed above control specific behavior in the Android build process:</p> + + <ul> + <li>{@code renderscriptTargetApi} - Specifies the bytecode version to be generated. We + recommend you set this value to the highest available API level and set + {@code renderscriptSupportModeEnabled} + to {@code true}. Valid values for this setting are any integer value + from 11 to the most recently released API level. If your minimum SDK version specified in your + application manifest is set to a different value, that value is ignored and the target value + in the build file is used to set the minimum SDK version.</li> + <li>{@code renderscriptSupportModeEnabled} - Specifies that the generated bytecode should fall + back to a compatible version if the device it is running on does not support the target + version. + </li> + <li>{@code buildToolsVersion} - The version of the Android SDK build tools to use. This value + should be set to {@code 18.1.0} or higher. If this option is not specified, the highest + installed build tools version is used. You should always set this value to ensure the + consistency of builds across development machines with different configurations.</li> + </ul> + + </li> + + <p><strong>For Eclipse</strong></p> + <ul> + <li>Open the {@code project.properties} file in the root folder of your application project.</li> + <li>Add the following lines to the file: + <pre> renderscript.target=18 renderscript.support.mode=true sdk.buildtools=18.1.0 </pre> - </li> + + <p>The settings listed above control specific behavior in the Android build process:</p> + + <ul> + <li>{@code renderscript.target} - Specifies the bytecode version to be generated. We + recommend you set this value to the highest available API level and set + {@code renderscript.support.mode} to {@code true}. Valid values for this setting are any + integer value from 11 to the most recently released API level. If your minimum SDK version + specified in your application manifest is set to a higher value, this value is ignored and + the target value is set to the minimum SDK version.</li> + <li>{@code renderscript.support.mode} - Specifies that the generated bytecode should fall + back to a compatible version if the device it is running on does not support the target version. + </li> + <li>{@code sdk.buildtools} - The version of the Android SDK build tools to use. This value + should be set to {@code 18.1.0} or higher. If this option is not specified, the highest + installed build tools version is used. You should always set this value to ensure the + consistency of builds across development machines with different configurations.</li> + </ul> + </li> + + </ul> + + </ul> + <li>In your application classes that use RenderScript, add an import for the Support Library classes: + <pre> import android.support.v8.renderscript.*; </pre> - </li> -</ol> -<p>The {@code project.properties} settings listed above control specific behavior in the Android - build process:</p> - -<ul> - <li>{@code renderscript.target} - Specifies the bytecode version to be generated. We - recommend you set this value the highest available API level and set {@code - renderscript.support.mode} to {@code true}. Valid values for this setting are any integer value - from 11 to the most recently released API level. If your minimum SDK version specified in your - application manifest is set to a higher value, this value is ignored and the target value is set - to the minimum SDK version.</li> - <li>{@code renderscript.support.mode} - Specifies that the generated bytecode should fall - back to a compatible version if the device it is running on does not support the target version. - </li> - <li>{@code sdk.buildtools} - The version of the Android SDK build tools to use. This value - should be set to {@code 18.1.0} or higher. If this option is not specified, the highest - installed build tools version is used. You should always set this value to ensure the - consistency of builds across development machines with different configurations.</li> -</ul> + </li> + </0l> <h2 id="using-rs-from-java">Using RenderScript from Java Code</h2> diff --git a/docs/html/guide/topics/renderscript/reference.jd b/docs/html/guide/topics/renderscript/reference.jd deleted file mode 100644 index a9d780a..0000000 --- a/docs/html/guide/topics/renderscript/reference.jd +++ /dev/null @@ -1,21 +0,0 @@ -page.title=Runtime API Reference -parent.title=Computation -parent.link=index.html - -@jd:body - -<script language="JavaScript"> - -function autoResize(element){ - var newheight; - var newwidth; - - newheight = element.contentWindow.document.body.scrollHeight + 20; - newwidth = element.contentWindow.document.body.scrollWidth; - element.height = (newheight) + "px"; - element.width = (newwidth) + "px"; -} -</script> - - -<iframe SRC="{@docRoot}reference/renderscript/index.html" width="100%" id="iframe" marginheight="0" frameborder="0" onLoad="autoResize(this);"></iframe> diff --git a/docs/html/images/cards/card-android-fundamentals_16x9_2x.png b/docs/html/images/cards/card-android-fundamentals_16x9_2x.png Binary files differnew file mode 100644 index 0000000..64d1fa5 --- /dev/null +++ b/docs/html/images/cards/card-android-fundamentals_16x9_2x.png diff --git a/docs/html/images/cards/card-android-studio-overview_16x9_2x.jpg b/docs/html/images/cards/card-android-studio-overview_16x9_2x.jpg Binary files differnew file mode 100644 index 0000000..c0ef659 --- /dev/null +++ b/docs/html/images/cards/card-android-studio-overview_16x9_2x.jpg diff --git a/docs/html/images/cards/card-build_16x9_2x.png b/docs/html/images/cards/card-build_16x9_2x.png Binary files differnew file mode 100644 index 0000000..1fdbf89 --- /dev/null +++ b/docs/html/images/cards/card-build_16x9_2x.png diff --git a/docs/html/images/cards/card-download_16-9_2x.png b/docs/html/images/cards/card-download_16-9_2x.png Binary files differnew file mode 100644 index 0000000..06642b4 --- /dev/null +++ b/docs/html/images/cards/card-download_16-9_2x.png diff --git a/docs/html/images/cards/card-earn_16x9_2x.png b/docs/html/images/cards/card-earn_16x9_2x.png Binary files differnew file mode 100644 index 0000000..1b96c83 --- /dev/null +++ b/docs/html/images/cards/card-earn_16x9_2x.png diff --git a/docs/html/images/cards/card-engage_16x9_2x.png b/docs/html/images/cards/card-engage_16x9_2x.png Binary files differnew file mode 100644 index 0000000..334420b --- /dev/null +++ b/docs/html/images/cards/card-engage_16x9_2x.png diff --git a/docs/html/images/cards/card-g-play-services_16x9_2x.jpg b/docs/html/images/cards/card-g-play-services_16x9_2x.jpg Binary files differnew file mode 100644 index 0000000..a2805a6 --- /dev/null +++ b/docs/html/images/cards/card-g-play-services_16x9_2x.jpg diff --git a/docs/html/images/cards/card-key-changes_16-9_2x.png b/docs/html/images/cards/card-key-changes_16-9_2x.png Binary files differnew file mode 100644 index 0000000..1629b4f --- /dev/null +++ b/docs/html/images/cards/card-key-changes_16-9_2x.png diff --git a/docs/html/images/cards/card-material-icons-16x9_2x.jpg b/docs/html/images/cards/card-material-icons-16x9_2x.jpg Binary files differnew file mode 100644 index 0000000..016932c --- /dev/null +++ b/docs/html/images/cards/card-material-icons-16x9_2x.jpg diff --git a/docs/html/images/cards/card-new_16x9_2x.png b/docs/html/images/cards/card-new_16x9_2x.png Binary files differnew file mode 100644 index 0000000..270f4a3 --- /dev/null +++ b/docs/html/images/cards/card-new_16x9_2x.png diff --git a/docs/html/images/cards/card-preview_16-9_2x.png b/docs/html/images/cards/card-preview_16-9_2x.png Binary files differnew file mode 100644 index 0000000..dd80f6a --- /dev/null +++ b/docs/html/images/cards/card-preview_16-9_2x.png diff --git a/docs/html/images/cards/card-set-up_16-9_2x.png b/docs/html/images/cards/card-set-up_16-9_2x.png Binary files differnew file mode 100644 index 0000000..0283801 --- /dev/null +++ b/docs/html/images/cards/card-set-up_16-9_2x.png diff --git a/docs/html/images/cards/card-support_16-9_2x.png b/docs/html/images/cards/card-support_16-9_2x.png Binary files differnew file mode 100644 index 0000000..08b3290 --- /dev/null +++ b/docs/html/images/cards/card-support_16-9_2x.png diff --git a/docs/html/images/cards/card-ubiquitous-computing_16x9_2x.png b/docs/html/images/cards/card-ubiquitous-computing_16x9_2x.png Binary files differnew file mode 100644 index 0000000..5edff62 --- /dev/null +++ b/docs/html/images/cards/card-ubiquitous-computing_16x9_2x.png diff --git a/docs/html/images/cards/card-using-code-templates_16x9_2x.png b/docs/html/images/cards/card-using-code-templates_16x9_2x.png Binary files differnew file mode 100644 index 0000000..1496306 --- /dev/null +++ b/docs/html/images/cards/card-using-code-templates_16x9_2x.png diff --git a/docs/html/images/cards/course-ud825.png b/docs/html/images/cards/course-ud825.png Binary files differnew file mode 100644 index 0000000..77f98b5 --- /dev/null +++ b/docs/html/images/cards/course-ud825.png diff --git a/docs/html/images/cards/course-ud849.jpg b/docs/html/images/cards/course-ud849.jpg Binary files differnew file mode 100644 index 0000000..41b7ecf --- /dev/null +++ b/docs/html/images/cards/course-ud849.jpg diff --git a/docs/html/images/cards/course-ud853.jpg b/docs/html/images/cards/course-ud853.jpg Binary files differnew file mode 100644 index 0000000..94adfb0 --- /dev/null +++ b/docs/html/images/cards/course-ud853.jpg diff --git a/docs/html/images/distribute/appindexing.gif b/docs/html/images/distribute/appindexing.gif Binary files differnew file mode 100644 index 0000000..6015d14 --- /dev/null +++ b/docs/html/images/distribute/appindexing.gif diff --git a/docs/html/images/distribute/engage-intents.png b/docs/html/images/distribute/engage-intents.png Binary files differnew file mode 100644 index 0000000..2889c08 --- /dev/null +++ b/docs/html/images/distribute/engage-intents.png diff --git a/docs/html/images/distribute/more-app-engagement.png b/docs/html/images/distribute/more-app-engagement.png Binary files differnew file mode 100644 index 0000000..31cbede --- /dev/null +++ b/docs/html/images/distribute/more-app-engagement.png diff --git a/docs/html/images/distribute/music-action.png b/docs/html/images/distribute/music-action.png Binary files differnew file mode 100644 index 0000000..24d6dc8 --- /dev/null +++ b/docs/html/images/distribute/music-action.png diff --git a/docs/html/images/distribute/promote-ads-apps.png b/docs/html/images/distribute/promote-ads-apps.png Binary files differnew file mode 100644 index 0000000..9009a37 --- /dev/null +++ b/docs/html/images/distribute/promote-ads-apps.png diff --git a/docs/html/images/distribute/promote-ads-web.png b/docs/html/images/distribute/promote-ads-web.png Binary files differnew file mode 100644 index 0000000..2f9630e --- /dev/null +++ b/docs/html/images/distribute/promote-ads-web.png diff --git a/docs/html/images/distribute/promote_ads.png b/docs/html/images/distribute/promote_ads.png Binary files differnew file mode 100644 index 0000000..38517aa --- /dev/null +++ b/docs/html/images/distribute/promote_ads.png diff --git a/docs/html/images/distribute/promote_ads_apps.png b/docs/html/images/distribute/promote_ads_apps.png Binary files differnew file mode 100644 index 0000000..2f57865 --- /dev/null +++ b/docs/html/images/distribute/promote_ads_apps.png diff --git a/docs/html/images/distribute/promote_ads_gmail.png b/docs/html/images/distribute/promote_ads_gmail.png Binary files differnew file mode 100644 index 0000000..1d21b4a --- /dev/null +++ b/docs/html/images/distribute/promote_ads_gmail.png diff --git a/docs/html/images/distribute/promote_ads_inapp.png b/docs/html/images/distribute/promote_ads_inapp.png Binary files differnew file mode 100644 index 0000000..8aeee57 --- /dev/null +++ b/docs/html/images/distribute/promote_ads_inapp.png diff --git a/docs/html/images/distribute/promote_ads_play.png b/docs/html/images/distribute/promote_ads_play.png Binary files differnew file mode 100644 index 0000000..1cf51b2 --- /dev/null +++ b/docs/html/images/distribute/promote_ads_play.png diff --git a/docs/html/images/distribute/promote_ads_search.png b/docs/html/images/distribute/promote_ads_search.png Binary files differnew file mode 100644 index 0000000..27c0b38 --- /dev/null +++ b/docs/html/images/distribute/promote_ads_search.png diff --git a/docs/html/images/distribute/promote_ads_web.png b/docs/html/images/distribute/promote_ads_web.png Binary files differnew file mode 100644 index 0000000..588a3d4 --- /dev/null +++ b/docs/html/images/distribute/promote_ads_web.png diff --git a/docs/html/images/distribute/promote_ads_youtube.png b/docs/html/images/distribute/promote_ads_youtube.png Binary files differnew file mode 100644 index 0000000..e88a796 --- /dev/null +++ b/docs/html/images/distribute/promote_ads_youtube.png diff --git a/docs/html/index.jd b/docs/html/index.jd index cfbe7b6..ffc6769 100644 --- a/docs/html/index.jd +++ b/docs/html/index.jd @@ -10,7 +10,10 @@ page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3 </div> <div class="actions-bar dac-expand dac-invert"> - <div class="wrap"> + <div class="wrap dac-offset-parent"> + <a class="dac-fab dac-scroll-button" data-scroll-button href="#build-apps"> + <i class="dac-sprite dac-arrow-down-gray"></i> + </a> <div class="actions"> <div><a href="{@docRoot}sdk/index.html"> <span class="dac-sprite dac-auto-chevron-large"></span> @@ -32,7 +35,7 @@ page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3 </div><!-- end .wrap --> </div><!-- end .actions-bar --> -<section class="dac-section dac-section-light"><div class="wrap"> +<section class="dac-section dac-section-light" id="build-apps"><div class="wrap"> <h1 class="dac-section-title">Build Beautiful Apps</h1> <div class="dac-section-subtitle"> See what’s new or find the resources to get you started with designing and developing for Android. diff --git a/docs/html/jd_collections.js b/docs/html/jd_collections.js index 8538671..c89b310 100644 --- a/docs/html/jd_collections.js +++ b/docs/html/jd_collections.js @@ -66,6 +66,7 @@ var RESOURCE_COLLECTIONS = { "https://www.google.com/design/spec/resources/layout-templates.html", "https://www.google.com/design/spec/resources/sticker-sheets-icons.html", "https://www.google.com/design/spec/resources/roboto-noto-fonts.html", + "https://www.google.com/design/icons/index.html", "design/downloads/index.html#Wear" ] }, @@ -98,20 +99,39 @@ var RESOURCE_COLLECTIONS = { "resources": [ ] }, - "develop/landing/devbytes": { + "develop/landing/ubicomp": { "title": "", "resources": [ - "http://www.youtube.com/watch?v=K2dodTXARqc", - "http://www.youtube.com/watch?v=FOn64iqlphk", - "http://www.youtube.com/watch?v=p4gmvHyuZzw", - "http://www.youtube.com/watch?v=tDmnGNkTtlE", - "http://www.youtube.com/watch?v=6K_jxccHv5M", - "http://www.youtube.com/watch?v=KNKGM4ss5Sc" + "https://www.youtube.com/watch?v=AK38PJZmIW8&list=PLWz5rJ2EKKc-kIrPiq098QH9dOle-fLef", + "https://www.youtube.com/watch?v=6K_jxccHv5M&index=1&list=PLOU2XLYxmsILFBfx66ens76VMLMEPJAB0", + "https://www.youtube.com/watch?v=ctiaVxgclsg&list=PLWz5rJ2EKKc9BdE_PSLNIGjXXr3h_orXM" + ] + }, + "develop/landing/tools": { + "title": "", + "resources": [ + "https://www.youtube.com/watch?v=K2dodTXARqc&list=PLWz5rJ2EKKc8I9gHTMh5yKkwRRGE8BjbQ", + "https://www.youtube.com/watch?v=3PIc-DuEU2s&list=PLWz5rJ2EKKc9e0d55YHgJFHXNZbGHEXJX", + "https://www.youtube.com/watch?v=cD7NPxuuXYY&list=PLWz5rJ2EKKc8I9gHTMh5yKkwRRGE8BjbQ", + "https://www.youtube.com/watch?v=JLLnhwtDoHw&list=PLWz5rJ2EKKc8I9gHTMh5yKkwRRGE8BjbQ", + "https://www.youtube.com/watch?v=2I6fuD20qlY&list=PLWz5rJ2EKKc8I9gHTMh5yKkwRRGE8BjbQ", + "https://www.youtube.com/watch?v=5Be2mJzP-Uw&list=PLWz5rJ2EKKc9e0d55YHgJFHXNZbGHEXJX" ] }, "develop/landing/courses": { "title": "", "resources": [ + "https://www.udacity.com/course/ux-design-for-mobile-developers--ud849", + "https://www.udacity.com/course/developing-android-apps--ud853", + "https://www.udacity.com/course/android-performance--ud825" + ] + }, + "preview/landing/herolinks": { + "title": "", + "resources": [ + "https://www.udacity.com/course/ux-design-for-mobile-developers--ud849", + "https://www.udacity.com/course/developing-android-apps--ud853", + "https://www.udacity.com/course/android-performance--ud825" ] }, "distribute/landing/carousel": { @@ -134,12 +154,12 @@ var RESOURCE_COLLECTIONS = { "distribute/landing/more": { "title": "", "resources": [ - "distribute/users/promote-with-ads.html", - "distribute/monetize/ads.html", - "distribute/analyze/index.html", - "distribute/engage/deep-linking.html", - "distribute/engage/easy-signin.html", - "https://cloud.google.com/docs/" + "distribute/users/promote-with-ads.html", + "distribute/monetize/ads.html", + "distribute/analyze/index.html", + "distribute/engage/deep-linking.html", + "distribute/engage/easy-signin.html", + "https://cloud.google.com/docs/" ] }, "distribute/edu/videos/stories": { @@ -262,10 +282,11 @@ var RESOURCE_COLLECTIONS = { "resources": [ "distribute/users/know-your-user.html", "distribute/users/your-listing.html", - "distribute/users/build-buzz.html", - "distribute/users/build-community.html", "distribute/users/expand-to-new-markets.html", - "distribute/users/promote-with-ads.html" + "distribute/users/promote-with-ads.html", + "distribute/users/appindexing.html", + "distribute/users/build-buzz.html", + "distribute/users/build-community.html" ] }, "distribute/engagelanding": { @@ -275,8 +296,11 @@ var RESOURCE_COLLECTIONS = { "distribute/engage/gcm.html", "distribute/engage/easy-signin.html", "distribute/engage/deep-linking.html", - "distribute/engage/game-services.html", + "distribute/engage/ads.html", + "distribute/engage/appindexing.html", + "distribute/engage/intents.html", "distribute/engage/analytics.html", + "distribute/engage/game-services.html", "distribute/engage/app-updates.html", "distribute/engage/community.html", "distribute/engage/video.html" @@ -532,8 +556,10 @@ var RESOURCE_COLLECTIONS = { "distribute/users/promotewithads": { "title": "", "resources": [ - "http://www.google.com/ads/admob/#subid=us-en-et-dac", - "distribute/essentials/optimizing-your-app.html" + "https://support.google.com/adwords/answer/6032059", + "https://support.google.com/adwords/answer/6032073", + "https://support.google.com/adwords/answer/6167164", + "https://support.google.com/adwords/answer/6167162" ] }, "distribute/users/buildbuzz": { @@ -565,6 +591,14 @@ var RESOURCE_COLLECTIONS = { "http://www.youtube.com/yt/dev/" ] }, + "distribute/users/appindexing": { + "title": "", + "resources": [ + "https://developers.google.com/app-indexing/", + "https://developers.google.com/app-indexing/webmasters/details", + "distribute/engage/search.html" + ] + }, "distribute/toolsreference/bestpractices/apps": { "title": "", "resources": [ @@ -788,6 +822,31 @@ var RESOURCE_COLLECTIONS = { "guide/topics/appwidgets/index.html" ] }, + "distribute/engage/reengage": { + "title": "", + "resources": [ + "https://support.google.com/adwords/answer/6032073", + "distribute/engage/deep-linking.html", + "https://support.google.com/adwords/answer/6167162", + "distribute/users/promote-with-ads.html" + ] + }, + "distribute/engage/appindexing": { + "title": "", + "resources": [ + "distribute/engage/intents.html", + "distribute/engage/appindexing.html", + "distribute/users/appindexing.html" + ] + }, + "distribute/engage/intents": { + "title": "", + "resources": [ + "guide/components/intents-filters.html", + "distribute/engage/appindexing.html", + "distribute/engage/ads.html" + ] + }, "distribute/getusers/expandnewmarkets": { "title": "", "resources": [ @@ -1214,6 +1273,17 @@ var RESOURCE_COLLECTIONS = { "training/monetization/ads-and-ux.html" ] }, + "distribute/monetize/admob": { + "title": "", + "resources": [ + "https://support.google.com/admob/topic/2784623", + "https://developers.google.com/mobile-ads-sdk/download", + "http://analyticsacademy.withgoogle.com/mobile-app", + "http://support.google.com/googleplay/android-developer/topic/2985714", + "https://support.google.com/admob/answer/2753860", + "https://support.google.com/admob/" + ] + }, "distribute/monetize/paymentmethods": { "title": "", "resources": [ @@ -1224,9 +1294,12 @@ var RESOURCE_COLLECTIONS = { "preview/landing/resources": { "title": "", "resources": [ + "preview/overview.html", "preview/api-overview.html", "preview/setup-sdk.html", - "preview/samples.html" + "preview/samples.html", + "preview/reference.html", + "preview/support.html" ] }, "autolanding": { diff --git a/docs/html/jd_extras.js b/docs/html/jd_extras.js index 82ff029..150a9d4 100644 --- a/docs/html/jd_extras.js +++ b/docs/html/jd_extras.js @@ -14,6 +14,8 @@ ALL_RESOURCES_BY_URL. */ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ + /* TODO Remove standard resources from here, such as below + */ { "title":"Quizlet Developer Story", "titleFriendly":"", @@ -173,22 +175,22 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ { "title":"Introduction to Android Studio", "titleFriendly":"", - "summary":"A high level introduction to Android Studio, the new IDE for Android application development. Learn why you should migrate your projects to Android Studio now and how it can help you be more productive as a developer. Rich layout editor, handy suggestions and fixes, new Android project view - these are just some of the things you can expect from the IDE, which is built on the successful IntelliJ IDEA.", - "url":"http://www.youtube.com/watch?v=K2dodTXARqc", + "summary":"Learn why you should migrate your projects to Android Studio now and how it can help you be more productive as a developer. Rich layout editor, handy suggestions and fixes, new Android project view - these are just some of the things you can expect from the IDE, which is built on the successful IntelliJ IDEA.", + "url":"https://www.youtube.com/watch?v=K2dodTXARqc&list=PLWz5rJ2EKKc8I9gHTMh5yKkwRRGE8BjbQ", "group":"", - "keywords": [], + "keywords": ["studio", "tools"], "tags": [ ], "image":"http://i1.ytimg.com/vi/K2dodTXARqc/maxresdefault.jpg", "type":"video" }, { - "title":"DevBytes: Google Play Services 7.3", + "title":"Google Play Services 7.3", "titleFriendly":"", "summary":"Google Play Services 7.3 brings a ton of great new features to help you BUILD BETTER APPS! This update brings the ability to connect multiple wearables simultaneously to a single phone.", - "url":"http://www.youtube.com/watch?v=FOn64iqlphk", + "url":"https://www.youtube.com/watch?v=FOn64iqlphk&list=PLWz5rJ2EKKc9Qk1_iCZNbBp6adYnJf9Vf", "group":"", - "keywords": [], + "keywords": ["google play services"], "tags": [ ], "image":"http://i1.ytimg.com/vi/FOn64iqlphk/maxresdefault.jpg", @@ -207,24 +209,24 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "type":"video" }, { - "title":"Android TV: Introduction to Android TV", + "title":"Introduction to Android TV", "titleFriendly":"", "summary":"Android TV brings the Android platform to the living room with rich content and entertaining app experiences. In this video, Timothy introduces the design philosophy and developer components that make building TV experiences easier than ever before.", - "url":"http://www.youtube.com/watch?v=6K_jxccHv5M", + "url":"https://www.youtube.com/watch?v=6K_jxccHv5M&index=1&list=PLOU2XLYxmsILFBfx66ens76VMLMEPJAB0", "group":"", - "keywords": [], + "keywords": ["tv"], "tags": [ ], "image":"http://i1.ytimg.com/vi/6K_jxccHv5M/maxresdefault.jpg", "type":"video" }, { - "title":"Under the Hood of Android Auto", + "title":"Introduction to Android Auto", "titleFriendly":"", - "summary":"Your car contains some serious technology. Learn about the Android Auto architecture, which enables you to control Android apps and services running on your phone through your car. In this talk, we'll highlight the key characteristics of the Android Auto protocol, which enables your Android phone to talk to compatible cars. We'll also take a look at some of the details of the Android Auto rendering subsystem, which uses Binders and the Android VirtualDisplay API to composite UI from multiple Android apps. Finally, we'll discuss how we're enhancing the Google Maps app by integrating with the Android Auto platform.", - "url":"http://www.youtube.com/watch?v=KNKGM4ss5Sc", + "summary":"Android Auto brings the Android platform to the car in a way that's optimized for the driving experience. It's the same platform you already use for phones, tablets, televisions, wearables, and more. ", + "url":"https://www.youtube.com/watch?v=ctiaVxgclsg&list=PLWz5rJ2EKKc9BdE_PSLNIGjXXr3h_orXM", "group":"", - "keywords": [], + "keywords": ["auto"], "tags": [ ], "image":"http://i1.ytimg.com/vi/KNKGM4ss5Sc/maxresdefault.jpg", @@ -1122,7 +1124,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ ], "url": "http://www.google.com/analytics/mobile/", "timestamp": 1383243492000, - "image": "http://www.google.com//analytics/images/heros/mobile-index.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Google Mobile App Analytics", "summary": "Mobile App Analytics measures what matters most at all key stages: from first discovery and download to in-app purchases. ", "keywords": ["analytics,user behavior"], @@ -1137,9 +1139,9 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ ], "url": "https://developers.google.com/app-indexing/", "timestamp": 1383243492000, - "image": "https://developers.google.com/app-indexing/images/allthecooks_srp.png", + "image": "https://www.gstatic.com/images/icons/material/product/2x/search_64dp.png", "title": "Sign Up for App Indexing", - "summary": "Google is working with app developers and webmasters to index the content of apps and relate them to websites. When relevant, Google Search results on Android will include deep links to apps.", + "summary": "Surface your app content in Google seaerch. Deep link direct to your apps.", "keywords": [], "type": "guide", "titleFriendly": "" @@ -1169,7 +1171,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "url": "https://developers.google.com/+/mobile/android/people", "timestamp": 1383243492000, "image": "images/google/gps-googleplus.png", - "title": "Sign Up for App Indexing", + "title": "Google Sign In", "summary": "After you let users sign in with Google, you can access their age range, language, public profile information, and people that they have circled.", "keywords": ["googleplus"], "type": "guide", @@ -1448,20 +1450,6 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "lang": "en", "group": "", "tags": ["monetize", "ads"], - "url": "http://www.google.com/ads/admob/#subid=us-en-et-dac", - "timestamp": null, - "image": "distribute/images/advertising.png", - "title": "AdMob", - "summary": "Make money by connecting with over a million Google advertisers all over the world, so your revenue scales with your app.", - "keywords": ["ads"], - "type": "distribute", - "titleFriendly": "" - }, - - { - "lang": "en", - "group": "", - "tags": ["monetize", "ads"], "url": "http://www.google.com/doubleclick/publishers/small-business/index.html", "timestamp": null, "image": "http://www.google.com/doubleclick/publishers/small-business/images/define_ad.png", @@ -1478,6 +1466,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "url": "http://support.google.com/googleplay/android-developer/topic/2985714", "timestamp": null, "image": "http://storage.googleapis.com/support-kms-prod/SNP_712EA2784949DDF085C46E3BE7B1DC618A09_4389397_en_v0", + "image": "https://www.gstatic.com/images/icons/material/product/2x/play_64dp.png", "title": "Policy Center: Ads", "summary": "Introduction to ads and system interference policies in Google Play", "keywords": ["ads"], @@ -1815,7 +1804,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://developers.google.com/analytics/solutions/mobile-implementation-guide", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Mobile Analytics Implementation Guide", "summary": "Learn how you can implement additional Google Analytics features to better understand your users and their behavior.", "keywords": ["analytics", "Play", "users"], @@ -1841,7 +1830,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://analyticsacademy.withgoogle.com/course04", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Mobile App Analytics Fundamentals", "summary": "This self-paced online course on mobile app measurement shows you how Google Analytics data can help you make your app more discoverable and profitable.", "keywords": ["analytics"], @@ -1854,7 +1843,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://github.com/googleanalytics/google-analytics-plugin-for-unity", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Analytics Plugin for Unity", "summary": "If you're building games with Unity, you can now implement Analytics once and ship it on multiple platforms automatically.", "keywords": ["analytics", "unity"], @@ -1867,7 +1856,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://developers.google.com/analytics/devguides/collection/android/v4/enhanced-ecommerce", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "In-App Purchases & Ecommerce", "summary": "If your app sells virtual or real goods, ecommerce tracking can help you understand what behaviors lead to purchases.", "keywords": ["analytics, ecommerce"], @@ -1880,7 +1869,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://support.google.com/analytics/answer/1032415", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Goals", "summary": "Track important actions in your app as goals and measure performance against your objectives.", "keywords": ["analytics"], @@ -1893,7 +1882,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://support.google.com/analytics/answer/2568874?ref_topic=6012392", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Active Users", "summary": "The active user report displays your 1-day, 7-day, 14-day and 30-day trailing active users next to each other, to help you analyze performance over time.", "keywords": ["analytics"], @@ -1906,7 +1895,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://developers.google.com/analytics/devguides/collection/android/v4/events", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Events", "summary": "Events let you measure granular in-app activities and understand user journeys.", "keywords": ["analytics"], @@ -1919,7 +1908,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://developers.google.com/analytics/devguides/collection/android/v4/customdimsmets", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Custom Dimensions", "summary": "Custom dimensions enable the association of metadata with hits, users, and sessions in Google Analytics.", "keywords": ["analytics"], @@ -1932,7 +1921,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://developers.google.com/analytics/devguides/collection/android/v4/user-id", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "User ID", "summary": "The User ID feature enables Google Analytics to measure user activities that span across devices.", "keywords": ["analytics"], @@ -1945,7 +1934,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://developers.google.com/analytics/devguides/collection/android/v4/display-features", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Demographic Reporting", "summary": "By enabling display features, you can see just how different user segments engage and monetize.", "keywords": ["analytics"], @@ -1958,7 +1947,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://support.google.com/analytics/answer/3123906", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "User Segmentation", "summary": "Segments let you compare metrics for different subsets of users to identify trends and opportunities for your apps.", "keywords": ["analytics"], @@ -1971,7 +1960,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://developers.google.com/analytics/devguides/collection/android/v4/campaigns", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Campaign Tracking", "summary": "Measuring campaigns in Google Analytics enables the attribution of campaigns and traffic sources to user activity within your app.", "keywords": ["analytics"], @@ -1997,7 +1986,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://support.google.com/analytics/answer/1033961", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "AdWords Integration", "summary": "Link Analytics and AdWords to see the entire picture of customer behavior, from ad click or impression through your site to conversion. ", "keywords": ["adwords, analytics"], @@ -2010,7 +1999,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://developers.google.com/analytics/devguides/collection/android/v4/campaigns#google-play-url-builder", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Campaign URL builder for Google Play", "summary": "Easily create your URLs to track install campaigns.", "keywords": ["play, analytics"], @@ -2036,7 +2025,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://support.google.com/analytics/answer/2785577", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Behavior Flow", "summary": "The Behavior Flow report visualizes the path users traveled from one Screen or Event to the next. This report can help you discover what content keeps users engaged with your app.", "keywords": ["analytics"], @@ -2049,7 +2038,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://support.google.com/analytics/answer/1151300", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Custom Reports", "summary": "Custom Reports let you create your own reports in your Google Analytics account.", "keywords": ["analytics"], @@ -2062,7 +2051,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://support.google.com/analytics/answer/2611268", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Audience Lists & Remarketing", "summary": "Remarketing with Google Analytics lets you deliver targeted ads to users who've already been to your site or app. You can even base those ads on the behavior those users displayed during their sessions.", "keywords": ["analytics"], @@ -2075,7 +2064,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://support.google.com/admob/answer/3508177", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "AdMob Integration", "summary": "With Google Analytics in AdMob, you can view Google Analytics data for your linked apps from within your AdMob account.", "keywords": ["analytics"], @@ -2088,7 +2077,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://developers.google.com/analytics/solutions/mobile-campaign-deep-link", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Deep-Linking", "summary": "Google Analytics gives you a full view of how returning users are interacting with your app, for a holistic view beyond the install.", "keywords": ["analytics"], @@ -2101,7 +2090,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://support.google.com/admob/answer/3508177", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "AdMob Integration", "summary": "With Google Analytics in AdMob, you can view Google Analytics data for your linked apps from within your AdMob account.", "keywords": ["analytics"], @@ -2114,7 +2103,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "tags": [], "url": "https://support.google.com/analytics/answer/2568874", "timestamp": null, - "image": "distribute/images/gp-analytics-logo.jpg", + "image": "images/cards/analytics-mobile_2x.jpg", "title": "Active User Report", "summary": "Active user report displays your 1-day, 7-day, 14-day and 30-day trailing active users next to each other, to help you run benchmark analyses of their performance over time.", "keywords": ["analytics"], @@ -2131,7 +2120,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "title": "Animation", "summary": "", "keywords": [], - "type": "design", + "type": "material design", "titleFriendly": "" }, { @@ -2144,7 +2133,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "title": "Style", "summary": "", "keywords": [], - "type": "design", + "type": "material design", "titleFriendly": "" }, { @@ -2157,7 +2146,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "title": "Layout", "summary": "", "keywords": [], - "type": "design", + "type": "material design", "titleFriendly": "" }, { @@ -2170,7 +2159,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "title": "Components", "summary": "", "keywords": [], - "type": "design", + "type": "material design", "titleFriendly": "" }, { @@ -2183,7 +2172,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "title": "Patterns", "summary": "", "keywords": [], - "type": "design", + "type": "material design", "titleFriendly": "" }, { @@ -2196,7 +2185,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "title": "Usability", "summary": "", "keywords": [], - "type": "design", + "type": "material design", "titleFriendly": "" }, { @@ -2209,7 +2198,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "title": "Color Palettes", "summary": "", "keywords": [], - "type": "design", + "type": "material design", "titleFriendly": "" }, { @@ -2222,7 +2211,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "title": "Layout Templates", "summary": "", "keywords": [], - "type": "design", + "type": "material design", "titleFriendly": "" }, { @@ -2235,7 +2224,7 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "title": "Sticker Sheets & Icons", "summary": "", "keywords": [], - "type": "design", + "type": "material design", "titleFriendly": "" }, { @@ -2248,13 +2237,211 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "title": "Typography: Roboto and Noto Sans fonts", "summary": "", "keywords": [], - "type": "design", + "type": "materialdesign", "titleFriendly": "" }, { + "lang": "en", + "group": "", + "tags": [ + "icons", + "material", + "iconography" + ], + "url": "https://www.google.com/design/icons/index.html", + "timestamp": null, + "image": "images/cards/card-material-icons-16x9_2x.jpg", + "title": "Material icon collection", + "summary": "", + "keywords": ["icons"], + "type": "material design", + "titleFriendly": "" + }, + + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://support.google.com/adwords/answer/6032059", + "timestamp": null, + "image": "https://www.gstatic.com/images/icons/material/product/2x/admob_64dp.png", + "title": "Setting up Mobile App Install Ads", + "summary": "With Mobile app installs campaigns on the Search and Display Networks, and TrueView for mobile app promotion on YouTube, you can create custom app install ads that run exclusively on phones and tablets.", + "keywords": ["marketing", "admob"], + "type": "distribute", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://support.google.com/adwords/answer/6167164", + "timestamp": null, + "image": "https://www.gstatic.com/images/icons/material/product/2x/admob_64dp.png", + "title": "Best practices for Mobile App Engagement", + "summary": "Learn how to market to your user base to drive re-engagement with your app. ", + "keywords": ["marketing", "admob"], + "type": "distribute", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [ + "marketing", + "engagement", + "adwords1" + ], + "url": "https://support.google.com/adwords/answer/6032073", + "timestamp": null, + "image": "https://www.gstatic.com/images/icons/material/product/2x/adwords_64dp.png", + "title": "Setting up Mobile App Engagement Ads", + "summary": "Mobile app engagement campaigns are a great choice for advertisers focused on connecting with people who already have their app.", + "keywords": [ + "marketing", + "engagement", + "adwords" + ], + "type": "distribute", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [ + "marketing", + "engagement" + ], + "url": "https://support.google.com/adwords/answer/6167162", + "timestamp": null, + "image": "https://www.gstatic.com/images/icons/material/product/2x/adwords_64dp.png", + "title": "Best Practices for Mobile App Installs", + "summary": "Getting your mobile app discovered can be challenging. Learn how to drive downloads of your app and grow a valuable user base.", + "keywords": ["marketing", "adwords"], + "type": "distribute", + "titleFriendly": "" + }, + + + + + + + + + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://support.google.com/admob/topic/2784623", + "timestamp": null, + "image": "https://www.gstatic.com/images/icons/material/product/2x/admob_64dp.png", + "title": "Set up your AdMob account", + "summary": "Guide to setting up your account so that you get the most value.", + "keywords": ["marketing", "admob"], + "type": "distribute", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "http://analyticsacademy.withgoogle.com/mobile-app", + "timestamp": null, + "image": "https://www.gstatic.com/images/icons/material/product/2x/admob_64dp.png", + "title": "Analytics Academy for Mobile Apps", + "summary": "Learn how to use Google Analytics to make your app more discoverable and profitable.", + "keywords": ["marketing", "analytics"], + "type": "distribute", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://developers.google.com/mobile-ads-sdk/download", + "timestamp": null, + "image": "https://www.gstatic.com/images/icons/material/product/2x/admob_64dp.png", + "title": "Google Mobile Ads SDK", + "summary": "Use the Mobile Ads SDK to start showing AdMob ads in your apps.", + "keywords": ["marketing", "adwords"], + "type": "distribute", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://support.google.com/admob/", + "timestamp": null, + "image": "https://www.gstatic.com/images/icons/material/product/2x/admob_64dp.png", + "title": "AdMob Help Center", + "summary": "For setup assistance, general info, and fixes for specific problems check out the AdMob Help Center.", + "keywords": ["admob"], + "type": "distribute", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://support.google.com/admob/answer/2753860", + "timestamp": null, + "image": "https://www.gstatic.com/images/icons/material/product/2x/admob_64dp.png", + "title": "AdMob Policy Guidelines", + "summary": "Learn about best practices for displaying AdMob ads in your apps to maximize revenue.", + "keywords": ["admob"], + "type": "distribute", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": ["appindexing", "search", "getusers"], + "url": "https://developers.google.com/app-indexing/", + "timestamp": 1383243492000, + "image": "https://www.gstatic.com/images/icons/material/product/2x/search_64dp.png", + "title": "Set Up App Indexing", + "summary": "Learn more about how Google Search can help users discover your app, along with other ways you can integrate with Google Search.", + "keywords": ["search"], + "type": "guide", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": ["appindexing", "search", "getusers"], + "url": "https://developers.google.com/app-indexing/webmasters/details", + "timestamp": null, + "image": "https://www.gstatic.com/images/icons/material/product/2x/search_64dp.png", + "title": "Verify and Create Deep Links", + "summary": "Index your app today by adding deep links and verifying its official web site to ensure it starts appearing in Google Search results.", + "keywords": ["search"], + "type": "distribute", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [ + "appindexing", + "search", + "getusers", + ], + "url": "https://support.google.com/admob/answer/2753860", + "timestamp": null, + "image": "https://www.gstatic.com/images/icons/material/product/2x/search_64dp.png", + "title": "Drive use with Google Search", + "summary": "More about how app indexing and deep links can drive users directly to the content in your app. ", + "keywords": [], + "type": "distribute", + "titleFriendly": "" + }, + // TODO remove this? + { "title":"Android Wear Materials", "titleFriendly":"", - "summary":"You may use these materials without restriction to facilitate your app design and implementation. Drag and drop your way to beautifully designed Android apps. The stencils feature the rich typography, colors, interactive controls, and icons found throughout…", + "summary":"Drag and drop your way to beautifully designed Android Wear apps.", "url":"design/downloads/index.html#Wear", "group":"", "keywords": ["icons","stencils","color swatches"], @@ -2264,6 +2451,114 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "type":"design" }, { + "title":"UX Design for Mobile Developers", + "titleFriendly":"", + "summary":"Learn how to design a 5-star app.", + "url":"https://www.udacity.com/course/ux-design-for-mobile-developers--ud849", + "group":"", + "keywords": ["mobile","ux","design"], + "tags": ["courses"], + "image":"images/cards/course-ud849.jpg", + "lang":"en", + "type":"online course" + }, + { + "title":"Developing Android Apps", + "titleFriendly":"", + "summary":"Learn Android and build an app!", + "url":"https://www.udacity.com/course/developing-android-apps--ud853", + "group":"", + "keywords": ["start","firstapp","sdk"], + "tags": ["courses"], + "image":"images/cards/course-ud853.jpg", + "lang":"en", + "type":"online course" + }, + { + "title":"Android Performance", + "titleFriendly":"", + "summary":"Optimize your apps for speed and usability.", + "url":"https://www.udacity.com/course/android-performance--ud825", + "group":"", + "keywords": ["performance","battery"], + "tags": ["courses"], + "image":"images/cards/course-ud825.png", + "lang":"en", + "type":"online course" + }, + { + "title":"Watch Faces for Android Wear", + "titleFriendly":"", + "summary":"Watch faces let you customize the most prominent UI feature of Android wearables. The API is simple enough for rapid development and flexible enough to build something awesome.", + "url":"https://www.youtube.com/watch?v=AK38PJZmIW8&list=PLWz5rJ2EKKc-kIrPiq098QH9dOle-fLef", + "group":"", + "keywords": ["wear", "wearable", "watch face"], + "tags": [], + "image":"http://i1.ytimg.com/vi/AK38PJZmIW8/maxresdefault.jpg", + "lang":"en", + "type":"video" + }, + { + "title":"Android Support Library", + "titleFriendly":"", + "summary":"These essential components help you build a great app that works on the huge variety of Android devices, faster.", + "url":"https://www.youtube.com/watch?v=3PIc-DuEU2s&list=PLWz5rJ2EKKc9e0d55YHgJFHXNZbGHEXJX", + "group":"", + "keywords": ["support", "compatibility"], + "tags": [], + "image":"http://i1.ytimg.com/vi/3PIc-DuEU2s/maxresdefault.jpg", + "lang":"en", + "type":"Video" + }, + { + "title":"Consistent Design with the AppCompat Support Library", + "titleFriendly":"", + "summary":"Getting a great looking app doesn't have to be hard: AppCompat, part of the Android Support Library, gives you a consistent design baseline that works on all Android 2.1 or higher devices.", + "url":"https://www.youtube.com/watch?v=5Be2mJzP-Uw&list=PLWz5rJ2EKKc9e0d55YHgJFHXNZbGHEXJX", + "group":"", + "keywords": ["support", "compatibility","design-code"], + "tags": [], + "image":"http://i1.ytimg.com/vi/5Be2mJzP-Uw/maxresdefault.jpg", + "lang":"en", + "type":"Video" + }, + { + "title":"Introducing Gradle", + "titleFriendly":"", + "summary":"Android Studio uses an entirely new and flexible Gradle-based build system. You will be able to create multiple build variants for a single project, manage library dependencies and always be sure that your application builds correctly across different environments.", + "url":"https://www.youtube.com/watch?v=cD7NPxuuXYY&list=PLWz5rJ2EKKc8I9gHTMh5yKkwRRGE8BjbQ", + "group":"", + "keywords": ["tools", "studio","gradle"], + "tags": [], + "image":"http://i1.ytimg.com/vi/cD7NPxuuXYY/maxresdefault.jpg", + "lang":"en", + "type":"Video" + }, + { + "title":"Android Studio Layout Editor", + "titleFriendly":"", + "summary":"Android Studio includes a rich, visual layout editor that helps developers create better user interfaces. It eliminates the need to deploy the APK on a real device with each change, making iterations faster and helping eliminate common errors earlier in the development process.", + "url":"https://www.youtube.com/watch?v=JLLnhwtDoHw&list=PLWz5rJ2EKKc8I9gHTMh5yKkwRRGE8BjbQ", + "group":"", + "keywords": ["tools", "studio","layout"], + "tags": [], + "image":"http://i1.ytimg.com/vi/JLLnhwtDoHw/maxresdefault.jpg", + "lang":"en", + "type":"Video" + }, + { + "title":"Debugging and testing in Android Studio", + "titleFriendly":"", + "summary":"Learn about new debugger features in Android Studio 1.2: value inlining, quick access to referring objects and a Java .class decompiler, just to name a few. See some new tools and views that let you monitor the CPU and memory performance of your app from within the IDE. ", + "url":"https://www.youtube.com/watch?v=2I6fuD20qlY&list=PLWz5rJ2EKKc8I9gHTMh5yKkwRRGE8BjbQ", + "group":"", + "keywords": ["tools", "studio","debugging","profiling","performance"], + "tags": [], + "image":"http://i1.ytimg.com/vi/2I6fuD20qlY/maxresdefault.jpg", + "lang":"en", + "type":"Video" + }, + { "tags": [ "android", "developerstory", diff --git a/docs/html/preview/data-binding/guide.jd b/docs/html/preview/data-binding/guide.jd new file mode 100644 index 0000000..49b690f --- /dev/null +++ b/docs/html/preview/data-binding/guide.jd @@ -0,0 +1,908 @@ +page.title=Data Binding Guide + +@jd:body +<p>Data Binding allows you write declarative layouts and minimize the glue code +that is necessary to bind your application logic and layouts.</p> + + +<h2 id=build_environment>Build Environment</h2> + + +<p><strong>Setting Up Work Environment:</strong></p> + +<p>Data Binding EAP only supports gradle.</p> + +<p>To set up your application, unzip the provided bundle to a location. It has 3 +sections</p> + +<ul> + <li> <em>maven-repo:</em> which keeps the data-binding libraries + <li> <em>samples:</em> Sample applications + <li> <em>databinding.properties:</em> Properties file that can be used to integrate with your app +</ul> + +<p>Add the following section to the project’s build.gradle file (not the module's +build.gradle) and replace <code><BUNDLE_FOLDER> </code>with the absolute path of the bundle that you’ve unzipped in the previous step.</p> + +<pre class=prettyprint> +buildscript { + <strong>def </strong>eapFolder = '<BUNDLE_FOLDER>' +<strong> def </strong>Properties props = <strong>new </strong>Properties() + props.load(<strong>new </strong>FileInputStream(<strong>"</strong>${eapFolder}<strong>/databinding.properties"</strong>)) + props.mavenRepoDir = <strong>"</strong>${eapFolder}<strong>/</strong>${props.mavenRepoName}<strong>" + </strong>ext.config = props + repositories { + jcenter() + maven { + url config.mavenRepoDir + } + } + dependencies { + classpath <strong>"com.android.tools.build:gradle:1.1.3" + </strong>classpath <strong>"com.android.databinding:dataBinder:</strong>${config.snapshotVersion}<strong>" +<em></strong> </em>} +} +allprojects { + repositories { + jcenter() + maven { + url config.mavenRepoDir + } + } +} +</pre> + +<p>Next, add the following lines to the <em>build.gradle</em> +file of each module that will use data-binding. The application module must +have this, even if only its libraries use data binding.</p> + +<pre class=prettyprint> +apply plugin: <strong>'com.android.databinding' +</strong>dependencies { + compile <strong>"com.android.databinding:library:</strong>${config.snapshotVersion}<strong>" +</strong> compile <strong>"com.android.databinding:baseLibrary:</strong>${config.snapshotVersion}<strong>" +</strong> compile <strong>"com.android.databinding:adapters:</strong>${config.snapshotVersion}<strong>" +</strong> provided <strong>"com.android.databinding:annotationprocessor:</strong>${config.snapshotVersion}<strong>" +</strong>} +</pre> + + +<h2 id="data_binding_layout_files">Data Binding Layout Files</h2> + + +<h3 id="writing_expressions">Writing your first data binding expressions:</h3> + +<p>Data-binding layout files are slightly different and start with a root tag of +<strong>layout</strong> followed by a <strong>data</strong> element and a +<strong>view</strong> root element. This view element is what your root would +be in a non-binding layout file.A sample file looks like this:</p> + +<pre class=prettyprint> +<em><?<strong></em>xml version="1.0" encoding="utf-8"<em></strong>?> +</em><<strong>layout xmlns:android="http://schemas.android.com/apk/res/android"</strong>> + <<strong>data</strong>> + <<strong>variable name="user" type="com.example.User"</strong>/> + </<strong>data</strong>> + <<strong>LinearLayout + android:orientation="vertical" + android:layout_width="match_parent" + android:layout_height="match_parent"</strong>> + <<strong>TextView android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:text="@{user.firstName}"</strong>/> + <<strong>TextView android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:text="@{user.lastName}"</strong>/> + </<strong>LinearLayout</strong>> +</<strong>layout</strong>> +</pre> + +<p>The user <strong>variable</strong> within <strong>data</strong> describes a property that may be used within this layout.</p> + +<pre class=prettyprint> +<<strong>variable name="user" type="com.example.User"</strong>/> +</pre> + +<p>Expressions within the layout are written in the attribute properties using the +“<code>@{}</code>” syntax. Here, the TextView’s text is set to the firstName property of user:</p> +<pre class=prettyprint> +<<strong>TextView android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:text="@{user.firstName}"</strong>/> +</pre> + + +<h3 id="data_object">Data Object</h3> + +<p>Let’s assume for now that you have a plain-old Java object (POJO) for User:</p> +<pre class=prettyprint> +<strong>public class </strong>User { + <strong>public final </strong>String <strong>firstName</strong>; + <strong>public final </strong>String <strong>lastName</strong>; + <strong>public </strong>User(String firstName, String lastName) { + <strong>this</strong>.<strong>firstName </strong>= firstName; + <strong>this</strong>.<strong>lastName </strong>= lastName; + } +} +</pre> + +<p>This type of object has data that never changes. It is common in applications +to have data that is read once and never changes thereafter. It is also +possible to use a JavaBeans objects:</p> +<pre class=prettyprint> +<strong>public class </strong>User { + <strong>private final </strong>String <strong>firstName</strong>; + <strong>private final </strong>String <strong>lastName</strong>; + <strong>public </strong>User(String firstName, String lastName) { + <strong>this</strong>.<strong>firstName </strong>= firstName; + <strong>this</strong>.<strong>lastName </strong>= lastName; + } + <strong>public </strong>String getFirstName() { + <strong>return this</strong>.<strong>firstName</strong>; + } + <strong>public </strong>String getLastName() { + <strong>return this</strong>.<strong>lastName</strong>; + } +} +</pre> + +<p>From the perspective of data binding, these two classes are equivalent. The +expression <strong><code>@{user.lastName}</code></strong> used for the TextView’s <strong><code>android:text</code></strong> attribute will access the <strong><code>firstName</code></strong> field in the former class and the <code>getFirstName()</code> method in the latter class. +</p><h3 id=binding_data>Binding Data</h3> + +<p>By default, a Binding class will be generated based on the name of the layout +file, converting it to Pascal case and suffixing “Binding” to it. The above +layout file was <code>activity_main.xml</code> so the generate class was <code>ActivityMainBinding</code>. This class holds all the bindings from the layout properties (e.g. the <code>user</code> variable) to the layout’s Views and knows how to assign values for the binding +expressions.The easiest means for creating the bindings is to do it while inflating: +</p> + +<pre class=prettyprint> +@Override +<strong>protected void </strong>onCreate(Bundle savedInstanceState) { + <strong>super</strong>.onCreate(savedInstanceState); + ActivityMainBinding binding = DataBindingUtil.<em>setContentView</em>(<strong>this</strong>, R.layout.<em><strong>main_activity</strong></em>); + User user = <strong>new </strong>User(<strong>"Test"</strong>, <strong>"User"</strong>); + binding.setUser(user); +} +</pre> + +<p>You’re done! Run the application and you’ll see Test User in the UI.Alternatively, you can get the view via: +</p><pre class=prettyprint> +MainActivityBinding binding = MainActivityBinding.<em>inflate</em>(getLayoutInflater()); +</pre> + +<p>If you are using data binding items inside a ListView or RecyclerView adapter, +you may prefer to use: +</p><pre class=prettyprint> +ListItemBinding binding = ListItemBinding.inflate(layoutInflater, viewGroup, +false); +//or +ListItemBinding binding = DataBindingUtil.<em>inflate</em>(layoutInflater, R.layout.<em><strong>list_item</strong></em>, viewGroup, <strong>false</strong>); +</pre> + + +<h2 id=layout_details>Layout Details</h2> + + +<h3 id=imports>Imports</h3> + +<p>Zero or more <strong><code>import</code></strong> elements may be used inside the <strong><code>data</code></strong> element. These allow easy reference to classes inside your layout file, just +like in Java. +</p><pre class=prettyprint> +<<strong>data</strong>> + <<strong>import type="android.view.View"</strong>/> +</<strong>data</strong>> +</pre> + +<p>Now, View may be used within your binding expression: +</p><pre class=prettyprint> +<<strong>TextView + android:text="@{user.lastName}" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:visibility="@{user.isAdult ? View.VISIBLE : View.GONE}"</strong>/> +</pre> + +<p>When there are class name conflicts, one of the classes may be renamed to an +“alias:”</p> +<pre class=prettyprint> +<<strong>import type="android.view.View"</strong>/> +<<strong>import type="com.example.real.estate.View" + alias="Vista"</strong>/> +</pre> + +<p>Now, <strong><code>Vista</code></strong> may be used to reference the <code>com.example.real.estate.View</code> and <strong><code>View</code></strong> may be used to reference <code>android.view.View </code>within the layout file.Imported types may be used as type references in variables and expressions:</p> +<pre class=prettyprint> +<<strong>data</strong>> + <<strong>import type="com.example.User"</strong>/> + <<strong>import type="java.util.List"</strong>/> + <<strong>variable name="user" type="User"</strong>/> + <<strong>variable name="userList" type="List<User>"</strong>/> +</<strong>data</strong>> +… +<<strong>TextView + android:text="@{((User)(user.connection)).lastName}" + android:layout_width="wrap_content" + android:layout_height="wrap_content"</strong>/> +</pre> + +<p>Imported types may also be used when referencing static fields and methods in +expressions:</p> +<pre class=prettyprint> +<<strong>data</strong>> + <<strong>import type="com.example.MyStringUtils"</strong>/> + <<strong>variable name="user" type="com.example.User"</strong>/> +</<strong>data</strong>> +… +<<strong>TextView + android:text="@{MyStringUtils.capitalize(user.lastName)}" + android:layout_width="wrap_content" + android:layout_height="wrap_content"</strong>/> +</pre> + +<p>Just as in Java, <code>java.lang.*</code> is imported automatically.</p> +<h3 id=variables>Variables</h3> + +<p>Any number of <strong><code>variable</code></strong> elements may be used inside the <strong><code>data</code></strong> element. Each <strong><code>variable</code></strong> element describes a property that may be set on the layout to be used in +binding expressions within the layout file.</p> +<pre class=prettyprint> +<<strong>data</strong>> + <<strong>import type="android.graphics.drawable.Drawable"</strong>/> + <<strong>variable name="user" type="com.example.User"</strong>/> + <<strong>variable name="image" type="Drawable"</strong>/> + <<strong>variable name="note" type="String"</strong>/> +</<strong>data</strong>> +</pre> + +<p>The variable types are inspected at compile time, so if a variable implements <a href="#observable_objects">Observable</a>, <a href="#observable_collections">observable collection</a>, that should be reflected in the type. If the variable is a base class or + interface that does not implement the Observable* interface, the variables will <strong>not be</strong> observed!</p> + +<p>When there are different layout files for various configurations (e.g. +landscape or portrait), the variables will be combined. There must not be +conflicting variable definitions between these layout files.</p> + +<p>The generated binding class will have a setter and getter for each of the +described variables. The variables will take the default Java values until the +setter is called — <code>null</code> for reference types, <code>0</code> for <code>int</code>, <code>false</code> for <code>boolean</code>, etc.</p> + +<h3 id=custom_binding_class_names>Custom Binding Class Names</h3> + +<p>By default, a Binding class is generated based on the name of the layout file, +starting it with upper-case, removing underscores ( _ ) and capitalizing the +following letter and then suffixing “Binding”. This class will be placed in a +databinding package under the module package. For example, the layout file <code>contact_item.xml</code> will generate <code>ContactItemBinding</code>. If the module package is <code>com.example.my.app</code>, then it will be placed in <code>com.example.my.app.databinding</code>.</p> + +<p>Binding classes may be renamed or placed in different packages by adjusting the <strong><code>class</code></strong> attribute of the <strong><code>data</code></strong> element. For example:</p> +<pre class=prettyprint> +<<strong>data class="ContactItem"</strong>> + ... +</<strong>data</strong>> +</pre> + +<p>This generates the binding class as <code>ContactItem</code> in the databinding package in the module package. If the class should be +generated in a different package within the module package, it may be prefixed +with “.”:</p> +<pre class=prettyprint> +<<strong>data class=".ContactItem"</strong>> + ... +</<strong>data</strong>> +</pre> + +In this case, <code>ContactItem</code> is generated in the module package directly.Any package may be used if the full package is provided: +<pre class=prettyprint> +<<strong>data class="com.example.ContactItem"</strong>> + ... +</<strong>data</strong>> +</pre> + + +<h3 id=includes>Includes</h3> + +<p>Variables may be passed into an included layout's binding from the containing +layout by using the application namespace and the variable name in an +attribute:</p> +<pre class=prettyprint> +<em><?<strong></em>xml version="1.0" encoding="utf-8"<em></strong>?> +</em><<strong>layout xmlns:android="http://schemas.android.com/apk/res/android" +</strong> <strong> xmlns:bind="http://schemas.android.com/apk/res-auto"</strong>> + <<strong>data</strong>> + <<strong>variable name="user" type="com.example.User"</strong>/> + </<strong>data</strong>> + <<strong>LinearLayout + android:orientation="vertical" + android:layout_width="match_parent" + android:layout_height="match_parent"</strong>> + <<strong>include layout="@layout/name" + bind:user="@{user}"</strong>/> + <<strong>include layout="@layout/contact" + bind:user="@{user}"</strong>/> + </<strong>LinearLayout</strong>> +</<strong>layout</strong>> +</pre> + +<p>Here, there must be a <code>user</code> variable in both the <code>name.xml </code>and <code>contact.xml </code>layout files.</p> +<h3 id=expression_language>Expression Language</h3> + + +<h4 id=common_features>Common Features</h4> + +<p>The expression language looks a lot like a Java expression. These are the same:</p> +<ul> + <li> Mathematical <strong><code>+ - / * %</code></strong> + <li> String concatenation <strong><code>+</code></strong> + <li> <code>L</code>ogical <strong><code>&& ||</code></strong> + <li> Binary <strong><code>&</code> <code>|</code> <code>^</code></strong> + <li> Unary <strong><code>+ - ! ~</code></strong> + <li> Shift <strong><code>>> >>> <<</code></strong> + <li> Comparison <strong><code>== > < >= <=</code></strong> + <li> <strong><code>instanceof</code></strong> + <li> Grouping <strong><code>()</code></strong> + <li> Literals - character, String, numeric, <strong><code>null</code></strong> + <li> Cast + <li> Method calls + <li> Field access + <li> Array access <strong><code>[]</code></strong> + <li> Ternary operator <strong><code>?:</code></strong> +</ul> +<p>Examples:</p> +<pre class=prettyprint> +<strong>android:text="@{String.valueOf(index + 1)}" +android:visibility="@{age < 13 ? View.GONE : View.VISIBLE}" +android:transitionName='@{"image_" + id}'</strong> +</pre> + + +<h4 id=missing_operations>Missing Operations</h4> + +<p>A few operations are missing from the expression syntax that you can use in +Java.</p> +<ul> + <li> <strong><code>this</code></strong> + <li> <strong><code>super</code></strong> + <li> <strong><code>new</code></strong> + <li> Explicit generic invocation +</ul> + +<h4 id=null_coalescing_operator>Null Coalescing Operator</h4> + +<p>The null coalescing operator (<strong><code>??</code></strong>) chooses the left operand if it is not null or the right if it is null.</p> +<pre class=prettyprint> +<strong>android:text="@{user.displayName ?? user.lastName}"</strong> +</pre> + +<p>This is functionally equivalent to:</p> +<pre class=prettyprint> +<strong>android:text="@{user.displayName != null ? user.displayName : user.lastName}"</strong> +</pre> + + +<h4 id=property_reference>Property Reference</h4> + +<p>The first was already discussed in the <a href="#writing_your_first_data_binding_expressions">Writing your first data binding expressions</a> above: short form JavaBean references. When an expression references a +property on a class, it uses the same format for fields, getters, and +ObservableFields.</p> +<pre class=prettyprint> +<strong>android:text="@{user.lastName}"</strong> +</pre> + + +<h4 id=collections>Collections</h4> + +<p>Common collections: arrays, lists, sparse lists, and maps, may be accessed +using the <code>[]</code> operator for convenience.</p> +<pre class=prettyprint> +<<strong>data</strong>> + <<strong>import type="android.util.SparseArray"</strong>/> + <<strong>import type="java.util.Map"</strong>/> + <<strong>import type="java.util.List"</strong>/> + <<strong>variable name="list" type="List<String>"</strong>/> + <<strong>variable name="sparse" type="SparseArray<String>"</strong>/> + <<strong>variable name="map" type="Map<String, String>"</strong>/> + <<strong>variable name="index" type="int"</strong>/> + <<strong>variable name="key" type="String"</strong>/> +</<strong>data</strong>> +… +<strong>android:text="@{list[index]}" +</strong>… +<strong>android:text="@{sparse[index]}" +</strong>… +<strong>android:text="@{map[key]}" +</strong> +</pre> + + +<h4 id=string_literals>String Literals</h4> + +<p>When using single quotes around the attribute value, it is easy to use double +quotes in the expression:</p> +<pre class=prettyprint> +<strong>android:text='@{map["firstName"]}'</strong> +</pre> + +<p>It is also possible to use double quotes to surround the attribute value. When +doing so, String literals should either use the " or back quote (`).</p> +<pre class=prettyprint> +<strong>android:text="@{map[`firstName`}" +android:text="@{map["firstName"]}"</strong> +</pre> + + +<h4 id=resources>Resources</h4> + +<p>It is possible to access resources as part of expressions using the normal +syntax:</p> +<pre class=prettyprint> +<strong>android:padding="@{large? @dimen/largePadding : @dimen/smallPadding}"</strong> +</pre> + +<p>Format strings and plurals may be evaluated by providing parameters:</p> +<pre class=prettyprint> +<strong>android:text="@{@string/nameFormat(firstName, lastName)}" +android:text="@{@plurals/banana(bananaCount)}"</strong> +</pre> + +<p>Some resources require explicit type evaluation.</p> + +<table> + <tr> + <th>Type</th> + <th>Normal Reference</th> + <th>Expression Reference</th> + </tr> + <tr> + <td> +<pre class=prettyprint> +String[]</td> + <td> +@array</td> + <td> +@stringArray</td> + </tr> + <tr> + <td> +int[]</td> + <td> +@array</td> + <td> +@intArray</td> + </tr> + <tr> + <td> +TypedArray</td> + <td> +@array</td> + <td> +@typedArray</td> + </tr> + <tr> + <td> +Animator</td> + <td> +@animator</td> + <td> +@animator</td> + </tr> + <tr> + <td> +StateListAnimator</td> + <td> +@animator</td> + <td> +@stateListAnimator</td> + </tr> + <tr> + <td> +</pre> + +color <code>int</code></td> + <td> +<pre class=prettyprint> +@color</td> + <td> +@color</td> + </tr> + <tr> + <td> +ColorStateList</td> + <td> +@color</td> + <td> +@colorStateList</td> + </tr> +</table> + +</pre> + + +<h2 id="data_objects">Data Objects</h2> + + +<p>Any plain old Java object (POJO) may be used for data binding, but modifying a +POJO will not cause the UI to update. The real power of data binding can be +used by giving your data objects the ability to notify when data changes. There +are three different data change notification mechanisms, <code>Observable </code>objects, <code>ObservableField</code>s, and <code>observable collections</code>.</p> + +<p>When one of these observable data object is bound to the UI and a property of +the data object changes, the UI will be updated automatically.</p> + +<h3 id=observable_objects>Observable Objects</h3> + + +<p>A class implementing <code>android.databinding.Observable</code> interface will allow the binding to attach a single listener to a bound object +to listen for changes of all properties on that object.</p> + +<p>The <code>Observable</code> interface has a mechanism to add and remove listeners, but notifying is up to +the developer. To make development easier, a base class, <code>BaseObservable,</code> was created to implement the listener registration mechanism. The data class +implementer is still responsible for notifying when the properties change. This +is done by assigning an <code>Bindable </code>annotation to the getter and notifying in the setter.</p> + +<pre class=prettyprint> +<strong>private static class </strong>User <strong>extends </strong>BaseObservable { + <strong>private </strong>String <strong>firstName</strong>; + <strong>private </strong>String <strong>lastName</strong>; + @Bindable + <strong>public </strong>String getFirstName() { + <strong>return this</strong>.<strong>firstName</strong>; + } + @Bindable + <strong>public </strong>String getFirstName() { + <strong>return this</strong>.<strong>lastName</strong>; + } + <strong>public void </strong>setFirstName(String firstName) { + <strong>this</strong>.<strong>firstName </strong>= firstName; + notifyPropertyChanged(BR.firstName); + } + <strong>public void </strong>setLastName(String lastName) { + <strong>this</strong>.<strong>lastName </strong>= lastName; + notifyPropertyChanged(BR.lastName); + } +} +</pre> + +<p>The <code>Bindable </code>annotation generates an entry in the BR class file during compilation. The BR +class file will be generated in the module package.If the base class for data classes cannot be changed, the <code>Observable</code> interface may be implemented using the convenient <code>PropertyChangeRegistry</code> to store and notify listeners efficiently.</p> + +<h3 id=observablefields>ObservableFields</h3> + +<p>A little work is involved in creating Observable classes, so developers who +want to save time or have few properties may use ObservableFields. +ObservableFields are self-contained observable objects that have a single +field. There are versions for all primitive types and one for reference types. +To use, create a public final field in the data class:</p> +<pre class=prettyprint> +<strong>private static class </strong>User <strong>extends </strong>BaseObservable { + <strong>public final </strong>ObservableField<String> <strong>firstName </strong>= + <strong>new </strong>ObservableField<>(); + <strong>public final </strong>ObservableField<String> <strong>lastName </strong>= + <strong>new </strong>ObservableField<>(); + <strong>public final </strong>ObservableInt <strong>age </strong>= <strong>new </strong>ObservableInt(); +} +</pre> + +<p>That's it! To access the value, use the set and get accessor methods:</p> +<pre class=prettyprint> +user.<strong>firstName</strong>.set(<strong>"Google"</strong>); +<strong>int </strong>age = user.<strong>age</strong>.get(); +</pre> + + +<h3 id=observable_collections>Observable Collections</h3> + +<p>Some applications use more dynamic structures to hold data. Observable + collections allow keyed access to these data objects.ObservableArrayMap is useful when the key is a reference type, such as String.</p> + +<pre class=prettyprint> +ObservableArrayMap<String, Object> user = <strong>new </strong>ObservableArrayMap<>(); +user.put(<strong>"firstName"</strong>, <strong>"Google"</strong>); +user.put(<strong>"lastName"</strong>, <strong>"Inc."</strong>); +user.put(<strong>"age"</strong>, 17); +</pre> + +In the layout, the map may be accessed through the String keys: +<pre class=prettyprint> +<<strong>data</strong>> + <<strong>import type="android.databinding.ObservableMap"</strong>/> + <<strong>variable name="user" type="ObservableMap<String, Object>"</strong>/> +</<strong>data</strong>> +… +<<strong>TextView + android:text='@{user["lastName"]}' + android:layout_width="wrap_content" + android:layout_height="wrap_content"</strong>/> +<<strong>TextView + android:text='@{String.valueOf(1 + (Integer)user["age"])}' + android:layout_width="wrap_content" + android:layout_height="wrap_content"</strong>/> +</pre> + +<p>ObservableArrayList is useful when the key is an integer:</p> +<pre class=prettyprint> +ObservableArrayList<Object> user = <strong>new </strong>ObservableArrayList<>(); +user.add(<strong>"Google"</strong>); +user.add(<strong>"Inc."</strong>); +user.add(17); +</pre> + +<p>In the layout, the list may be accessed through the indices:</p> +<pre class=prettyprint> +<<strong>data</strong>> + <<strong>import type="android.databinding.ObservableList"</strong>/> + <<strong>import type="com.example.my.app.Fields"</strong>/> + <<strong>variable name="user" type="ObservableList<Object>"</strong>/> +</<strong>data</strong>> +… +<<strong>TextView + android:text='@{user[Fields.LAST_NAME]}' + android:layout_width="wrap_content" + android:layout_height="wrap_content"</strong>/> +<<strong>TextView + android:text='@{String.valueOf(1 + (Integer)user[Fields.AGE])}' + android:layout_width="wrap_content" + android:layout_height="wrap_content"</strong>/> +</pre> + + +<h2 id=generated_binding>Generated Binding</h2> + +<p>The generated binding class links the layout variables with the Views within +the layout. As discussed earlier, the name and package of the Binding may be <a href="#custom_binding_class_names">customized</a>. The Generated binding classes all extend <code>android.databinding.ViewDataBinding</code>.</p> +<h3 id=creating>Creating</h3> + +<p>The binding should be created soon after inflation to ensure that the View +hierarchy is not disturbed prior to binding to the Views with expressions +within the layout. There are a few ways to bind to a layout. The most common is +to use the static methods on the Binding class.The inflate method inflates the View hierarchy and binds to it all it one step. +There are versions that attach the View to its parent and that inflate without +attaching.</p> +<pre class=prettyprint> +MyLayoutBinding binding = MyLayoutBinding.<em>inflate</em>(<strong>this</strong>); +MyLayoutBinding binding = MyLayoutBinding.<em>inflate</em>(viewGroup); +</pre> + +<p>If the layout was inflated using a different mechanism, it may be bound +separately:</p> +<pre class=prettyprint> +MyLayoutBinding binding = MyLayoutBinding.<em>bind</em>(viewRoot); +</pre> + +<p>Sometimes the binding cannot be known in advance. In such cases, the binding +can be created using the DataBindingUtil class:</p> +<pre class=prettyprint> +ViewDataBinding binding = DataBindingUtil.<em>inflate</em>(context, layoutId, + parent, attachToParent); +ViewDataBinding binding = DataBindingUtil.<em>bindTo</em>(viewRoot, layoutId); +</pre> + + +<h3 id=views_with_ids>Views With IDs</h3> + +<p>A public final field will be generated for each View with an ID in the layout. +The binding does a single pass on the View hierarchy, extracting the Views with +IDs. This mechanism can be faster than calling findViewById for several Views. For example:</p> +<pre class=prettyprint> +<<strong>layout xmlns:android="http://schemas.android.com/apk/res/android"</strong>> + <<strong>data</strong>> + <<strong>variable name="user" type="com.example.User"</strong>/> + </<strong>data</strong>> + <<strong>LinearLayout + android:orientation="vertical" + android:layout_width="match_parent" + android:layout_height="match_parent"</strong>> + <<strong>TextView android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:text="@{user.firstName}" +</strong> <strong>android:id="@+id/firstName"</strong>/> + <<strong>TextView android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:text="@{user.lastName}"</strong> <strong>android:id="@+id/lastName"</strong>/> + </<strong>LinearLayout</strong>> +</<strong>layout</strong>> +</pre> + +Will generate a binding class with: +<pre class=prettyprint> +<strong>public final </strong>TextView <strong>firstName</strong>; +<strong>public final </strong>TextView <strong>lastName</strong>; +</pre> + +<p>IDs are not nearly as necessary as without data binding, but there are still +some instances where access to Views are still necessary from code.</p> +<h3 id=variables>Variables</h3> + +<p>Each variable will be given a accessor methods.</p> +<pre class=prettyprint> +<<strong>data</strong>> + <<strong>import type="android.graphics.drawable.Drawable"</strong>/> + <<strong>variable name="user" type="com.example.User"</strong>/> + <<strong>variable name="image" type="Drawable"</strong>/> + <<strong>variable name="note" type="String"</strong>/> +</<strong>data</strong>> +</pre> + +<p>will generate setters and getters in the binding:</p> +<pre class=prettyprint> +<strong>public abstract </strong>com.example.User getUser(); +<strong>public abstract void </strong>setUser(com.example.User user); +<strong>public abstract </strong>Drawable getImage(); +<strong>public abstract void </strong>setImage(Drawable image); +<strong>public abstract </strong>String getNote(); +<strong>public abstract void </strong>setNote(String note); +</pre> + + +<h3 id=viewstubs>ViewStubs</h3> + +<p>ViewStubs are a little different from normal Views. They start off invisible +and when they either are made visible or are explicitly told to inflate, they +replace themselves in the layout by inflating another layout.</p> + +<p>Because the ViewStub essentially disappears from the View hierarchy, the View +in the binding object must also disappear to allow collection. Because the +Views are final, a ViewStubProxy object takes the place of the ViewStub, giving +the developer access to the ViewStub when it exists and also access to the +inflated View hierarchy when the ViewStub has been inflated.</p> + +<p>When inflating another layout, a binding must be established for the new +layout. Therefore, the ViewStubProxy must listen to the ViewStub's +OnInflateListener and establish the binding at that time. Since only one can +exist, the ViewStubProxy allows the developer to set an OnInflateListener on it +that it will call after establishing the binding.</p> + +<h3 id=advanced_binding>Advanced Binding</h3> + + +<h4 id=dynamic_variables>Dynamic Variables</h4> + +<p>At times, the specific binding class won't be known. For example, a +RecyclerView Adapter operating against arbitrary layouts won't know the +specific binding class. It still must assign the binding value during the +onBindViewHolder.</p> + +<p>In this example, all layouts that the RecyclerView binds to have an "item" +variable. The BindingHolder has a getBinding method returning the <code>ViewDataBinding</code> base.</p> +<pre class=prettyprint> +<strong>public void </strong>onBindViewHolder(BindingHolder holder, <strong>int </strong>position) { + <strong>final </strong>T item = <strong>mItems</strong>.get(position); + holder.getBinding().setVariable(BR.item, item); + holder.getBinding().executePendingBindings(); +} +</pre> + + +<h4 id=immediate_binding>Immediate Binding</h4> + +<p>When a variable or observable changes, the binding will be scheduled to change +before the next frame. There are times, however, when binding must be executed +immediately. To force execution, use the executePendingBindings() method.</p> +<h2 id=attribute_setters>Attribute Setters</h2> + +<p>Whenever a bound value changes, the generated binding class must call a setter +method on the View with the binding expression. The data binding framework has +ways to customize which method to call to set the value.</p> +<h3 id=automatic_setters>Automatic Setters</h3> + +For an attribute, data binding tries to find the method setAttribute. The +namespace for the attribute does not matter, only the attribute name itself. + +<p>For example, an expression associated with TextView's attribute <strong><code>android:text</code></strong> will look for a setText(String). If the expression returns an int, data +binding will search for a setText(int) method. Be careful to have the +expression return the correct type, casting if necessary.Note that data binding will work even if no attribute exists with the given +name. You can then easily "create" attributes for any setter by using data +binding. For example, support DrawerLayout doesn't have any attributes, but +plenty of setters. You can use the automatic setters to use one of these.</p> +<pre class=prettyprint> +<android.support.v4.widget.<strong>DrawerLayout + android:layout_width="wrap_content" + android:layout_height="wrap_content" + app:scrimColor="@{@color/scrim}" + app:drawerListener="@{fragment.drawerListener}"/></strong> +</pre> + + +<h3 id=renamed_setters>Renamed Setters</h3> + +<p>Some attributes have setters that don't match by name. For these methods, an +attribute may be associated with the setter through BindingMethods annotation. +This must be associated with a class and contains BindingMethod annotations, +one for each renamed method. For example, the <strong><code>android:tint</code></strong> attribute is really associated with setImageTintList, not setTint.</p> +<pre class=prettyprint> +@BindingMethods({ + @BindingMethod(type = <strong>"android.widget.ImageView"</strong>, + attribute = <strong>"android:tint"</strong>, + method = <strong>"setImageTintList"</strong>), +}) +</pre> + +<p>It is unlikely that developers will need to rename setters; the android +framework attributes have already been implemented.</p> +<h3 id=custom_setters>Custom Setters</h3> + +<p>Some attributes need custom binding logic. For example, there is no associated +setter for the <strong><code>android:paddingLeft</code></strong> attribute. Instead, setPadding(left, top, right, bottom) exists. A static +binding adapter method with the BindingAdapter annotation allows the developer +to customize how a setter for an attribute is called.</p> + +<p>The android attributes have already had BindingAdapters created. For example, +here is the one for paddingLeft:</p> +<pre class=prettyprint></p> +@BindingAdapter(<strong>"android:paddingLeft"</strong>) +<strong>public static void </strong>setPaddingLeft(View view, <strong>int </strong>padding) { + view.setPadding(padding, + view.getPaddingTop(), + view.getPaddingRight(), + view.getPaddingBottom()); +} +</pre> + +<p>Binding adapters are useful for other types of customization. For example, a + custom loader can be called off-thread to load an image.</p> + +<p>Developer-created binding adapters will override the data binding default +adapters when there is a conflict.</p> + +<p>You can also have adapters that receive multiple parameters. </p> +<pre class=prettyprint> +@BindingAdapter(attributes = {<strong>"bind:imageUrl"</strong>, <strong>"bind:error"</strong>}) +<strong>public static void </strong>loadImage(ImageView view, String url, Drawable error) { + Picasso.<em>with</em>(view.getContext()).load(url).error(error).into(view); +} +</pre> + +<p>This adapter will be called if both <strong>imageUrl </strong>and <strong>error </strong>are used for an ImageView and <em>imageUrl </em>is a string and <em>error</em> is a drawable.</p> +<ul> + <li> Custom namespaces are ignore during matching. + <li> You can also write adapters for android namespace. +</ul> + +<pre class=prettyprint> +<ImageView app:imageUrl=“@{venue.imageUrl}” +app:error=“@{@drawable/venueError}”/> +</pre> + + +<h2 id=converters>Converters</h2> + + +<h3 id=object_conversions>Object Conversions</h3> + +<p>When an Object is returned from a binding expression, a setter will be chosen +from the automatic, renamed, and custom setters. The Object will be cast to a +parameter type of the chosen setter.</p><p>This is a convenience for those using ObservableMaps to hold data. for example:</p> +<pre class=prettyprint> +<<strong>TextView + android:text='@{userMap["lastName"]}' + android:layout_width="wrap_content" + android:layout_height="wrap_content"</strong>/> +</pre> + +<p>The userMap returns an Object and that Object will be automatically cast to +parameter type found in the setter <code>setText(CharSequence)</code>. When there may be confusion about the parameter type, the developer will need +to cast in the expression.</p> +<h3 id=custom_conversions>Custom Conversions</h3> + +<p>Sometimes conversions should be automatic between specific types. For example, +when setting the background:</p> +<pre class=prettyprint> +<<strong>View + android:background="@{isError ? @color/red : @color/white}" + android:layout_width="wrap_content" + android:layout_height="wrap_content"</strong>/> +</pre> + +<p>Here, the background takes a <code>Drawable</code>, but the color is an integer. Whenever a <code>Drawable</code> is expected and an integer is returned, the <code>int</code> should be converted to a <code>ColorDrawable</code>. This conversion is done using a static method with a BindingConversion +annotation:</p> +<pre class=prettyprint> +@BindingConversion +<strong>public static </strong>ColorDrawable convertColorToDrawable(<strong>int </strong>color) { + <strong>return new </strong>ColorDrawable(color); +} +</pre> + +<p>Note that conversions only happen at the setter level, so it is <strong>not allowed </strong>to mix types like this:</p> +<pre class=prettyprint> +<<strong>View + android:background="@{isError ? @drawable/error : @color/white}" + android:layout_width="wrap_content" + android:layout_height="wrap_content"</strong>/> +</pre> + diff --git a/docs/html/preview/images/m-preview-timeline.png b/docs/html/preview/images/m-preview-timeline.png Binary files differnew file mode 100644 index 0000000..a065c21 --- /dev/null +++ b/docs/html/preview/images/m-preview-timeline.png diff --git a/docs/html/preview/index.html b/docs/html/preview/index.html deleted file mode 100644 index af99e2d..0000000 --- a/docs/html/preview/index.html +++ /dev/null @@ -1,372 +0,0 @@ -<!DOCTYPE html> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -<html> -<head> - - -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<meta name="viewport" content="width=970" /> - -<meta name="Description" content="Test and build your apps against the next version of Android to ensure they're ready when the platform officially launches."> -<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> -<title>Android M Developer Preview | Android Developers</title> - -<!-- STYLESHEETS --> -<link rel="stylesheet" -href="//fonts.googleapis.com/css?family=Roboto+Condensed"> -<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" - title="roboto"> -<link href="/assets/css/default.css" rel="stylesheet" type="text/css"> - - - -<!-- JAVASCRIPT --> -<script src="//www.google.com/jsapi" type="text/javascript"></script> -<script src="/assets/js/android_3p-bundle.js" type="text/javascript"></script> -<script type="text/javascript"> - var toRoot = "/"; - var metaTags = []; - var devsite = false; -</script> -<script src="/assets/js/docs.js" type="text/javascript"></script> - -<script> - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - - ga('create', 'UA-5831155-1', 'android.com'); - ga('create', 'UA-49880327-2', 'android.com', {'name': 'universal'}); // New tracker); - ga('send', 'pageview'); - ga('universal.send', 'pageview'); // Send page view for new tracker. -</script> - -</head> - -<body class="gc-documentation - -" itemscope itemtype="http://schema.org/Article"> - - -<a name="top"></a> -<div id="body-content"> -<div class="fullpage" > -<div id="jd-content"> - <div class="jd-descr" itemprop="articleBody"> - <style> -.fullpage>#footer, -#jd-content>.content-footer.wrap { - display:none; -} -</style> - -<style> -#footer { - display: none; -} -.content-footer { - display: none; -} -</style> - -<!-- -<div style="height:20px"></div> -<div id="butterbar-wrapper"> - <div id="butterbar"> - <a href="#" id="butterbar-message"> - butterbar message - </a> - </div> -</div> ---> - - <div class="landing-rest-of-page"> - <div class="landing-section" style="padding-top:60px"> - <div class="wrap"> - <div class="landing-section-header"> - <div class="landing-h1">Android M Developer Preview</div> - <div class="landing-subhead"> - Get an early look at the next release and prepare your apps for the - official platform launch. - </div> - - <img src="/preview/images/dev-prev.png" style=" margin:0px 0 0 40px" width="860px"/> - <div class="col-6" style="margin-left:660px; margin-top:-105px"> - <a href="/preview/setup-sdk.html" class="landing-button landing-primary" - style="position:absolute;z-index:100;float:right;margin-top: 0px;"> - Get Started</a> - </div> - </div> - </div> <!-- end .wrap --> - </div> <!-- end .landing-section --> - - - - <div class="landing-section landing-gray-background" - style="margin-top:-105px; padding-bottom:20px"> - <div class="wrap"> - <div class="cols"> - <div class="landing-body" style="margin-top:-80px" > - - <div class="landing-breakout cols"> - <div class="col-4"> - <p>This Feature</p> - <p class="landing-small"> - Kevin ham hock pig cupim brisket picanha, doner pork tri-tip frankfurter - leberkas turkey. - </p> - <p class="landing-small"> - <a href="/preview/api-overview.html">Learn about this feature</a> - </p> - </div> - <div class="col-4"> - <p>That Feature</p> - <p class="landing-small"> - Bacon ipsum dolor amet meatball tongue pork loin fatback, andouille shoulder - chicken picanha pig landjaeger kielbasa shankle pastrami flank meatloaf. - </p> - <p class="landing-small"> - <a href="/preview/api-overview.html">Learn about that feature</a> - </p> - </div> - <div class="col-4"> - <p style="width:230px">Another Feature</p> - <p class="landing-small"> - Landjaeger tri-tip tenderloin pork loin jowl, meatloaf t-bone kielbasa sausage - swine spare ribs drumstick corned beef ham. - </p> - <p class="landing-small"> - <a href="/preview/api-overview.html">Learn about notifications</a> - </p> - </div> - <div class="col-4"> - <p>Moar Features</p> - <p class="landing-small"> - <b>Feature Name</b> is our effort to meatloaf boudin meatball sausage strip - steak hamburger, chuck ham pork chop. - </p> - <p class="landing-small"> - <a href="/preview/api-overview.html">Learn about moar feature</a> - </p> - </div> - </div> - <p style="margin-left:20px">See the <a href="/preview/api-overview.html">API - overview</a> for more information on the rest of the new and updated features.</p> - </div> - </div></div></div> - <div class="landing-section"> - <div class="wrap"> - <div class="cols"> - <div class="landing-body"> - <div class="col-3-wide"> - <a target="_blank" href="https://code.google.com/p/android-developer-preview/"> - <img class="landing-social-image" src="/preview/images/bugs.png" alt=""> - </a> - <div class="landing-social-copy"> - <p>Issue Tracker</p> - <p class="landing-small"> - Let us know when you encounter problems, so we can fix them and make - the platform better for you and your users. - </p><p class="landing-small"> - <a href="https://code.google.com/p/android-developer-preview/"> - Report Issues</a> - </p> - <p></p> - </div> - </div> - <div class="col-3-wide"> - <a target="_blank" href="http://g.co/androidldevpreview"> - <img class="landing-social-image" src="//www.google.com/images/icons/product/gplus-128.png" alt=""> - </a> - <div class="landing-social-copy"> - <p>Google+ </p> - <p class="landing-small"> - Join the community of Android developers testing out the M Developer Preview and - share your thoughts and experiences. - </p><p class="landing-small"> - <a href="http://g.co/androidldevpreview"> - Discuss on Google+</a> - </p> - </div> - </div> - <div class="col-3-wide"> - <a target="_blank" href="/preview/support.html"> - <img class="landing-social-image" src="/preview/images/updates.png" alt=""> - </a> - <div class="landing-social-copy"> - <p>Support and Updates</p> - <p class="landing-small"> - Updates to the preview are delivered - in the Android SDK Manager. Check back periodically - for news about the changes. - </p> - <p class="landing-small"> - <a href="/preview/support.html">Get Support</a> - </p> - </div> - </div> - </div> - </div> - </div> - </div> - - <div class="content-footer wrap" itemscope="" itemtype="http://schema.org/SiteNavigationElement"> - <div class="layout-content-col col-16" style="padding-top:4px"> - <style>#___plusone_0 {float:right !important;}</style> - <div class="g-plusone" data-size="medium"></div> - </div> - </div> - <div id="footer" class="wrap" style="width:940px;position:relative;top:-35px;z-index:-1"> - <div id="copyright"> - Except as noted, this content is - licensed under <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>. For details and - restrictions, see the <a href="/license.html">Content - License</a>. - </div> - </div> - </div> <!-- end landing-body-content --> - - <script> - $("a.landing-down-arrow").on("click", function(e) { - $("body").animate({ - scrollTop: $(".preview-hero").height() + 76 - }, 1000, "easeOutQuint"); - e.preventDefault(); - }); - </script> - </div> - - <div class="content-footer wrap" - itemscope itemtype="http://schema.org/SiteNavigationElement"> - - <div class="paging-links layout-content-col col-10"> - - </div> - <div class="layout-content-col plus-container col-2" > - <style>#___plusone_0 {float:right !important;}</style> - <div class="g-plusone" data-size="medium"></div> - - </div> - - </div> - - - - - </div> <!-- end jd-content --> - -<div id="footer" class="wrap" style="width:940px"> - - - <div id="copyright"> - - Except as noted, this content is - licensed under <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>. For details and - restrictions, see the <a href="/license.html">Content - License</a>. - </div> - - -</div> <!-- end footer --> -</div><!-- end doc-content --> - -</div> <!-- end body-content --> - - - - - - <script src="https://developer.android.com/ytblogger_lists_unified.js" type="text/javascript"></script> - <script src="/jd_lists_unified.js" type="text/javascript"></script> - <script src="/jd_extras.js" type="text/javascript"></script> - <script src="/jd_collections.js" type="text/javascript"></script> - <script src="/jd_tag_helpers.js" type="text/javascript"></script> - -</body> -</html> diff --git a/docs/html/preview/index.jd b/docs/html/preview/index.jd index a2d0b18..c6c2068 100644 --- a/docs/html/preview/index.jd +++ b/docs/html/preview/index.jd @@ -17,44 +17,36 @@ footer.hide=1 <div class="col-1of2 col-pull-1of2"> <h1 class="dac-hero-title">M Developer Preview</h1> <p class="dac-hero-description"> - Get ready for the next official release of the platform. Test your apps - and give us feedback! + Get ready for the next official release of the platform. The preview program gives + you an advance look at new APIs, features, and behaviors coming to Android. + Test your apps and give us feedback! </p> - <a class="dac-hero-cta" href="{@docRoot}preview/setup-sdk.html"> + + <a class="dac-hero-cta" href="{@docRoot}preview/overview.html"> <span class="dac-sprite dac-auto-chevron"></span> - Set up the Preview SDK + Preview Program Overview </a><br> <a class="dac-hero-cta" href="{@docRoot}preview/api-overview.html"> <span class="dac-sprite dac-auto-chevron"></span> Review the API changes </a><br> + <a class="dac-hero-cta" href="{@docRoot}preview/setup-sdk.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Set up the Preview SDK + </a><br> <a class="dac-hero-cta" href="https://code.google.com/p/android-developer-preview/"> <span class="dac-sprite dac-auto-chevron"></span> Report issues </a><br> + </div> </div> - </div> -</section> - -<section class="dac-section dac-gray dac-small dac-invert"><div class="wrap"> - <h2 class="norule">Latest</h2> - <div class="resource-widget resource-flow-layout col-16" - data-query="collection:develop/landing/latest" - data-cardSizes="6x6" - data-maxResults="3"></div> -</div></section> - -<section class="dac-section"><div class="wrap"> - <h1 class="dac-section-title">Resources</h1> - <div class="dac-section-subtitle"> - Check out these resources to help you get started with the M Developer Preview. + <div class="dac-section dac-small"> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:preview/landing/resources" + data-cardSizes="6x2" + data-maxResults="6"></div> + </div> </div> - <div class="resource-widget resource-flow-layout col-16" - data-query="collection:preview/landing/resources" - data-cardSizes="6x6" - data-maxResults="6"></div> -</div></section> - - +</section>
\ No newline at end of file diff --git a/docs/html/preview/license.html b/docs/html/preview/license.html deleted file mode 100644 index deb16aa..0000000 --- a/docs/html/preview/license.html +++ /dev/null @@ -1,274 +0,0 @@ -<!DOCTYPE html> - -<html> -<head> - - -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<meta name="viewport" content="width=970" /> - -<meta name="Description" content="To get started with the Android SDK Preview, you must agree to the following terms and conditions. As described below, please note that this is a preview version of the Android SDK, subject to change, that you use at your own risk."> -<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> -<title>License Agreement | Android Developers</title> - -<!-- STYLESHEETS --> -<link rel="stylesheet" -href="//fonts.googleapis.com/css?family=Roboto+Condensed"> -<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" - title="roboto"> -<link href="/assets/css/default.css" rel="stylesheet" type="text/css"> - - - -<!-- JAVASCRIPT --> -<script src="//www.google.com/jsapi" type="text/javascript"></script> -<script src="/assets/js/android_3p-bundle.js" type="text/javascript"></script> -<script type="text/javascript"> - var toRoot = "/"; - var metaTags = []; - var devsite = false; -</script> -<script src="/assets/js/docs.js" type="text/javascript"></script> - -<script> - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - - ga('create', 'UA-5831155-1', 'android.com'); - ga('create', 'UA-49880327-2', 'android.com', {'name': 'universal'}); // New tracker); - ga('send', 'pageview'); - ga('universal.send', 'pageview'); // Send page view for new tracker. -</script> - -</head> - - -<body class="gc-documentation" itemscope="" itemtype="http://schema.org/Article"> - - -<a name="top"></a> -<div id="body-content"> -<div class="fullpage"> -<div id="jd-content"> - <div class="jd-descr" itemprop="articleBody"> -<style> -body,html, #qv {background-color:#e9e9e9} - -#qv * { font-weight:bold;} - -.fullpage>#footer, -#jd-content>.content-footer.wrap { - display:none; -} - -.content-footer { - display: none; -} -</style> - - <div style="border-bottom: 1px solid #a5c43a; position: absolute; left: 0; right: 0; top: 0;"> - <div class="wrap" style="position: relative; height: 45px; padding: 0 20px;"> - <a href="/index.html" style="position:absolute;top:8px"> - <img src="/assets/images/dac_logo.png" srcset="/assets/images/dac_logo@2x.png 2x" width="123" height="25" alt="Android Developers home page"> - </a> - </div> - </div> - - <div class="landing-rest-of-page"> - <div class="landing-section" style="padding:55px 10px 0"> - -<div class="wrap"> - -<div class="col-16" id="doc-col" > - - <h1 itemprop="name" >L Developer Preview License Agreement</h1> - -<div class="jd-descr" itemprop="articleBody"> - <p> -If you are using the Android SDK -Preview, you must agree to the following terms -and conditions. As described below, please note that the preview version of the -Android SDK is subject to change, and that you use it at your own risk. The -Android SDK Preview is not a stable release, and may contain errors and defects -that can result in serious damage to your computer systems, devices and data. -</p> - -<p> -This is the Android SDK Preview License Agreement (the “License Agreement”). -</p> - -<div class="sdk-terms" style="height:auto;border:0;padding:0;width:940px"> -1. Introduction - -1.1 The Android SDK Preview (referred to in the License Agreement as the “Preview” and specifically including the Android system files, packaged APIs, and Preview library files, if and when they are made available) is licensed to you subject to the terms of the License Agreement. The License Agreement forms a legally binding contract between you and Google in relation to your use of the Preview. - -1.2 "Android" means the Android software stack for devices, as made available under the Android Open Source Project, which is located at the following URL: http://source.android.com/, as updated from time to time. - -1.3 "Google" means Google Inc., a Delaware corporation with principal place of business at 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States. - -2. Accepting the License Agreement - -2.1 In order to use the Preview, you must first agree to the License Agreement. You may not use the Preview if you do not accept the License Agreement. - -2.2 By clicking to accept and/or using the Preview, you hereby agree to the terms of the License Agreement. - -2.3 You may not use the Preview and may not accept the License Agreement if you are a person barred from receiving the Preview under the laws of the United States or other countries including the country in which you are resident or from which you use the Preview. - -2.4 If you will use the Preview internally within your company or organization you agree to be bound by the License Agreement on behalf of your employer or other entity, and you represent and warrant that you have full legal authority to bind your employer or such entity to the License Agreement. If you do not have the requisite authority, you may not accept the License Agreement or use the Preview on behalf of your employer or other entity. - -3. Preview License from Google - -3.1 Subject to the terms of the License Agreement, Google grants you a royalty-free, non-assignable, non-exclusive, non-sublicensable, limited, revocable license to use the Preview, personally or internally within your company or organization, solely to develop applications to run on the Android platform. - -3.2 You agree that Google or third parties owns all legal right, title and interest in and to the Preview, including any Intellectual Property Rights that subsist in the Preview. "Intellectual Property Rights" means any and all rights under patent law, copyright law, trade secret law, trademark law, and any and all other proprietary rights. Google reserves all rights not expressly granted to you. - -3.3 You may not use the Preview for any purpose not expressly permitted by the License Agreement. Except to the extent required by applicable third party licenses, you may not: (a) copy (except for backup purposes), modify, adapt, redistribute, decompile, reverse engineer, disassemble, or create derivative works of the Preview or any part of the Preview; or (b) load any part of the Preview onto a mobile handset or any other hardware device except a personal computer, combine any part of the Preview with other software, or distribute any software or device incorporating a part of the Preview. - -3.4 You agree that you will not take any actions that may cause or result in the fragmentation of Android, including but not limited to distributing, participating in the creation of, or promoting in any way a software development kit derived from the Preview. - -3.5 Use, reproduction and distribution of components of the Preview licensed under an open source software license are governed solely by the terms of that open source software license and not the License Agreement. You agree to remain a licensee in good standing in regard to such open source software licenses under all the rights granted and to refrain from any actions that may terminate, suspend, or breach such rights. - -3.6 You agree that the form and nature of the Preview that Google provides may change without prior notice to you and that future versions of the Preview may be incompatible with applications developed on previous versions of the Preview. You agree that Google may stop (permanently or temporarily) providing the Preview (or any features within the Preview) to you or to users generally at Google's sole discretion, without prior notice to you. - -3.7 Nothing in the License Agreement gives you a right to use any of Google's trade names, trademarks, service marks, logos, domain names, or other distinctive brand features. - -3.8 You agree that you will not remove, obscure, or alter any proprietary rights notices (including copyright and trademark notices) that may be affixed to or contained within the Preview. - -4. Use of the Preview by You - -4.1 Google agrees that nothing in the License Agreement gives Google any right, title or interest from you (or your licensors) under the License Agreement in or to any software applications that you develop using the Preview, including any intellectual property rights that subsist in those applications. - -4.2 You agree to use the Preview and write applications only for purposes that are permitted by (a) the License Agreement, and (b) any applicable law, regulation or generally accepted practices or guidelines in the relevant jurisdictions (including any laws regarding the export of data or software to and from the United States or other relevant countries). - -4.3 You agree that if you use the Preview to develop applications, you will protect the privacy and legal rights of users. If users provide you with user names, passwords, or other login information or personal information, you must make the users aware that the information will be available to your application, and you must provide legally adequate privacy notice and protection for those users. If your application stores personal or sensitive information provided by users, it must do so securely. If users provide you with Google Account information, your application may only use that information to access the user's Google Account when, and for the limited purposes for which, each user has given you permission to do so. - -4.4 You agree that you will not engage in any activity with the Preview, including the development or distribution of an application, that interferes with, disrupts, damages, or accesses in an unauthorized manner the servers, networks, or other properties or services of Google or any third party. - -4.5 You agree that you are solely responsible for (and that Google has no responsibility to you or to any third party for) any data, content, or resources that you create, transmit or display through Android and/or applications for Android, and for the consequences of your actions (including any loss or damage which Google may suffer) by doing so. - -4.6 You agree that you are solely responsible for (and that Google has no responsibility to you or to any third party for) any breach of your obligations under the License Agreement, any applicable third party contract or Terms of Service, or any applicable law or regulation, and for the consequences (including any loss or damage which Google or any third party may suffer) of any such breach. - -4.7 The Preview is in development, and your testing and feedback are an important part of the development process. By using the Preview, you acknowledge that implementation of some features are still under development and that you should not rely on the Preview having the full functionality of a stable release. You agree not to publicly distribute or ship any application using this Preview as this Preview will no longer be supported after the official Android SDK is released. - -5. Your Developer Credentials - -5.1 You agree that you are responsible for maintaining the confidentiality of any developer credentials that may be issued to you by Google or which you may choose yourself and that you will be solely responsible for all applications that are developed under your developer credentials. - -6. Privacy and Information - -6.1 In order to continually innovate and improve the Preview, Google may collect certain usage statistics from the software including but not limited to a unique identifier, associated IP address, version number of the software, and information on which tools and/or services in the Preview are being used and how they are being used. Before any of this information is collected, the Preview will notify you and seek your consent. If you withhold consent, the information will not be collected. - -6.2 The data collected is examined in the aggregate to improve the Preview and is maintained in accordance with Google's Privacy Policy located at http://www.google.com/policies/privacy/. - -7. Third Party Applications - -7.1 If you use the Preview to run applications developed by a third party or that access data, content or resources provided by a third party, you agree that Google is not responsible for those applications, data, content, or resources. You understand that all data, content or resources which you may access through such third party applications are the sole responsibility of the person from which they originated and that Google is not liable for any loss or damage that you may experience as a result of the use or access of any of those third party applications, data, content, or resources. - -7.2 You should be aware the data, content, and resources presented to you through such a third party application may be protected by intellectual property rights which are owned by the providers (or by other persons or companies on their behalf). You may not modify, rent, lease, loan, sell, distribute or create derivative works based on these data, content, or resources (either in whole or in part) unless you have been specifically given permission to do so by the relevant owners. - -7.3 You acknowledge that your use of such third party applications, data, content, or resources may be subject to separate terms between you and the relevant third party. - -8. Using Google APIs - -8.1 Google APIs - -8.1.1 If you use any API to retrieve data from Google, you acknowledge that the data may be protected by intellectual property rights which are owned by Google or those parties that provide the data (or by other persons or companies on their behalf). Your use of any such API may be subject to additional Terms of Service. You may not modify, rent, lease, loan, sell, distribute or create derivative works based on this data (either in whole or in part) unless allowed by the relevant Terms of Service. - -8.1.2 If you use any API to retrieve a user's data from Google, you acknowledge and agree that you shall retrieve data only with the user's explicit consent and only when, and for the limited purposes for which, the user has given you permission to do so. - -9. Terminating the License Agreement - -9.1 the License Agreement will continue to apply until terminated by either you or Google as set out below. - -9.2 If you want to terminate the License Agreement, you may do so by ceasing your use of the Preview and any relevant developer credentials. - -9.3 Google may at any time, terminate the License Agreement, with or without cause, upon notice to you. - -9.4 The License Agreement will automatically terminate without notice or other action upon the earlier of: -(A) when Google ceases to provide the Preview or certain parts of the Preview to users in the country in which you are resident or from which you use the service; and -(B) Google issues a final release version of the Android SDK. - -9.5 When the License Agreement is terminated, the license granted to you in the License Agreement will terminate, you will immediately cease all use of the Preview, and the provisions of paragraphs 10, 11, 12 and 14 shall survive indefinitely. - -10. DISCLAIMERS - -10.1 YOU EXPRESSLY UNDERSTAND AND AGREE THAT YOUR USE OF THE PREVIEW IS AT YOUR SOLE RISK AND THAT THE PREVIEW IS PROVIDED "AS IS" AND "AS AVAILABLE" WITHOUT WARRANTY OF ANY KIND FROM GOOGLE. - -10.2 YOUR USE OF THE PREVIEW AND ANY MATERIAL DOWNLOADED OR OTHERWISE OBTAINED THROUGH THE USE OF THE PREVIEW IS AT YOUR OWN DISCRETION AND RISK AND YOU ARE SOLELY RESPONSIBLE FOR ANY DAMAGE TO YOUR COMPUTER SYSTEM OR OTHER DEVICE OR LOSS OF DATA THAT RESULTS FROM SUCH USE. WITHOUT LIMITING THE FOREGOING, YOU UNDERSTAND THAT THE PREVIEW IS NOT A STABLE RELEASE AND MAY CONTAIN ERRORS, DEFECTS AND SECURITY VULNERABILITIES THAT CAN RESULT IN SIGNIFICANT DAMAGE, INCLUDING THE COMPLETE, IRRECOVERABLE LOSS OF USE OF YOUR COMPUTER SYSTEM OR OTHER DEVICE. - -10.3 GOOGLE FURTHER EXPRESSLY DISCLAIMS ALL WARRANTIES AND CONDITIONS OF ANY KIND, WHETHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO THE IMPLIED WARRANTIES AND CONDITIONS OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. - -11. LIMITATION OF LIABILITY - -11.1 YOU EXPRESSLY UNDERSTAND AND AGREE THAT GOOGLE, ITS SUBSIDIARIES AND AFFILIATES, AND ITS LICENSORS SHALL NOT BE LIABLE TO YOU UNDER ANY THEORY OF LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL OR EXEMPLARY DAMAGES THAT MAY BE INCURRED BY YOU, INCLUDING ANY LOSS OF DATA, WHETHER OR NOT GOOGLE OR ITS REPRESENTATIVES HAVE BEEN ADVISED OF OR SHOULD HAVE BEEN AWARE OF THE POSSIBILITY OF ANY SUCH LOSSES ARISING. - -12. Indemnification - -12.1 To the maximum extent permitted by law, you agree to defend, indemnify and hold harmless Google, its affiliates and their respective directors, officers, employees and agents from and against any and all claims, actions, suits or proceedings, as well as any and all losses, liabilities, damages, costs and expenses (including reasonable attorneys’ fees) arising out of or accruing from (a) your use of the Preview, (b) any application you develop on the Preview that infringes any Intellectual Property Rights of any person or defames any person or violates their rights of publicity or privacy, and (c) any non-compliance by you of the License Agreement. - -13. Changes to the License Agreement - -13.1 Google may make changes to the License Agreement as it distributes new versions of the Preview. When these changes are made, Google will make a new version of the License Agreement available on the website where the Preview is made available. - -14. General Legal Terms - -14.1 the License Agreement constitutes the whole legal agreement between you and Google and governs your use of the Preview (excluding any services which Google may provide to you under a separate written agreement), and completely replaces any prior agreements between you and Google in relation to the Preview. - -14.2 You agree that if Google does not exercise or enforce any legal right or remedy which is contained in the License Agreement (or which Google has the benefit of under any applicable law), this will not be taken to be a formal waiver of Google's rights and that those rights or remedies will still be available to Google. - -14.3 If any court of law, having the jurisdiction to decide on this matter, rules that any provision of the License Agreement is invalid, then that provision will be removed from the License Agreement without affecting the rest of the License Agreement. The remaining provisions of the License Agreement will continue to be valid and enforceable. - -14.4 You acknowledge and agree that each member of the group of companies of which Google is the parent shall be third party beneficiaries to the License Agreement and that such other companies shall be entitled to directly enforce, and rely upon, any provision of the License Agreement that confers a benefit on (or rights in favor of) them. Other than this, no other person or company shall be third party beneficiaries to the License Agreement. - -14.5 EXPORT RESTRICTIONS. THE PREVIEW IS SUBJECT TO UNITED STATES EXPORT LAWS AND REGULATIONS. YOU MUST COMPLY WITH ALL DOMESTIC AND INTERNATIONAL EXPORT LAWS AND REGULATIONS THAT APPLY TO THE PREVIEW. THESE LAWS INCLUDE RESTRICTIONS ON DESTINATIONS, END USERS AND END USE. - -14.6 The License Agreement may not be assigned or transferred by you without the prior written approval of Google, and any attempted assignment without such approval will be void. You shall not delegate your responsibilities or obligations under the License Agreement without the prior written approval of Google. - -14.7 The License Agreement, and your relationship with Google under the License Agreement, shall be governed by the laws of the State of California without regard to its conflict of laws provisions. You and Google agree to submit to the exclusive jurisdiction of the courts located within the county of Santa Clara, California to resolve any legal matter arising from the License Agreement. Notwithstanding this, you agree that Google shall still be allowed to apply for injunctive remedies (or an equivalent type of urgent legal relief) in any jurisdiction. - - -</div> - </div> - </div> - -</div> - </div> <!-- end landing-body-content --> - - </div> - - <div class="content-footer wrap" itemscope="" - itemtype="http://schema.org/SiteNavigationElement"> - - <div class="paging-links layout-content-col col-10"> - - </div> - - </div> - - - - - </div> <!-- end jd-content --> - -<div id="footer" class="wrap" style="width:940px"> - - - <div id="copyright"> - - Except as noted, this content is - licensed under <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>. For details and - restrictions, see the <a href="https://developer.android.com/license.html">Content - License</a>. - </div> - - -</div> <!-- end footer --> -</div><!-- end doc-content --> - -</div> <!-- end body-content --> - -</body> -</html> diff --git a/docs/html/preview/overview.jd b/docs/html/preview/overview.jd index 00f1cfe..0c8931d 100644 --- a/docs/html/preview/overview.jd +++ b/docs/html/preview/overview.jd @@ -3,5 +3,54 @@ page.title=Preview Program Overview @jd:body <p> - This is an overview of the program. Bacon. -</p>
\ No newline at end of file + The M Developer Preview program is an opportunity for you to test the compatibility of your apps + with the next platform release, try out early versions of new API features, and provide feedback + to the Android team. The program includes update releases during course of the program to allow + you to follow the progress of feature development and fixes, leading up to the official release + of the platform, as shown in Figure 1. +</p> + +<img src="{@docRoot}preview/images/m-preview-timeline.png" + alt="Preview program timeline" id="figure1" style="margin-top: 15px;"> +<p class="img-caption"> + <b>Figure 1.</b> Timeline for the M Developer Preview program. +</p> + +<p> + We strongly encourage you to provide feedback for the M Preview releases through our <a href= + "https://code.google.com/p/android-developer-preview/">issue tracker</a>. Issues reported early + in the program have a better chance of being addressed before the official release, so reports + provided by June 30, 2015 receive priority processing by the Android team. +</p> + +<p> + To get started testing your app: +</p> + +<ul> + <li>Review the <a href="{@docRoot}preview/api-overview.html"> + API Overview</a> and <a href= + "{@docRoot}preview/api-changes.html">Behavior Changes</a> to + get an idea of what's new and how it affects your app. + </li> + + <li>Setup for testing and development by following the instructions for <a href= + "{@docRoot}preview/setup-sdk.html">Setting up the Preview + SDK</a> and configuring test devices. + </li> + + <li>Review the <a href="{@docRoot}preview/reference.html">M + Preview API Reference</a> and <a href= + "{@docRoot}preview/samples.html">M Preview samples</a> to + gain more insight into new API features and how to use them in your app. + </li> + + <li>Join the <a href="https://plus.google.com/communities/101985907812750684586">M Preview + Google+ developer community</a> to get the latest developer updates and connect with other + developers working with the preview. + </li> +</ul> + +<p> + Thanks in advance for your participation in the developer preview program! +</p> diff --git a/docs/html/sdk/index.jd b/docs/html/sdk/index.jd index 7cdf72f..8da052e 100644 --- a/docs/html/sdk/index.jd +++ b/docs/html/sdk/index.jd @@ -5,29 +5,28 @@ page.image=images/cards/android-studio_2x.png header.hide=1 page.metaDescription=Download the official Android IDE and developer tools to build apps for Android phones, tablets, wearables, TVs, and more. -studio.version=1.2.0.12 +studio.version=1.2.1.1 -studio.linux_bundle_download=android-studio-ide-141.1890965-linux.zip -studio.linux_bundle_bytes=259139652 -studio.linux_bundle_checksum=72149f65911ca18d8f0d360e6b7a1e2dc57e9935 +studio.linux_bundle_download=android-studio-ide-141.1903250-linux.zip +studio.linux_bundle_bytes=258634089 +studio.linux_bundle_checksum=61f576a24ac9aa00d498bb62942c028ef4a8905b -studio.mac_bundle_download=android-studio-ide-141.1890965-mac.dmg +studio.mac_bundle_download=android-studio-ide-141.1903250-mac.dmg studio.mac_bundle_bytes=260877150 -studio.mac_bundle_checksum=06fe5a2d9ab6c99bf42fb2014e519a073fc7e90d +studio.mac_bundle_checksum=a5a6ba50e3590de0973230a238d17726a1d9395c -studio.win_bundle_download=android-studio-ide-141.1890965-windows.zip -studio.win_bundle_bytes=261548058 -studio.win_bundle_checksum=29416e54ad074881a1e668e61e3d0c2316108dbe +studio.win_bundle_download=android-studio-ide-141.1903250-windows.zip +studio.win_bundle_bytes=261042465 +studio.win_bundle_checksum=ce924e0e4cff4b7f24df3f7ce0c1ce2379347d72 -studio.win_bundle_exe_download=android-studio-bundle-141.1890965-windows.exe -studio.win_bundle_exe_bytes=928285584 -studio.win_bundle_exe_checksum=47be67749409f0d710c05b9a8f22d9191c47a9d0 - -studio.win_notools_exe_download=android-studio-ide-141.1890965-windows.exe -studio.win_notools_exe_bytes=243621072 -studio.win_notools_exe_checksum=760d45212bea42f52adb1cbeab2390156d49c74d +studio.win_bundle_exe_download=android-studio-bundle-141.1903250-windows.exe +studio.win_bundle_exe_bytes=930462136 +studio.win_bundle_exe_checksum=680668b6b4a51c519efda814b96c2b61541a50f2 +studio.win_notools_exe_download=android-studio-ide-141.1903250-windows.exe +studio.win_notools_exe_bytes=243747312 +studio.win_notools_exe_checksum=d89917dd044e0559c87d6a05d49780ab110269f7 @@ -56,7 +55,6 @@ sdk.win_installer_checksum=e764ea93aa72766737f9be3b9fb3e42d879ab599 <style type="text/css"> .offline {display:none;} - a.download-bundle-button {display:block;} h2.feature { padding-top:30px; margin-top:0; @@ -67,19 +65,6 @@ sdk.win_installer_checksum=e764ea93aa72766737f9be3b9fb3e42d879ab599 padding-top:40px; } - .landing-button.green { - font-size:16px; - background-color:#90c653; - padding:8px 10px 10px; - margin:0; - width:206px; - text-align:center; - } - - .landing-button.green:hover { - background-color:#85b84f; - } - .landing-button .small { font-size: 12px; font-weight: normal; @@ -285,7 +270,7 @@ This is the Android Software Development Kit License Agreement <img src="{@docRoot}images/tools/studio-hero.png" srcset="{@docRoot}images/tools/studio-hero_2x.png 2x, {@docRoot}images/tools/studio-hero.png 1x" -width="760" height="400" alt="" style="margin-bottom:100px" /> +width="760" height="400" alt="" /> <div style="color: #fff; width:226px; height:0; overflow:visible; position:absolute; top:40px; left:25px"> @@ -301,7 +286,7 @@ width: 400px;text-align: center;">The official Android IDE</p> <li>Android 5.0 emulator system image with Google APIs</li> </ul> -<a class="online landing-button green download-bundle-button" style="margin-top:30px;" +<a class="online landing-button green download-bundle-button" href="#Other" >Download Android Studio</a> <!-- this appears when viewing the offline docs --> @@ -309,8 +294,9 @@ href="#Other" >Download Android Studio</a> To get Android Studio or stand-alone SDK tools, visit <a href="http://developer.android.com/sdk/index.html">developer.android.com/sdk/</a> </p> +</div> -<ul style="margin-top:50px;color:#444"> +<ul> <li><a href="#Requirements">System Requirements</a></li> <li><a href="#Other">Other Download Options</a></li> <li><a href="{@docRoot}sdk/installing/migrate.html">Migrating to Android Studio</a></li> @@ -318,7 +304,6 @@ href="http://developer.android.com/sdk/index.html">developer.android.com/sdk/</a target="_blank">Take a Survey</a></li> </ul> -</div> @@ -404,8 +389,7 @@ srcset="{@docRoot}images/tools/studio-hero-gradle_2x.png 2x, {@docRoot}images/to <p>Build APKs from Android Studio or the command line.</p> </div> - - +</div> <h2 class="feature norule">More about Android Studio</h2> <div style="background:#424242;padding:30px; color:#fff;margin:0 0 15px;"> diff --git a/docs/html/tools/debugging/ddms.jd b/docs/html/tools/debugging/ddms.jd index e9c2877..28ad11e 100644 --- a/docs/html/tools/debugging/ddms.jd +++ b/docs/html/tools/debugging/ddms.jd @@ -204,6 +204,10 @@ parent.link=index.html <li>Click the <strong>Start Method Profiling</strong> button.</li> + <li>In Android 4.4 and later, choose either trace-based profiling or sample-based profiling + with a specified sampling interval. For earlier versions of Android, only trace-based profiling + is available.</li> + <li>Interact with your application to start the methods that you want to profile.</li> <li>Click the <strong>Stop Method Profiling</strong> button. DDMS stops profiling your diff --git a/docs/html/tools/debugging/debugging-tracing.jd b/docs/html/tools/debugging/debugging-tracing.jd index bd4afbc..fa5b4e1 100644 --- a/docs/html/tools/debugging/debugging-tracing.jd +++ b/docs/html/tools/debugging/debugging-tracing.jd @@ -127,7 +127,7 @@ parent.link=index.html {@link android.os.Debug#startMethodTracing() startMethodTracing()} methods. In the call, you specify a base name for the trace files that the system generates. To stop tracing, call {@link android.os.Debug#stopMethodTracing() stopMethodTracing()}. These methods start and stop method - tracing across the entire virtual machine. For example, you could call + tracing across the entire virtual machine. For example, you could call {@link android.os.Debug#startMethodTracing() startMethodTracing()} in your activity's {@link android.app.Activity#onCreate onCreate()} method, and call {@link android.os.Debug#stopMethodTracing() stopMethodTracing()} in that activity's @@ -157,6 +157,13 @@ parent.link=index.html times are only useful in relation to other profile output, so you can see if changes have made the code faster or slower relative to a previous profiling run.</p> + <p>In Android 4.4 and later, you can use sample-based profiling to profile with less runtime + performance impact. To enable sample profiling, call {@link + android.os.Debug#startMethodTracingSampling(java.lang.String, int, int) + startMethodTracingSampling()} with a specified sampling interval. The system will then gather + samples periodically until tracing is stopped via {@link android.os.Debug#stopMethodTracing() + stopMethodTracing()}.</p> + <h2 id="copyingfiles">Copying Trace Files to a Host Machine</h2> <p>After your application has run and the system has created your trace files @@ -277,7 +284,8 @@ dmtracedump [-ho] [-s sortable] [-d trace-base-name] [-g outfile] <trace-base Traceview logging does not handle threads well, resulting in these two problems: <ol> - <li>If a thread exits during profiling, the thread name is not emitted;</li> + <li>If a thread exits during profiling, the thread name is not emitted (fixed in Android 5.1 + and later);</li> <li>The VM reuses thread IDs. If a thread stops and another starts, they may get the same ID.</li> diff --git a/docs/html/tools/projects/templates.jd b/docs/html/tools/projects/templates.jd index 966d25f..002e2c5 100644 --- a/docs/html/tools/projects/templates.jd +++ b/docs/html/tools/projects/templates.jd @@ -1,4 +1,7 @@ page.title=Using Code Templates +page.image=images/cards/card-using-code-templates_16x9_2x.png +page.metaDescription=Quickly create Android app projects with various UI or functional components. +page.tags=studio,templates,firstapp @jd:body <div id="qv-wrapper"> @@ -26,7 +29,7 @@ page.title=Using Code Templates </div> </div> - +<img style="float:right" src="{@docRoot}images/cards/card-using-code-templates_16x9_2x.png"> <p>The SDK tools provide templates for quickly creating Android application projects with the basic structure or for adding components to your existing application modules. The code templates provided by the Android SDK follow the Android design and development guidelines to get you on the diff --git a/docs/html/tools/revisions/studio.jd b/docs/html/tools/revisions/studio.jd index f530a5f..7138efe 100644 --- a/docs/html/tools/revisions/studio.jd +++ b/docs/html/tools/revisions/studio.jd @@ -43,6 +43,21 @@ Android Studio, as denoted by revision number. </p> <div class="toggle-content opened"> <p><a href="#" onclick="return toggleContent(this)"> <img src="{@docRoot}assets/images/triangle-opened.png" class="toggle-content-img" + alt=""/>Android Studio v1.2.1</a> <em>(May 2015)</em> + </p> + <div class="toggle-content-toggleme"> + <p>Various fixes and enhancements:</p> + <ul> + <li>Fixed minor performance and feature issues. </li> + </ul> + </div> +</div> + + + +<div class="toggle-content closed"> + <p><a href="#" onclick="return toggleContent(this)"> + <img src="{@docRoot}assets/images/triangle-closed.png" class="toggle-content-img" alt=""/>Android Studio v1.2.0</a> <em>(April 2015)</em> </p> diff --git a/docs/html/tools/sdk/ndk/index.jd b/docs/html/tools/sdk/ndk/index.jd index 520fe67..ae15bc1 100644 --- a/docs/html/tools/sdk/ndk/index.jd +++ b/docs/html/tools/sdk/ndk/index.jd @@ -2,29 +2,25 @@ ndk=true page.template=sdk -ndk.mac64_download=android-ndk-r10d-darwin-x86_64.bin -ndk.mac64_bytes=442691567 -ndk.mac64_checksum=cb101e1e62d56ea75b215f6bc6c27fae +ndk.mac64_download=android-ndk-r10e-darwin-x86_64.bin +ndk.mac64_bytes=388937326 +ndk.mac64_checksum=2cb8893a5701603519d38a7e04c50e81 -ndk.mac32_download=android-ndk-r10d-darwin-x86.bin -ndk.mac32_bytes=441545213 -ndk.mac32_checksum=0aeb3dc062dc457a4cd01e72eadb2379 +ndk.linux64_download=android-ndk-r10e-linux-x86_64.bin +ndk.linux64_bytes=401522849 +ndk.linux64_checksum=19af543b068bdb7f27787c2bc69aba7f -ndk.linux64_download=android-ndk-r10d-linux-x86_64.bin -ndk.linux64_bytes=459151600 -ndk.linux64_checksum=263b83071e6bca15f67898548d8d236e +ndk.linux32_download=android-ndk-r10e-linux-x86.bin +ndk.linux32_bytes=394281908 +ndk.linux32_checksum=c3edd3273029da1cbd2f62c48249e978 -ndk.linux32_download=android-ndk-r10d-linux-x86.bin -ndk.linux32_bytes=449997190 -ndk.linux32_checksum=70ed6d8c34e7e620c145b791e8eeef89 +ndk.win64_download=android-ndk-r10e-windows-x86_64.exe +ndk.win64_bytes=419616132 +ndk.win64_checksum=8412bb4991a95e08fda50b5a44d95df7 -ndk.win64_download=android-ndk-r10d-windows-x86_64.exe -ndk.win64_bytes=472613732 -ndk.win64_checksum=9a33f96da58a7e0b70e47d27b4a880b4 - -ndk.win32_download=android-ndk-r10d-windows-x86.exe -ndk.win32_bytes=455427281 -ndk.win32_checksum=c0930abfae0c990c4d191cc4ebd46b68 +ndk.win32_download=android-ndk-r10e-windows-x86.exe +ndk.win32_bytes=396563176 +ndk.win32_checksum=1a82445baaf62aec3a46386ab1e5772c @@ -382,11 +378,174 @@ $('#Downloads').after($('#download-table')); <p>The following sections provide information about releases of the NDK.</p> - <div class="toggle-content opened"> <p> <a href="#" onclick="return toggleContent(this)"> <img src="/assets/images/triangle-opened.png" class="toggle-content-img" alt="" + >Android NDK, Revision 10e</a> <em>(May 2015)</em> + </p> + <div class="toggle-content-toggleme"> + <dl> + <dt>Important changes:</dt> + <dd> + <ul> + <li>Integrated the workaround for Cortex-A53 Erratum 843419 into the + {@code aarch64-linux-android-4.9} linker. For more information on this workaround, see + <a href="https://sourceware.org/ml/binutils/2015-03/msg00446.html">Workaround for cortex-a53 + erratum 843419.</a></li> + + <li>Added Clang 3.6; {@code NDK_TOOLCHAIN_VERSION=clang} now picks that version + of Clang by default.</li> + + <li>Removed Clang 3.4.</li> + + <li>Removed GCC 4.6.</li> + + <li>Implemented multithreading support in {@code ld.gold} for all architectures. It can + now link with or without support for multithreading; the default is to do it without. + <ul> + <li>To compile with multithreading, use the {@code --threads} option.</li> + <li>To compile without multithreading, use the {@code --no-threads} option.</li> + </ul> + </li> + + <li>Upgraded GDB/gdbserver to 7.7 for all architectures.</li> + + <li>Removed the NDK package for 32-bit Darwin.</li> + </ul> + </dd> + <dl> + + + <dt>Important bug fixes:</dt> + <dd> + <ul> + <li>Fixed a crash that occurred when there were OpenMP loops outside of the main thread.</li> + + <li>Fixed a GCC 4.9 internal compiler error (<i>ICE</i>) that occured when the user declared + {@code #pragma GCC optimize ("O0")}, but had a different level of optimization specified + on the command line. The {@code pragma} takes precedence.</li> + + <li>Fixed an error that used to produce a crash with the following error message: +<pre> +in add_stores, at var-tracking.c:6000 +</pre> + </li> + + <li>Implemented a workaround for a Clang 3.5 issue in which LLVM auto-vectorization + generates {@code llvm.cttz.v2i64()}, an instruction with no counterpart in the ARM + instruction set.</li> + </ul> + </dd> + + <dt>Other bug fixes:</dt> + <dd> + <ul> + <li>Made the following header and library fixes:</li> + <ul> + <li>Fixed {@code PROPERTY_*} in {@code media/NdkMediaDrm.h}.</li> + <li>Fixed {@code sys/ucontext.h} for {@code mips64}.</li> + <li>Dropped the Clang version check for {@code __builtin_isnan} and + {@code __builtin_isinf}.</li> + <li>Added {@code android-21/arch-mips/usr/include/asm/reg.h} + and {@code android-21/arch-mips64/usr/include/asm/reg.h}.</li> + </ul> + </li> + + <li>Fixed a spurious array-bounds warning that GCC 4.9 produced for x86, and reenabled the + array bounds warning that GCC 4.9 had produced for ARM. The warning for ARM had + previously been unconditionally disabled.</li> + + <li>Fixed Clang 3.5 for {@code mips} and {@code mips64} to create a writable + {@code .gcc_except_table} section, thus matching GCC behavior. This change allows you + to avoid the following linker warning: + +<pre> +.../ld: warning: creating a DT_TEXTREL in a shared object +</pre> + </li> + + <li>Backported a fix for {@code compiler-rt} issues that were causing crashes when Clang + compiled for {@code mips64}. For more information, see LLVM Issue + <a href="http://llvm.org/bugs/show_bug.cgi?id=20098">20098</a>.</li> + + <li>Fixed Clang 3.5 crashes that occurred on non-ASCII comments. (Issue + <a href="https://code.google.com/p/android/issues/detail?id=81440">81440</a>)</li> + + <li>Fixed {@code stlport collate::compare} to return {@code -1} and {@code 1}. Previously, + it had returned arbitrary signed numbers.</li> + + <li>Fixed {@code ndk-gdb} for 64-bit ABIs. (Issue + <a href="https://code.google.com/p/android/issues/detail?id=118300">118300</a>)</li> + + <li>Fixed the crash that the HelloComputeNDK sample for RenderScript was producing on + Android 4.4 (Android API level 19). For more information, see + <a href="http://stackoverflow.com/questions/28057049/targeting-pre-lollipop-devices-using-renderscript-from-ndk-c">this page</a>.</li> + + <li>Fixed {@code libc++ __wrap_iter} for GCC. For more information, see LLVM Issue + <a href="http://llvm.org/bugs/show_bug.cgi?id=22355">22355</a>.</li> + + <li>Fixed {@code .asm} support for ABI {@code x86_64}.</li> + + <li>Implemented a workaround for the GCC 4.8 {@code stlport} issue. (Issue + <a href="https://android-review.googlesource.com/#/c/127773">127773</a>)</li> + + <li>Removed the trailing directory separator {@code \\} from the project path in Windows. + (Issue <a href="https://code.google.com/p/android/issues/detail?id=160584">160584</a>) + </li> + + <li>Fixed a {@code no rule to make target} error that occurred when compiling a single + {@code .c} file by executing the {@code ndk-build.cmd} command from {@code gradle}. (Issue + <a href="https://code.google.com/p/android/issues/detail?id=66937">66937</a>)</li> + + <li>Added the {@code libatomic.a} and {@code libgomp.a} libraries that had been missing from + the following host toolchains: + <ul> + <li>{@code aarch64-linux-android-4.9}</li> + <li>{@code mips64el-linux-android-4.9}</li> + <li>{@code mipsel-linux-android-4.9}</li> + <li>{@code x86_64-4.9}</li> + </ul> + </ul> + </dd> + + <dt>Other changes:</dt> + <dd> + <ul> + <li>Added {@code ld.gold} for {@code aarch64}. The default linker remains {@code ld.bfd}. + To explicitly enable {@code ld.gold}, add {@code -fuse-ld=gold} to the + {@code LOCAL_LDFLAGS} or {@code APP_LDFLAGS} variable.</li> + + <li>Built the MIPS and MIPS64 toolchains with {@code binutils-2.25}, which provides improved + R6 support.</li> + + <li>Made {@code -fstandalone-debug} (full debug info) a default option for Clang.</li> + + <li>Replaced {@code -fstack-protector} with {@code -fstack-protector-strong} for + the ARM, AArch64, X86, and X86_64 toolchains for GCC 4.9, Clang 3.5, and + Clang 3.6.</li> + + <li>Added the {@code --package} command-line switch to {@code ndk-gdb} to allow the build + system to override the package name. (Issue + <a href="https://code.google.com/p/android/issues/detail?id=56189">56189</a>)</li> + + <li> Deprecated {@code -mno-ldc1-stc1} for MIPS. This option may not work with the new + {@code -fpxx} and {@code -mno-odd-spreg} options, or with the FPXX ABI.</li> + + <li>Added MIPS MSA and R6 detection to {@code cpu-features}.</li> + + </ul> + </dd> + + </dl> + </div> +</div> + + +<div class="toggle-content closed"> + <p> + <a href="#" onclick="return toggleContent(this)"> <img + src="/assets/images/triangle-closed.png" class="toggle-content-img" alt="" >Android NDK, Revision 10d</a> <em>(December 2014)</em> </p> <div class="toggle-content-toggleme"> diff --git a/docs/html/tools/studio/index.jd b/docs/html/tools/studio/index.jd index 13a2fea..e7de000 100644 --- a/docs/html/tools/studio/index.jd +++ b/docs/html/tools/studio/index.jd @@ -1,4 +1,7 @@ page.title=Android Studio Overview +page.image=images/cards/card-android-studio-overview_16x9_2x.jpg +page.metaDescription=Learn about the official IDE for Android. +page.tags=studio,sdk,tools,firstapp @jd:body <div id="qv-wrapper"> diff --git a/docs/html/tools/support-library/features.jd b/docs/html/tools/support-library/features.jd index ee1ed72..573baad 100644 --- a/docs/html/tools/support-library/features.jd +++ b/docs/html/tools/support-library/features.jd @@ -373,9 +373,8 @@ com.android.support:recyclerview-v7:21.0.0 developer guide.</p> <p class="note"> - <strong>Note:</strong> Use of RenderScript with the support library is supported with the Android - Eclipse plugin and Ant build tools. It is <em>not currently</em> supported with Android Studio or - Gradle-based builds. + <strong>Note:</strong> Use of RenderScript with the support library is supported with Android + Studio and Gradle-based builds, as well as the Eclipse plugin and Ant build tools. </p> diff --git a/docs/html/training/articles/keystore.jd b/docs/html/training/articles/keystore.jd index 217db81..4005a05 100644 --- a/docs/html/training/articles/keystore.jd +++ b/docs/html/training/articles/keystore.jd @@ -88,7 +88,7 @@ and {@link java.security.KeyPairGenerator} or <h3 id="GeneratingANewSecretKey">Generating a New Secret Key</h3> <p>To generate the key, use a {@link javax.crypto.KeyGenerator} with - {@link android.security.KeyGeneratorSpec}. + {@link android.security.keystore.KeyGenParameterSpec}. <h3 id="WorkingWithKeyStoreEntries">Working with Keystore Entries</h3> @@ -129,7 +129,7 @@ of the two modes: for use as soon as the user unlocks the secure lock screen or confirms their secure lock screen credentials using the {@link android.app.KeyguardManager#createConfirmDeviceCredentialIntent(CharSequence, CharSequence) KeyguardManager.createConfirmDeviceCredentialIntent} flow. Each key specifies for how long the authorization remains valid for that key. Such keys - can only be generated or imported if the secure lock screen is enabled (see {@link android.app.KeyguardManager#isKeyguardSecure Keyguard.isKeyguardSecure}). + can only be generated or imported if the secure lock screen is enabled (see {@link android.app.KeyguardManager#isDeviceSecure()}). These keys become permanently invalidated once the secure lock screen is disabled or forcibly reset (e.g. by a Device Admin).</li> <li>User authentication is required for every use of the key. In this mode, a specific operation diff --git a/docs/html/training/location/location-testing.jd b/docs/html/training/location/location-testing.jd index 5021fc0..8f73d51 100644 --- a/docs/html/training/location/location-testing.jd +++ b/docs/html/training/location/location-testing.jd @@ -79,7 +79,7 @@ trainingnavtop=true <h2 id="TurnOnMockMode">Turn On Mock Mode</h2> <p> To send mock locations to Location Services in mock mode, a test app must request the permission - {@link android.Manifest.permission#ACCESS_MOCK_LOCATION}. In addition, you must enable mock + android.Manifest.permission#ACCESS_MOCK_LOCATION. In addition, you must enable mock locations on the test device using the option <b>Enable mock locations</b>. To learn how to enable mock locations on the device, see <a href="{@docRoot}tools/device.html#setting-up">Setting up a Device for Development</a>. diff --git a/docs/html/training/testing/ui-testing/index.jd b/docs/html/training/testing/ui-testing/index.jd index 20422f7..d660c60 100644 --- a/docs/html/training/testing/ui-testing/index.jd +++ b/docs/html/training/testing/ui-testing/index.jd @@ -72,5 +72,5 @@ Testing UI for a Single App</a></strong></dt> <dd>Learn how to test UI in a single app by using the Espresso testing framework.</dd> <dt><strong><a href="uiautomator-testing.html"> Testing UI for Multiple Apps</a></strong></dt> - <dd>Learn how to test UI in multiple apps by using the UI Automator testing framework</dd> + <dd>Learn how to test UI in multiple apps by using the UI Automator testing framework.</dd> </dl>
\ No newline at end of file diff --git a/docs/html/training/testing/unit-testing/index.jd b/docs/html/training/testing/unit-testing/index.jd new file mode 100644 index 0000000..a35ba80 --- /dev/null +++ b/docs/html/training/testing/unit-testing/index.jd @@ -0,0 +1,63 @@ +page.title=Building Effective Unit Tests +page.tags=testing,androidjunitrunner,junit,unit test + +trainingnavtop=true +startpage=true + +@jd:body + +<div id="tb-wrapper"> +<div id="tb"> + <h2> + You should also read + </h2> + <ul> + <li> + <a href="{@docRoot}tools/testing-support-library/index.html">Testing Support Library</a> + </li> + </ul> +</div> +</div> + +<p>Unit tests are the fundamental tests in your app testing strategy. By creating and running unit +tests against your code, you can easily verify that the logic of individual units is correct. +Running unit tests after every build helps you to +quickly catch and fix software regressions introduced by code changes to your app. +</p> + +<p>A unit test generally exercises the functionality of the smallest possible unit of code (which +could be a method, class, or component) in a repeatable way. You should build unit tests when you +need to verify the logic of specific code in your app. For example, if you are unit testing a +class, your test might check that the class is in the right state. Typically, the unit of code +is tested in isolation; your test affects and monitors changes to that unit only. A +<a href="http://en.wikipedia.org/wiki/Mock_object" class="external-link">mocking framework</a> +can be used to isolate your unit from its dependencies.</p> + +<p class="note"><strong>Note:</strong> Unit tests are not suitable for testing +complex UI interaction events. Instead, you should use the UI testing frameworks, as described in +<a href="{@docRoot}training/testing/ui-testing/index.html">Automating UI Tests</a>.</p> + +<p>For testing Android apps, you typically create these types of automated unit tests:</p> + +<ul> +<li><strong>Local tests:</strong> Unit tests that run on your local machine only. These tests are +compiled to run locally on the Java Virtual Machine (JVM) to minimize execution time. Use this +approach to run unit tests that have no dependencies on the Android framework or have dependencies +that can be filled by using mock objects.</li> +<li><strong>Instrumented tests:</strong> Unit tests that run on an Android device or emulator. +These tests have access to instrumentation information, such as the +{@link android.content.Context} for the app under test. Use this approach to run unit tests that +have Android dependencies which cannot be easily filled by using mock objects.</li> +</ul> + +<p>The lessons in this class teach you how to build these types of automated unit tests.</p> + +<h2>Lessons</h2> +<dl> + <dt><strong><a href="local-unit-tests.html"> +Building Local Unit Tests</a></strong></dt> + <dd>Learn how to build unit tests that run on your local machine.</dd> + <dt><strong><a href="instrumented-unit-tests.html"> +Building Instrumented Unit Tests</a></strong></dt> + <dd>Learn how to build unit tests that run on an Android device or emulator.</dd> +</dl>
\ No newline at end of file diff --git a/docs/html/training/testing/unit-testing/instrumented-unit-tests.jd b/docs/html/training/testing/unit-testing/instrumented-unit-tests.jd new file mode 100644 index 0000000..07f0f73 --- /dev/null +++ b/docs/html/training/testing/unit-testing/instrumented-unit-tests.jd @@ -0,0 +1,250 @@ +page.title=Building Instrumented Unit Tests +page.tags=testing,androidjunitrunner,junit,unit test,mock,instrumentation +trainingnavtop=true + +@jd:body + +<!-- This is the training bar --> +<div id="tb-wrapper"> +<div id="tb"> + <h2>Dependencies and Prerequisites</h2> + + <ul> + <li>Android 2.2 (API level 8) or higher</li> + <li><a href="{@docRoot}tools/testing-support-library/index.html"> + Android Testing Support Library</a></li> + </ul> + + <h2>This lesson teaches you to</h2> + + <ol> + <li><a href="#setup">Set Up Your Testing Environment</a></li> + <li><a href="#build">Create a Instrumented Unit Test Class</a></li> + <li><a href="#run">Run Instrumented Unit Tests</a></li> + </ol> + + <h2>Try it out</h2> + + <ul> + <li> +<a href="https://github.com/googlesamples/android-testing/tree/master/unittesting/BasicUnitAndroidTest" +class="external-link">Instrumented Unit Tests Code Samples</a></li> + </ul> +</div> +</div> + +<p> +Instrumented unit tests are unit tests that run on physical devices and emulators, instead of +the Java Virtual Machine (JVM) on your local machine. You should create instrumented unit tests +if your tests need access to instrumentation information (such as the target app's +{@link android.content.Context}) or if they require the real implementation of an Android framework +component (such as a {@link android.os.Parcelable} or {@link android.content.SharedPreferences} +object). Using instrumented unit tests also helps to reduce the effort required to write and +maintain mock code. You are still free to use a mocking framework, if you choose, to simulate any +dependency relationships. Instrumented unit tests can take advantage of the Android framework APIs +and supporting APIs, such as the Android Testing Support Library. +</p> + +<h2 id="setup">Set Up Your Testing Environment</h2> +<p>Before building instrumented unit tests, you must:</p> + + <ul> + <li> + <strong>Install the Android Testing Support Library</strong>. The + <a href="{@docRoot}reference/android/support/test/runner/AndroidJUnitRunner.html"> + {@code AndroidJUnitRunner}</a> API, located under the + {@code com.android.support.test.runner} package, allows you to + create and run instrumented unit tests. To learn how to install the + library, see <a href="{@docRoot}tools/testing-support-library/index.html#setup"> + Testing Support Library Setup</a>. + </li> + + <li> + <strong>Set up your project structure.</strong> In your Gradle project, the source code for + the target app that you want to test is typically placed under the {@code app/src/main/java} + folder. The source code for instrumentatation tests, including your unit tests, must be + placed under the <code>app/src/androidTest/java</code> folder. + To learn more about setting up your project directory, see + <a href="{@docRoot}tools/projects/index.html">Managing Projects</a>. + </li> + + <li> + <strong>Specify your Android testing dependencies</strong>. In order for the + <a href="{@docRoot}tools/building/plugin-for-gradle.html">Android Plug-in for Gradle</a> to + correctly build and run your instrumented unit tests, you must specify the following + libraries in the {@code build.gradle} file of your Android app module: + + <pre> +dependencies { + androidTestCompile 'com.android.support.test:runner:0.2' + androidTestCompile 'com.android.support.test:rules:0.2' + // Set this dependency if you want to use Hamcrest matching + androidTestCompile 'org.hamcrest:hamcrest-library:1.1' +} +</pre> + </li> + </ul> + +<h2 id="build">Create an Instrumented Unit Test Class</h2> +<p> +Your instrumented unit test class should be written as a JUnit 4 test class. To learn more about +creating JUnit 4 test classes and using JUnit 4 assertions and annotations, see +<a href="local-unit-tests.html#build">Create a Local Unit Test Class</a>. +</p> +<p>To create an instrumented JUnit 4 test class, add the {@code @RunWith(AndroidJUnit4.class)} +annotation at the beginning of your test class definition. You also need to specify the +<a href="{@docRoot}reference/android/support/test/runner/AndroidJUnitRunner.html"> +{@code AndroidJUnitRunner}</a> class +provided in the Android Testing Support Library as your default test runner. This step is described +in more detail in <a href="#run">Run Instrumented Unit Tests</a>. +</p> + +<p>The following example shows how you might write an instrumented unit test to test that +the {@link android.os.Parcelable} interface is implemented correctly for the +{@code LogHistory} class:</p> + +<pre> +import android.os.Parcel; +import android.support.test.runner.AndroidJUnit4; +import android.util.Pair; +import org.junit.Test; +import org.junit.runner.RunWith; +import java.util.List; +import static org.hamcrest.Matchers.is; +import static org.junit.Assert.assertThat; + +@RunWith(AndroidJUnit4.class) +public class LogHistoryAndroidUnitTest { + + public static final String TEST_STRING = "This is a string"; + public static final long TEST_LONG = 12345678L; + private LogHistory mLogHistory; + + @Before + public void createLogHistory() { + mLogHistory = new LogHistory(); + } + + @Test + public void logHistory_ParcelableWriteRead() { + // Set up the Parcelable object to send and receive. + mLogHistory.addEntry(TEST_STRING, TEST_LONG); + + // Write the data. + Parcel parcel = Parcel.obtain(); + mLogHistory.writeToParcel(parcel, mLogHistory.describeContents()); + + // After you're done with writing, you need to reset the parcel for reading. + parcel.setDataPosition(0); + + // Read the data. + LogHistory createdFromParcel = LogHistory.CREATOR.createFromParcel(parcel); + List<Pair<String, Long>> createdFromParcelData = createdFromParcel.getData(); + + // Verify that the received data is correct. + assertThat(createdFromParcelData.size(), is(1)); + assertThat(createdFromParcelData.get(0).first, is(TEST_STRING)); + assertThat(createdFromParcelData.get(0).second, is(TEST_LONG)); + } +} +</pre> + +<h3 id="test-suites">Creating a test suite</h3> +<p> +To organize the execution of your instrumented unit tests, you can group a collection of test +classes in a <em>test suite</em> class and run these tests together. Test suites can be nested; +your test suite can group other test suites and run all their component test classes together. +</p> + +<p> +A test suite is contained in a test package, similar to the main application package. By +convention, the test suite package name usually ends with the {@code .suite} suffix (for example, +{@code com.example.android.testing.mysample.suite}). +</p> + +<p> +To create a test suite for your unit tests, import the JUnit +<a href="http://junit.sourceforge.net/javadoc/org/junit/runner/RunWith.html" +class="external-link">{@code RunWith}</a> and +<a href="http://junit.sourceforge.net/javadoc/org/junit/runners/Suite.html" +class="external-link">{@code Suite}</a> classes. In your test suite, add the +{@code @RunWith(Suite.class)} and the {@code @Suite.SuitClasses()} annotations. In +the {@code @Suite.SuiteClasses()} annotation, list the individual test classes or test +suites as arguments. +</p> + +<p> +The following example shows how you might implement a test suite called {@code UnitTestSuite} +that groups and runs the {@code CalculatorInstrumentationTest} and +{@code CalculatorAddParameterizedTest} test classes together. +</p> + +<pre> +import com.example.android.testing.mysample.CalculatorAddParameterizedTest; +import com.example.android.testing.mysample.CalculatorInstrumentationTest; +import org.junit.runner.RunWith; +import org.junit.runners.Suite; + +// Runs all unit tests. +@RunWith(Suite.class) +@Suite.SuiteClasses({CalculatorInstrumentationTest.class, + CalculatorAddParameterizedTest.class}) +public class UnitTestSuite {} +</pre> + +<h2 id="run">Run Instrumented Unit Tests</h2> +<p> +The +<a href="https://developer.android.com/tools/building/plugin-for-gradle.html"> + Android Plug-in for Gradle</a> +provides a default directory ({@code src/androidTest/java}) for you to store the instrumented unit +and integration test classes and test suites that you want to run on a device. The plug-in compiles +the test code in that directory and then executes the test app using a test runner class. You must +set the +<a href="{@docRoot}reference/android/support/test/runner/AndroidJUnitRunner.html"> +{@code AndroidJUnitRunner}</a> class provided in the +<a href="{@docRoot}tools/testing-support-library/index.html">Android Testing Support Library</a> +as your default test runner.</p> +</p> + +<p>To specify +<a href="{@docRoot}reference/android/support/test/runner/AndroidJUnitRunner.html"> +{@code AndroidJUnitRunner}</a> as the default test instrumentation runner, add the following +setting in your {@code build.gradle} file:</p> +<pre> +android { + defaultConfig { + testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" + } +} +</pre> + +<h3 id="run-from-Android-Studio">Running instrumented unit tests from Android Studio</h3> +<p> +To run instrumented unit tests in your Gradle project from Android Studio: +</p> +<ol> +<li>Open the <strong>Build Variants</strong> window by clicking the left-hand tab, then set the +test artifact to <em>Android Instrumentation Tests</em>. +</li> +<li>In the <strong>Project</strong> window, drill down to your unit test class or method, then + right-click and run it using the Android Test configuration. +</li> +</ol> + +<p>Android Studio displays the results of the unit test execution in the <strong>Run</strong> +window.</p> + +<h3 id="run-from-commandline">Running instrumented unit tests from the command-line</h3> + +<p>To run instrumented unit tests in your Gradle project from the command-line, call the + {@code connectedCheck} (or {@code cC}) task:</p> + +<pre> +./gradlew cC +</pre> + +<p>You can find the generated HTML test result reports in the +{@code <path_to_your_project>/app/build/outputs/reports/androidTests/connected/} directory, +and the corresponding XML files in the +{@code <path_to_your_project>/app/build/outputs/androidTest-results/connected/} directory.</p>
\ No newline at end of file diff --git a/docs/html/training/testing/unit-testing/local-unit-tests.jd b/docs/html/training/testing/unit-testing/local-unit-tests.jd new file mode 100644 index 0000000..421709b --- /dev/null +++ b/docs/html/training/testing/unit-testing/local-unit-tests.jd @@ -0,0 +1,302 @@ +page.title=Building Local Unit Tests +page.tags=testing,androidjunitrunner,junit,unit test,mock +trainingnavtop=true + +@jd:body + +<!-- This is the training bar --> +<div id="tb-wrapper"> +<div id="tb"> + <h2>Dependencies and Prerequisites</h2> + + <ul> + <li>Android Plug-in for Gradle 1.1.0 or higher</li> + </ul> + + <h2>This lesson teaches you to</h2> + + <ol> + <li><a href="#setup">Set Up Your Testing Environment</a></li> + <li><a href="#build">Create a Local Unit Test Class</a></li> + <li><a href="#run">Run Local Unit Tests</a></li> + </ol> + + <h2>Try it out</h2> + + <ul> + <li> +<a href="https://github.com/googlesamples/android-testing/tree/master/unittesting/BasicSample" +class="external-link">Local Unit Tests Code Samples</a></li> + </ul> +</div> +</div> + +<p>If your unit test has no dependencies or only has simple dependencies on Android, you should run +your test on a local development machine. This testing approach is efficient because it helps +you avoid the overhead of loading the target app and unit test code onto a physical device or +emulator every time your test is run. Consequently, the execution time for running your unit +test is greatly reduced. With this approach, you normally use a mocking framework, like +<a href="https://code.google.com/p/mockito/" class="external-link">Mockito</a>, to fulfill any +dependency relationships.</p> + +<p><a href="{@docRoot}tools/building/plugin-for-gradle.html">Android Plug-in for Gradle</a> +version 1.1.0 and higher allows you to create a source directory ({@code src/test/java}) in your +project to store JUnit tests that you want to run on a local machine. This feature improves your +project organization by letting you group your unit tests together into a single source set. You +can run the tests from Android Studio or the command-line, and the plugin executes them on the +local Java Virtual Machine (JVM) on your development machine. </p> + +<h2 id="setup">Set Up Your Testing Environment</h2> +<p>Before building local unit tests, you must:</p> + + <ul> + <li> + <strong>Set up your project structure.</strong> In your Gradle project, the source code for + the target app that you want to test is typically placed under the {@code app/src/main/java} + folder. The source code for your local unit tests must be placed under the + <code>app/src/test/java</code> folder. + To learn more about setting up your project directory, see + <a href="#run">Run Local Unit Tests</a> and + <a href="{@docRoot}tools/projects/index.html">Managing Projects</a>. + </li> + + <li> + <strong>Specify your Android testing dependencies</strong>. In order to use JUnit 4 and + Mockito with your local unit tests, specify the following libraries in + the {@code build.gradle} file of your Android app module: + + <pre> +dependencies { + // Unit testing dependencies + testCompile 'junit:junit:4.12' + // Set this dependency if you want to use Mockito + testCompile 'org.mockito:mockito-core:1.10.19' + // Set this dependency if you want to use Hamcrest matching + androidTestCompile 'org.hamcrest:hamcrest-library:1.1' +} +</pre> + </li> + </ul> + +<h2 id="build">Create a Local Unit Test Class</h2> +<p>Your local unit test class should be written as a JUnit 4 test class. +<a href="http://junit.org/" class="external-link">JUnit</a> is the most popular +and widely-used unit testing framework for Java. The latest version of this framework, JUnit 4, +allows you to write tests in a cleaner and more flexible way than its predecessor versions. Unlike +the previous approach to Android unit testing based on JUnit 3, with JUnit 4, you do not need to +extend the {@code junit.framework.TestCase} class. You also do not need to prefix your test method +name with the {@code ‘test’} keyword, or use any classes in the {@code junit.framework} or +{@code junit.extensions} package.</p> + +<p>To create a basic JUnit 4 test class, create a Java class that contains one or more test methods. +A test method begins with the {@code @Test} annotation and contains the code to exercise +and verify a single functionality in the component that you want to test.</p> + +<p>The following example shows how you might implement a local unit test class. The test method +{@code emailValidator_CorrectEmailSimple_ReturnsTrue} verifies that the {@code isValidEmail()} +method in the app under test returns the correct result.</p> + +<pre> +import org.junit.Test; +import java.util.regex.Pattern; +import static org.junit.Assert.assertFalse; +import static org.junit.Assert.assertTrue; + +public class EmailValidatorTest { + + @Test + public void emailValidator_CorrectEmailSimple_ReturnsTrue() { + assertThat(EmailValidator.isValidEmail("name@email.com"), is(true)); + } + ... +} +</pre> + +<p>To test that components in your app return the expected results, use the +<a href="http://junit.org/javadoc/latest/org/junit/Assert.html" class="external-link"> +junit.Assert</a> methods to perform validation checks (or <em>assertions</em>) to compare the state +of the component under test against some expected value. To make tests more readable, you +can use <a href="https://code.google.com/p/hamcrest/wiki/Tutorial" class="external-link"> +Hamcrest matchers</a> (such as the {@code is()} and {@code equalTo()} methods) to match the +returned result against the expected result.</p> + +<p>In your JUnit 4 test class, you can use annotations to call out sections in your test code for +special processing, such as:</p> + +<ul> +<li> +{@code @Before}: Use this annotation to specify a block of code with test setup operations. This +code block will be invoked before each test. You can have multiple {@code @Before} methods but +the order which these methods are called is not fixed. +</li> +<li> +{@code @After}: This annotation specifies a block of code with test tear-down operations. This +code block will be called after every test method. You can define multiple {@code @After} +operations in your test code. Use this annotation to release any resources from memory. +</li> +<li> +{@code @Test}: Use this annotation to mark a test method. A single test class can contain +multiple test methods, each prefixed with this annotation. +</li> +<li> +{@code @BeforeClass}: Use this annotation to specify static methods to be invoked only once per +test class. This testing step is useful for expensive operations such as connecting to a database. +</li> +<li> +{@code @AfterClass}: Use this annotation to specify static methods to be invoked only after all +tests in the class have been run. This testing step is useful for releasing any resources allocated +in the {@code @BeforeClass} block. +</li> +<li> +{@code @Test(timeout=<milliseconds>)}: Specifies a timeout period for the test. If the +test starts but does not complete within the given timeout period, it automatically fails. You must +specify the timeout period in milliseconds, for example: {@code @Test(timeout=5000)}. +</li> +</ul> + +<h3 id="mocking-dependencies">Mocking Android dependencies</h3> +<p> +By default, the <a href="{@docRoot}tools/building/plugin-for-gradle.html"> +Android Plug-in for Gradle</a> executes your local unit tests against a modified +version of the {@code android.jar} library, which does not contain any actual code. Instead, method +calls to Android classes from your unit test throw an exception. +</p> +<p> +You can use a mocking framework to stub out external dependencies in your code, to easily test that +your component interacts with a dependency in an expected way. By substituting Android dependencies +with mock objects, you can isolate your unit test from the rest of the Android system while +verifying that the correct methods in those dependencies are called. The +<a href="https://code.google.com/p/mockito/" class="external-link">Mockito</a> mocking framework +for Java (version 1.9.5 and higher) offers compatibility with Android unit testing. +With Mockito, you can configure mock objects to return some specific value when invoked.</p> + +<p>To add a mock object to your local unit test using this framework, follow this programming model: +</p> + +<ol> +<li> +Include the Mockito library dependency in your {@code build.gradle} file, as described in +<a href="#setup">Set Up Your Testing Environment</a>. +</li> +<li>At the beginning of your unit test class definition, add the +{@code @RunWith(MockitoJUnitRunner.class)} annotation. This annotation tells the Mockito test +runner to validate that your usage of the framework is correct and simplifies the initialization of +your mock objects. +</li> +<li>To create a mock object for an Android dependency, add the {@code @Mock} annotation before +the field declaration.</li> +<li>To stub the behavior of the dependency, you can specify a condition and return +value when the condition is met by using the {@code when()} and {@code thenReturn()} methods. +</li> +</ol> + +<p> +The following example shows how you might create a unit test that uses a mock +{@link android.content.Context} object. +</p> + +<pre> +import static org.hamcrest.MatcherAssert.assertThat; +import static org.hamcrest.CoreMatchers.*; +import static org.mockito.Mockito.*; +import org.junit.Test; +import org.junit.runner.RunWith; +import org.mockito.Mock; +import org.mockito.runners.MockitoJUnitRunner; +import android.content.SharedPreferences; + +@RunWith(MockitoJUnitRunner.class) +public class UnitTestSample { + + private static final String FAKE_STRING = "HELLO WORLD"; + + @Mock + Context mMockContext; + + @Test + public void readStringFromContext_LocalizedString() { + // Given a mocked Context injected into the object under test... + when(mMockContext.getString(R.string.hello_word)) + .thenReturn(FAKE_STRING); + ClassUnderTest myObjectUnderTest = new ClassUnderTest(mMockContext); + + // ...when the string is returned from the object under test... + String result = myObjectUnderTest.getHelloWorldString(); + + // ...then the result should be the expected one. + assertThat(result, is(FAKE_STRING)); + } +} +</pre> + +<p> +To learn more about using the Mockito framework, see the +<a href="http://site.mockito.org/mockito/docs/current/org/mockito/Mockito.html" +class="external-link">Mockito API reference</a> and the +{@code SharedPreferencesHelperTest} class in the +<a href="https://github.com/googlesamples/android-testing/tree/master/unittesting/BasicSample" +class="external-link">sample code</a>. +</p> + +<h2 id="run">Run Local Unit Tests</h2> +<p> +The Android Plug-in for Gradle provides a default directory ({@code src/test/java}) for you to +store unit test classes that you want to run on a local JVM. The plug-in compiles the test code in +that directory and then executes the test app locally using the default test runner class. +</p> +<p> +As with production code, you can create unit tests for a +<a href="http://developer.android.com/tools/building/configuring-gradle.html#workBuildVariants" +class="external-link">specific flavor or build type</a>. You should keep unit tests in a test +source tree location that corresponds to your production source tree, such as: + +<table> +<tr> +<th>Path to Production Class</th> +<th>Path to Local Unit Test Class</th> +</tr> +<tr> +<td>{@code src/main/java/Foo.java}</td> +<td>{@code src/test/java/FooTest.java}</td> +</tr> +<tr> +<td>{@code src/debug/java/Foo.java}</td> +<td>{@code src/testDebug/java/FooTest.java}</td> +</tr> +<tr> +<td>{@code src/myFlavor/java/Foo.java}</td> +<td>{@code src/testMyFlavor/java/FooTest.java}</td> +</tr> +</table> + +<h3 id="run-from-Android-Studio">Running local unit tests from Android Studio</h3> +<p> +To run local unit tests in your Gradle project from Android Studio: +</p> +<ol> +<li>In the <strong>Project</strong> window, right click on the project and synchronize your project. +</li> +<li>Open the <strong>Build Variants</strong> window by clicking the left-hand tab, then change the +test artifact to <em>Unit Tests</em>. +</li> +<li>In the <strong>Project</strong> window, drill down to your unit test class or method, then +right-click and run it. +</li> +</ol> + +<p>Android Studio displays the results of the unit test execution in the <strong>Run</strong> +window.</p> + +<h3 id="run-from-commandline">Running local unit tests from the command-line</h3> + +<p>To run local unit tests in your Gradle project from the command-line, call the {@code test} task +command with the {@code --continue} option.</p> + +<pre> +./gradlew test --continue +</pre> + +<p>If there are failing tests, the command will display links to HTML reports (one per build +variant). You can find the generated HTML test result reports in the +{@code <path_to_your_project>/app/build/reports/tests/} directory, and the corresponding XML +files in the {@code <path_to_your_project>/app/build/test-results/} directory.</p>
\ No newline at end of file diff --git a/docs/html/training/training_toc.cs b/docs/html/training/training_toc.cs index 862663e..089739b 100644 --- a/docs/html/training/training_toc.cs +++ b/docs/html/training/training_toc.cs @@ -1875,6 +1875,24 @@ results." </ul> </li> </ul> + <ul> + <li class="nav-section"> + <div class="nav-section-header"><a href="<?cs var:toroot ?>training/testing/unit-testing/index.html" + description="How to build effective unit tests for Android apps."> + Building Effective Unit Tests + </a></div> + <ul> + <li><a href="<?cs var:toroot ?>training/testing/unit-testing/local-unit-tests.html"> + <span class="en">Building Local Unit Tests</span> + </a> + </li> + <li><a href="<?cs var:toroot ?>training/testing/unit-testing/instrumented-unit-tests.html"> + <span class="en">Building Instrumented Unit Tests</span> + </a> + </li> + </ul> + </li> + </ul> </li> <!-- End best Testing --> |
