diff options
157 files changed, 2330 insertions, 5678 deletions
diff --git a/docs/html/auto/index.jd b/docs/html/auto/index.jd index ca63a54..66ea15a 100644 --- a/docs/html/auto/index.jd +++ b/docs/html/auto/index.jd @@ -3,7 +3,7 @@ page.viewport_width=970 fullpage=true no_footer_links=true page.type=about -page.image=/auto/images/hero.jpg +page.image=/images/cards/android-auto_2x.png @jd:body @@ -12,9 +12,6 @@ page.image=/auto/images/hero.jpg #jd-content>.content-footer.wrap { display:none; } -#hero-height { - height:calc(100% - 100px); -} .img-logo { margin:0 auto; display:block; diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd deleted file mode 100644 index e698f38..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="layout-content-row" style="margin-top:22px"> - <div class="layout-content-col span-3"> - <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;"> - </div> - <div class="layout-content-col span-3"> - <img src="{@docRoot}design/media/buttons_text.png" style="height:94px;"> - </div> - <div class="layout-content-col span-7"> - <img src="{@docRoot}design/media/buttons_image_and_text.png" style="height:94px;"> - </div> -</div> - -<div class="layout-content-row" style="margin-top:0;"> - <div class="layout-content-col span-3"> - <p>An image alone works best when the action can be represented by a symbol that's well understood.</p> - </div> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-6"> - <p>For <strong>image-only</strong> buttons, a background isn't necessary because - users are accustomed to interacting with objects.</p> - - <div class="layout-content-row" style="margin-left:72px"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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 9c91abf..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="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="{@docRoot}design/media/dialogs_w_no_title.png"> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="{@docRoot}design/media/dialogs_w_title.png"> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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 ac3a3eb..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="layout-content-row"> - <div class="layout-content-col span-7"> - - <img src="{@docRoot}design/media/gridview_vertical.png"> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-7"> - - <img src="{@docRoot}design/media/gridview_horizontal.png"> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-7"> - - <img src="{@docRoot}design/media/gridview_style.png"> - - </div> - <div class="layout-content-col span-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 6f69feb..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="layout-content-row clearfix"> - <div class="layout-content-col span-9"> - - <img src="{@docRoot}design/media/lists_main.png"> - - </div> - <div class="layout-content-col span-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 fb5e287..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="layout-content-row"> - <div class="layout-content-col span-6"> - - <img src="{@docRoot}design/media/picker_space.png"> - - </div> - <div class="layout-content-col span-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 2de75dc..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="layout-content-row"> - <div class="layout-content-col span-6"> - - <img src="{@docRoot}design/media/progress_activity.png"> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-6"> - - <img src="{@docRoot}design/media/progress_activity2.png"> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-9"> - <img src="{@docRoot}design/media/progress_activity_custom_app.png"> - </div> - <div class="layout-content-col span-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 5c42102..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="layout-content-row"> - <div class="layout-content-col span-9"> - - <img src="{@docRoot}design/media/seekbar_example.png"> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-9"> - - <img src="{@docRoot}design/media/seekbar_style.png"> - <div class="figure-caption"> - Seek bars in Holo Light & Dark - </div> - - </div> - <div class="layout-content-col span-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 3a74ccf..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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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 078de92..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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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 19c22f9..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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-9"> - - <img src="{@docRoot}design/media/text_input_textselection.png"> - - </div> - <div class="layout-content-col span-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/devices.jd b/docs/html/design/devices.jd index c67e585..3d23d07 100644 --- a/docs/html/design/devices.jd +++ b/docs/html/design/devices.jd @@ -1,8 +1,9 @@ -page.title=Devices +page.title=Android devices page.viewport_width=970 section.landing=true header.hide=1 footer.hide=1 +page.image=images/cards/android-devices_2x.jpg @jd:body <style> diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd index 4111bca..089a4af 100644 --- a/docs/html/design/downloads/index.jd +++ b/docs/html/design/downloads/index.jd @@ -3,121 +3,30 @@ 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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-4"> - - <img src="{@docRoot}design/media/downloads_stencils.png"> - - </div> - - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_style.png"> - - </div> - - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>UI toolkit</h4> <p>The toolkit contains detailed specs and measurements of all of the primary Android Wear UI components. Available in PDF and Illustrator formats.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_toolkit.png" width="220"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit AI');" href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.ai">Adobe® Illustrator® Toolkit</a> @@ -127,18 +36,18 @@ modify to match your theme, plus source files.</p> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Sample user flow patterns</h4> <p>Examples of how to chain together simple Android Wear UI components into common user flow patterns, from simple notifications to complex interactions involving full screen activities. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_flows.png" width="220"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns AI');" href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.ai">Adobe® Illustrator® App Patterns</a> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns PDF');" @@ -147,182 +56,100 @@ modify to match your theme, plus source files.</p> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Sample app design mocks</h4> <p>Stream cards and UI elements for some example apps in fully editable PSD format. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_psds.png" width="220"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Sample PSD Mocks');" href="{@docRoot}downloads/design/Android_Wear_Sample_Assets.zip">Adobe® Photoshop® mocks</a> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Watch faces UI toolkit</h4> <p>Detailed specifications and measurements for the the background canvas, notification cards, and system indicators. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_DesignSpec_Icon.png" width="220"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Specifications');" href="{@docRoot}downloads/design/AndroidWear_DesignSpec_11.13.pdf">PDF Toolkit</a> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Slide watch face</h4> <p>Example of a watch face design in AI format. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_Slide_Ai_Icon.png" width="150" style="width:150px;margin:0 auto;display:block"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example');" href="{@docRoot}downloads/design/Slide.ai">Adobe® Illustrator® Design</a> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Slide watch face specifications</h4> <p>Design specifications for the Slide watch face in PSD format. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_Slide_Psd_Icon.png" width="150" style="width:150px;margin:0 auto;display:block"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');" href="{@docRoot}downloads/design/Slide.psd">Adobe® Photoshop® Specifications</a> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Watch face icon example</h4> <p>Template for creating watch face icons for the carousel on Android Wear devices. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_Slide_IconExample.png" width="150" style="width:150px;margin:0 auto;display:block"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-4"> - - <img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png"> - - </div> - - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-4"> - - <img src="{@docRoot}design/media/downloads_color_swatches.png"> - - </div> - - <div class="layout-content-col span-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="layout-content-col span-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 9261c6e..974d5d0 100644 --- a/docs/html/design/get-started/creative-vision.jd +++ b/docs/html/design/get-started/creative-vision.jd @@ -1,4 +1,5 @@ page.title=Creative Vision +page.image=images/cards/design-creative-vision_2x.jpg @jd:body <img src="{@docRoot}design/media/creative_vision_main.png"> @@ -6,16 +7,15 @@ page.title=Creative Vision <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> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <h4>Enchant me</h4> <p>Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels. @@ -24,7 +24,7 @@ of art in their own right. Just like a well-made tool, your app should strive to simplicity and purpose to create a magical experience that is effortless and powerful.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <h4>Simplify my life</h4> <p>Android apps make life easier and are easy to understand. When people use your app for the first @@ -35,7 +35,7 @@ of all ages and cultures feel firmly in control, and are never overwhelmed by to irrelevant flash.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <h4>Make me amazing</h4> <p>It's not enough to make an app that is easy to use. Android apps empower people to try new things diff --git a/docs/html/design/get-started/principles.jd b/docs/html/design/get-started/principles.jd index 73ec3a6..172a4e4 100644 --- a/docs/html/design/get-started/principles.jd +++ b/docs/html/design/get-started/principles.jd @@ -14,8 +14,8 @@ creativity and design thinking. Deviate with purpose. <h2 id="enchant-me">Enchant Me</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="delight-me">Delight me in surprising ways</h4> <p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to @@ -23,7 +23,7 @@ experience. Subtle effects contribute to a feeling of effortlessness and a sense force is at hand.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_delight.png"> @@ -32,15 +32,15 @@ force is at hand.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="real-objects-more-fun">Real objects are more fun than buttons and menus</h4> <p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_real_objects.png"> @@ -49,8 +49,8 @@ needed to perform a task while making it more emotionally satisfying.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="make-it-mine">Let me make it mine</h4> <p>People love to add personal touches because it helps them feel at home and in control. Provide @@ -58,7 +58,7 @@ sensible, beautiful defaults, but also consider fun, optional customizations tha primary tasks.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_make_it_mine.png"> @@ -67,15 +67,15 @@ primary tasks.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="get-to-know-me">Get to know me</h4> <p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and over, place previous choices within easy reach.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_get_to_know_me.png"> @@ -84,14 +84,14 @@ over, place previous choices within easy reach.</p> <h2 id="simplify-my-life">Simplify My Life</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="keep-it-brief">Keep it brief</h4> <p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_keep_it_brief.png"> @@ -100,15 +100,15 @@ over, place previous choices within easy reach.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="pictures-faster-than-words">Pictures are faster than words</h4> <p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient than words.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_pictures.png"> @@ -117,15 +117,15 @@ than words.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="decide-for-me">Decide for me but let me have the final say</h4> <p>Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_decide_for_me.png"> @@ -134,15 +134,15 @@ unhappy. Just in case you get it wrong, allow for 'undo'.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="only-show-when-i-need-it">Only show what I need when I need it</h4> <p>People get overwhelmed when they see too much at once. Break tasks and information into small, digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_information_when_need_it.png"> @@ -151,15 +151,15 @@ digestible chunks. Hide options that aren't essential at the moment, and teach p <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="always-know-where-i-am">I should always know where I am</h4> <p>Give people confidence that they know their way around. Make places in your app look distinct and use transitions to show relationships among screens. Provide feedback on tasks in progress.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_navigation.png"> @@ -168,8 +168,8 @@ use transitions to show relationships among screens. Provide feedback on tasks i <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="never-lose-my-stuff">Never lose my stuff</h4> <p>Save what people took time to create and let them access it from anywhere. Remember settings, @@ -177,7 +177,7 @@ personal touches, and creations across phones, tablets, and computers. It makes easiest thing in the world.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_never_lose_stuff.png"> @@ -186,15 +186,15 @@ easiest thing in the world.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="looks-same-should-act-same">If it looks the same, it should act the same</h4> <p>Help people discern functional differences by making them visually distinct rather than subtle. Avoid modes, which are places that look similar but act differently on the same input.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_looks_same.png"> @@ -203,15 +203,15 @@ Avoid modes, which are places that look similar but act differently on the same <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="interrupt-only-if-important">Only interrupt me if it's important</h4> <p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_important_interruption.png"> @@ -220,8 +220,8 @@ focused, and unless it's critical and time-sensitive, an interruption can be tax <h2 id="make-me-amazing">Make Me Amazing</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="give-me-tricks">Give me tricks that work everywhere</h4> <p>People feel great when they figure things out for themselves. Make your app easier to learn by @@ -229,7 +229,7 @@ leveraging visual patterns and muscle memory from other Android apps. For exampl may be a good navigational shortcut.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_tricks.png"> @@ -238,8 +238,8 @@ may be a good navigational shortcut.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="its-not-my-fault">It's not my fault</h4> <p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your @@ -247,7 +247,7 @@ app. If something goes wrong, give clear recovery instructions but spare them th If you can fix it behind the scenes, even better.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_error.png"> @@ -256,15 +256,15 @@ If you can fix it behind the scenes, even better.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="sprinkle-encouragement">Sprinkle encouragement</h4> <p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions, even if it's just a subtle glow.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png"> @@ -273,8 +273,8 @@ even if it's just a subtle glow.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="do-heavy-lifting-for-me">Do the heavy lifting for me</h4> <p>Make novices feel like experts by enabling them to do things they never thought they could. For @@ -282,7 +282,7 @@ example, shortcuts that combine multiple photo effects can make amateur photogra only a few steps.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_heavy_lifting.png"> @@ -291,15 +291,15 @@ only a few steps.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="make-important-things-fast">Make important things fast</h4> <p>Not all actions are equal. Decide what's most important in your app and make it easy to find and fast to use, like the shutter button in a camera, or the pause button in a music player.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_make_important_fast.png"> diff --git a/docs/html/design/handhelds/index.jd b/docs/html/design/handhelds/index.jd index 882b070..81c2c19 100644 --- a/docs/html/design/handhelds/index.jd +++ b/docs/html/design/handhelds/index.jd @@ -20,8 +20,8 @@ and tablets. <div class="vspace size-1"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <img src="{@docRoot}design/media/ui_overview_home_screen.png"> @@ -34,7 +34,7 @@ regardless of which panel is currently showing.</p> the Favorites Tray.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/ui_overview_all_apps.png"> @@ -45,7 +45,7 @@ device.</p> any Home screen.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/ui_overview_recents.png"> @@ -94,13 +94,13 @@ provide updates, reminders, or information that's important, but not critical en interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a notification opens the associated app. <a href="{@docRoot}design/patterns/notifications.html">More on Notifications</a></p> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <img src="{@docRoot}design/media/ui_overview_notifications.png"> </div> - <div class="layout-content-col span-9"> + <div class="col-9"> <img src="{@docRoot}design/media/notifications_dismiss.png"> @@ -116,13 +116,13 @@ notification opens the associated app. <a href="{@docRoot}design/patterns/notifi <h2 id="app">Common App UI</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <img src="{@docRoot}design/media/app_structure_drawer.png"> </div> - <div class="layout-content-col span-6 with-callouts"> + <div class="col-6 with-callouts"> <p>A typical Android app uses action bars, and many apps will include a navigation drawer.</p> <ol> diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd index 47e8d26..638f35b 100644 --- a/docs/html/design/index.jd +++ b/docs/html/design/index.jd @@ -1,3 +1,4 @@ +fullpage=true page.title=Design page.viewport_width=970 section.landing=true @@ -6,43 +7,67 @@ header.hide=1 footer.hide=1 @jd:body -<style> -#landing-graphic-container { - position: relative; -} - -#text-overlay { - position: absolute; - left: 0; - top: 42px; - width: 266px; - -} -#hero-image { - padding-left:68px; -} -</style> - -<div id="landing-graphic-container"> - <div id="text-overlay"> - <span itemprop="description">Welcome to <strong>Android Design</strong>, your place for - learning how to design exceptional Android apps.</span> - <br><br> - Want to know what <strong>Android 5.0</strong> has for designers? See <a href="{@docRoot}design/patterns/new.html">New in Android</a>.<br><br> - <a href="/design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a> +<section class="dac-expand dac-hero dac-light"> + <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="/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> + <p class="dac-hero-description"> + 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="https://www.google.com/design/spec/resources/color-palettes.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Downloads for designers + </a><br> + <a class="dac-hero-cta" href="https://google.com/design/articles/"> + <span class="dac-sprite dac-auto-chevron"></span> + Articles + </a> + </div> + </div> + <div class="dac-section dac-small"> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:design/landing/materialdesign" + data-cardSizes="6x2" + data-maxResults="6"></div> + </div> </div> - <a id="hero-image" href="/design/get-started/creative-vision.html"> - <img src="{@docRoot}design/media/index_landing_page.png" width="760" height="600" alt="" - srcset="{@docRoot}design/media/index_landing_page_2x.png 2x"/> - </a> +</section> -<div style="background: hsl(8, 70%, 54%); margin: 0; padding: 20px 20px 10px 20px;color: #fff; position: absolute;top: 255px;width: 179px;"> -<h2 style="color: #fff;margin:0 0 10px; font-size:18px" class="norule">Material Design</h2> -<p>Android 5.0 introduces a design -metaphor inspired by paper and ink that provides a reassuring sense of tactility. -</p> -<p><a class="white" href="{@docRoot}design/material/index.html">Learn more</a></p> -</div> +<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:design/landing/latest" + data-cardSizes="6x6" + data-maxResults="3"></div> +</div></section> -</div> +<section class="dac-section dac-light"><div class="wrap"> + <h1 class="dac-section-title">Pure Android</h1> + <div class="dac-section-subtitle"> + 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" + data-cardSizes="6x6" + data-maxResults="6"></div> +</div></section> +<section class="dac-section dac-gray"><div class="wrap"> + <h1 class="dac-section-title">Resources</h1> + <div class="dac-section-subtitle"> + 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" + data-cardSizes="6x2" + data-maxResults="6"></div> +</div></section> diff --git a/docs/html/design/material/index.jd b/docs/html/design/material/index.jd index 4d9a1a7..c5893a7 100644 --- a/docs/html/design/material/index.jd +++ b/docs/html/design/material/index.jd @@ -1,7 +1,7 @@ -page.title=Material Design +page.title=Material Design for Android page.tags=Material,design page.type=design -page.image=design/material/images/MaterialLight.png +page.image=images/cards/design-material-for-android_2x.jpg @jd:body diff --git a/docs/html/design/media/hero-material-design.png b/docs/html/design/media/hero-material-design.png Binary files differnew file mode 100644 index 0000000..55c4420 --- /dev/null +++ b/docs/html/design/media/hero-material-design.png diff --git a/docs/html/design/patterns/accessibility.jd b/docs/html/design/patterns/accessibility.jd index b968237..b910294 100644 --- a/docs/html/design/patterns/accessibility.jd +++ b/docs/html/design/patterns/accessibility.jd @@ -48,11 +48,11 @@ page.metaDescription=Design an app that's universally accessible to people with <h4>Label visual UI elements meaningfully</h4> <p>In your wireframes, <a href="{@docRoot}guide/topics/ui/accessibility/apps.html#label-ui">label functional UI components</a> that have no visible text. Those components might be buttons, icons, tabs with icons, and icons with state (like stars). Developers can use the <code><a href="{@docRoot}guide/topics/ui/accessibility/apps.html#label-ui">contentDescription</a></code> attribute to set the label.</p> -<div class ="layout-content-row"> - <div class="layout-content-col span-8"> +<div class ="cols"> + <div class="col-8"> <img src="{@docRoot}design/media/accessibility_contentdesc.png"> </div> - <div class="layout-content-col span-5 with-callouts"> + <div class="col-5 with-callouts"> <ol> <li class="value-1">group</li> <li class="value-2">all contacts</li> @@ -95,4 +95,4 @@ page.metaDescription=Design an app that's universally accessible to people with <li>Provide alternatives to affordances that time out</li> <li>Use standard framework controls or enable TalkBack for custom controls</li> <li>Try it out yourself</li> -</ul>
\ No newline at end of file +</ul> diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index 5467722..ef02c53 100644 --- a/docs/html/design/patterns/actionbar.jd +++ b/docs/html/design/patterns/actionbar.jd @@ -34,8 +34,8 @@ page.metaDescription=The Action bar is an essential design element for all apps. <p>The action bar is split into four different functional areas that apply to most apps.</p> <img src="{@docRoot}design/media/action_bar_basics.png"> -<div class="layout-content-row"> - <div class="layout-content-col span-7 with-callouts"> +<div class="cols"> + <div class="col-7 with-callouts"> <ol> <li class="value-1"><h4>App icon</h4> @@ -57,7 +57,7 @@ Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navig </ol> </div> - <div class="layout-content-col span-6 with-callouts"> + <div class="col-6 with-callouts"> <ol> <li class="value-2"><h4>View control</h4> @@ -107,8 +107,8 @@ content across multiple bars located below the main action bar or at the bottom <h2 id="considerations-split-action-bars">Layout Considerations for Split Action Bars</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-8 with-callouts"> +<div class="cols"> + <div class="col-8 with-callouts"> <p>When splitting up content across multiple action bars, you generally have three possible locations for action bar content:</p> @@ -124,7 +124,7 @@ the top bar.</p> <p>To display actions and, if necessary, the action overflow, use the bottom bar.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <img src="{@docRoot}design/media/action_bar_pattern_considerations.png"> @@ -144,8 +144,8 @@ action overflow. The action bar should show only those actions that are availabl <p>For guidance on prioritizing actions, use the FIT scheme.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <p><strong>F — Frequent</strong></p> <ul> @@ -155,7 +155,7 @@ action overflow. The action bar should show only those actions that are availabl </ul> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <p><strong>I — Important</strong></p> <ul> @@ -164,7 +164,7 @@ action overflow. The action bar should show only those actions that are availabl </ul> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <p><strong>T — Typical</strong></p> <ul> @@ -194,8 +194,8 @@ files for further customization. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Action overflow</h4> <p>The action overflow in the action bar provides access to your app's less frequently used actions. @@ -203,7 +203,7 @@ The overflow icon only appears on phones that have no menu hardware keys. Phones display the action overflow when the user presses the key.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/action_bar_pattern_overflow.png"> <div class="figure-caption"> @@ -285,4 +285,4 @@ actions exceeds the capacity of the main action bar, display them separately in <p>Sometimes it is important to display contextual information for your app that's always visible. Examples are the number of unread messages in a messaging inbox view or the Now Playing information in a music player. Carefully plan which important information you would like to display and -structure your action bars accordingly.</p>
\ No newline at end of file +structure your action bars accordingly.</p> diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd index 404dd4d..4f3106e 100644 --- a/docs/html/design/patterns/app-structure.jd +++ b/docs/html/design/patterns/app-structure.jd @@ -25,13 +25,13 @@ page.tags=navigation,layout,tablet <p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is deep and complex, category views connect top level and detail views.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-9"> +<div class="cols"> + <div class="col-9"> <img src="{@docRoot}design/media/app_structure_overview.png"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <h4>Top level views</h4> <p>The top level of the app typically consists of the different views that your app supports. The views @@ -57,8 +57,8 @@ visitors alike.</p> <p>Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure your start screen experience accordingly.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Put content forward</h4> <p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to @@ -66,7 +66,7 @@ the meat of your app right away by making content the centerpiece of your start layouts that are visually engaging and appropriate for the data type and screen size.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/app_structure_market.png"> <div class="figure-caption"> @@ -80,8 +80,8 @@ layouts that are visually engaging and appropriate for the data type and screen <h4>Set up action bars for navigation and actions</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <p>All screens in your app should display action bars to provide consistent navigation and surface important actions.</p> @@ -96,7 +96,7 @@ important actions.</p> </ul> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/app_structure_gmail.png"> <div class="figure-caption"> @@ -111,8 +111,8 @@ important actions.</p> <p>The top level communicates your app’s capabilities by introducing the user to the major functional areas. In many cases the top level will consist of multiple views, and you need to make sure that the user can navigate between them efficiently. Android supports a number of view controls for this task. Use the control that best matches your app's navigation needs:</p> <h4>Fixed tabs</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p><em>Fixed tabs</em> display top-level views concurrently and make it easy to explore and switch between them. They are always visible on the screen, and can't be moved out of the way like scrollable tabs. <em>Fixed tabs</em> should always allow the user to navigate between the views by swiping left or right on the content area.</p> <p><strong>Use tabs if</strong>:</p> <ul> @@ -122,7 +122,7 @@ important actions.</p> </ul> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/app_structure_default_tabs.png"> <div class="figure-caption"> @@ -132,8 +132,8 @@ important actions.</p> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Spinners</h4> <p>A <em>spinner</em> is a drop-down menu that allows users to switch between views of your app. </p> @@ -144,7 +144,7 @@ important actions.</p> </ul> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/app_structure_spinner.png"> <div class="figure-caption"> @@ -155,8 +155,8 @@ important actions.</p> </div> <h4>Navigation drawers</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p>A <em>navigation drawer</em> is a slide-out menu that allows users to switch between views of your app. It can hold a large number of items and is accessible from anywhere in your app. Navigation drawers show your app's top-level views, but can also provide navigation to lower-level screens. This makes them particularly suitable for complex apps.</p> <p><strong>Use navigation drawers if</strong>:</p> @@ -169,7 +169,7 @@ important actions.</p> </ul> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/app_structure_drawer.png"> <div class="figure-caption"> Navigation drawer from the Keep app. @@ -196,8 +196,8 @@ experience than to an explicit navigation step.</p> <div class="vspace size-1"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <p>If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to @@ -210,7 +210,7 @@ minimize navigational effort. Rule of thumb: no more than 5–7 tabs.</p> </div> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are in view at the same time.</p> @@ -257,14 +257,14 @@ design guide.</p> <p>The detail view allows you to view and act on your data. The layout of the detail view depends on the data type being displayed, and therefore differs widely among apps.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <h4>Layout</h4> <p>Consider the activities people will perform in the detail view and arrange the layout accordingly.</p> </div> - <div class="layout-content-col span-9"> + <div class="col-9"> <img src="{@docRoot}design/media/app_structure_people_detail.png"> diff --git a/docs/html/design/patterns/buttons.jd b/docs/html/design/patterns/buttons.jd index 2d65b2d..085acec 100644 --- a/docs/html/design/patterns/buttons.jd +++ b/docs/html/design/patterns/buttons.jd @@ -19,13 +19,13 @@ page.tags=buttons back into view. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Lean Back</h4> <p>Touch the screen anywhere to bring back system bars. </p> <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>Immersive</h4> <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> @@ -69,8 +69,8 @@ page.tags=buttons interrupted by accidental touches and swipes. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> </div> diff --git a/docs/html/design/patterns/compatibility.jd b/docs/html/design/patterns/compatibility.jd index dfc52c0..2905676 100644 --- a/docs/html/design/patterns/compatibility.jd +++ b/docs/html/design/patterns/compatibility.jd @@ -20,8 +20,8 @@ page.metaDescription=Notes on how Android 4.x adapts UI designed for older hardw <h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Phones with virtual navigation controls</h4> <p>Android apps written for Android 3.0 and later display actions in the action bar. Actions that don't @@ -30,15 +30,15 @@ action overflow.</p> <p>Users access the action overflow by touching it in the action bar.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/compatibility_virtual_nav.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Phones with physical navigation keys</h4> <p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at @@ -46,15 +46,15 @@ the bottom of the screen. Instead, the action overflow is available from the men resulting actions popup has the same style as in the previous example, but is displayed at the bottom of the screen.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/compatibility_physical_buttons.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Legacy apps on phones with virtual navigation controls</h4> <p>When you run an app that was built for Android 2.3 or earlier on a phone with virtual navigation @@ -62,7 +62,7 @@ controls, an action overflow control appears at the right side of the virtual na can touch the control to display the app's actions in the traditional Android menu styling.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/compatibility_legacy_apps.png"> diff --git a/docs/html/design/patterns/confirming-acknowledging.jd b/docs/html/design/patterns/confirming-acknowledging.jd index d39d32d..201e5a0 100644 --- a/docs/html/design/patterns/confirming-acknowledging.jd +++ b/docs/html/design/patterns/confirming-acknowledging.jd @@ -4,12 +4,12 @@ page.tags=dialog,toast,notification <p>In some situations, when a user invokes an action in your app, it's a good idea to <em>confirm</em> or <em>acknowledge</em> that action through text.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/confirm_ack_confirming.png"> <p><strong>Confirming</strong> is asking the user to verify that they truly want to proceed with an action they just invoked. In some cases, the confirmation is presented along with a warning or critical information related to the action that they need to consider.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/confirm_ack_acknowledge.png"> <p><strong>Acknowledging</strong> is displaying text to let the user know that the action they just invoked has been completed. This removes uncertainty about implicit operations that the system is taking. In some cases, the acknowledgment is presented along with an option to undo the action.</p> </div> @@ -22,14 +22,14 @@ page.tags=dialog,toast,notification <img src="{@docRoot}design/media/confirm_ack_flowchart.png"> <h2>Confirming</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Example: Google Play Books</h4> <img src="{@docRoot}design/media/confirm_ack_ex_books.png"> <p>In this example, the user has requested to delete a book from their Google Play library. An <a href="{@docRoot}design/building-blocks/dialogs.html#alerts">alert</a> appears to confirm this action because it's important to understand that the book will no longer be available from any device.</p> <p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <h4>Example: Android Beam</h4> <img src="{@docRoot}design/media/confirm_ack_ex_beam.png"> <p>Confirmations don't necessarily have to be presented in an alert with two buttons. After initiating Android Beam, the user is prompted to touch the content to be shared (in this example, it's a photo). If they decide not to proceed, they simply move their phone away.</p> @@ -37,15 +37,15 @@ page.tags=dialog,toast,notification </div> <h2>Acknowledging</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Example: Abandoned Gmail draft saved</h4> <img src="{@docRoot}design/media/confirm_ack_ex_draftsave.png"> <p>In this example, if the user navigates back or up from the Gmail compose screen, something possibly unexpected happens: the current draft is automatically saved. An acknowledgment in the form of a toast makes that apparent. It fades after a few seconds.</p> <p>Undo isn't appropriate here because saving was initiated by the app, not the user. And it's quick and easy to resume composing the message by navigating to the list of drafts.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>Example: Gmail conversation deleted</h4> <img src="{@docRoot}design/media/confirm_ack_draft_deleted.png"> <p>After the user deletes a conversation from the list in Gmail, an acknowledgment appears with an undo option. The acknowledgment remains until the user takes an unrelated action, such as scrolling the list.</p> @@ -53,14 +53,14 @@ page.tags=dialog,toast,notification </div> <h2>No Confirmation or Acknowledgment</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Example: +1'ing</h4> <img style="padding: 33px 0 30px;" src="{@docRoot}design/media/confirm_ack_ex_plus1.png"> <p><strong>Confirmation is unnecessary</strong>. If the user +1'd by accident, it's not a big deal. They can just touch the button again to undo the action.</p> <p><strong>Acknowledgment is unnecessary</strong>. The user will see the +1 button bounce and turn red. That's a very clear signal.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <h4>Example: Removing an app from the Home Screen</h4> <img src="{@docRoot}design/media/confirm_ack_ex_removeapp.png"> <p><strong>Confirmation is unnecessary</strong>. This is a deliberate action: the user must drag and drop an item onto a relatively large and isolated target. Therefore, accidents are highly unlikely. But if the user regrets the decision, it only takes a few seconds to bring it back again.</p> diff --git a/docs/html/design/patterns/fullscreen.jd b/docs/html/design/patterns/fullscreen.jd index 624d44c..1c95f21 100644 --- a/docs/html/design/patterns/fullscreen.jd +++ b/docs/html/design/patterns/fullscreen.jd @@ -19,13 +19,13 @@ page.tags=full screen,immersive,leanback back into view. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Lean Back</h4> <p>Touch the screen anywhere to bring back system bars. </p> <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>Immersive</h4> <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> @@ -69,8 +69,8 @@ page.tags=full screen,immersive,leanback interrupted by accidental touches and swipes. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> </div> diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd deleted file mode 100644 index ada0735..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="layout-content-row"> - - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - - <div class="layout-content-col span-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="layout-content-col span-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/help.jd b/docs/html/design/patterns/help.jd index 97949e2..6ef155a 100644 --- a/docs/html/design/patterns/help.jd +++ b/docs/html/design/patterns/help.jd @@ -21,8 +21,8 @@ page.tags=settings,preferences <em>To teach high value functionality that's only available through a gesture.</em></p> <p>For example, we use help content to teach users how to place apps on their Home screen. This functionality is:</p> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <ul> <li><strong>High value</strong> <p style="margin-top:0;">Without it, users wouldn't be able to customize the most frequently visited Android screen to meet their needs.</p></li> @@ -31,7 +31,7 @@ page.tags=settings,preferences </ul> <p>However, not all high value gesture-only functionality needs a tutorial. For example, don't teach users how to scroll content. They already know how because it's a fundamental, system-wide interaction.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <img src="{@docRoot}design/media/help_cling.png"> <div class="figure-caption"> The first time each user visits the All Apps screen, a semi-transparent overlay appears to teach an important gesture. @@ -44,11 +44,11 @@ page.tags=settings,preferences <p>On every screen in your app, offer help in the <a href="{@docRoot}design/patterns/actionbar.html">action overflow</a>. Always make it the very last item in the menu and label it "Help".</p> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <img src="{@docRoot}design/media/help_overflow.png"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/help_solo_overflow.png"> <div class="figure-caption"> Even if your screen has no other action overflow items, "Help" should appear there and not be promoted to the action bar. @@ -67,28 +67,28 @@ page.tags=settings,preferences <p>When someone chooses "Help":</p> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <img src="{@docRoot}design/media/help_dont.png"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/help_better.png"> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <img src="{@docRoot}design/media/help_evenbetter.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <h4 class="do-dont-label bad">Don't</h4> <p>Present a dialog asking them to choose between help and other options.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <h4 class="do-dont-label good">Better</h4> <p>Immediately launch a web browser with help content. Place other options in a footer.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <h4 class="do-dont-label good">Even Better</h4> <p>Build a help screen in your app and offer other options in the action bar. For example, you could let users contact you with questions or feedback through an action button. The action overflow is the ideal place for non-help information that users rarely need.</p> <p>This requires more development work than launching a web browser, but it's a nicer experience for users because they don't leave your app to get the help they need and doesn't require a network connection.</p> 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 dbe7d01..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="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="{@docRoot}design/media/multipane_stretch.png"> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="{@docRoot}design/media/multipane_stack.png"> - - </div> - <div class="layout-content-col span-5"> - -<h4>Stack</h4> -<p>Rearrange the panels on your screen to match the orientation.</p> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="{@docRoot}design/media/multipane_expand.png"> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="{@docRoot}design/media/multipane_show.png"> - - </div> - <div class="layout-content-col span-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 dbac459..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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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/new.jd b/docs/html/design/patterns/new.jd index 1523cea..47b05b2 100644 --- a/docs/html/design/patterns/new.jd +++ b/docs/html/design/patterns/new.jd @@ -1,5 +1,6 @@ page.title=New in Android page.tags=KitKat,Android 4.4 +page.image=images/cards/design-new-in-android_2x.jpg @jd:body @@ -92,8 +93,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <h3> Gestures </h3> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p> The updated <a href="{@docRoot}design/patterns/gestures.html">Gestures</a> page covers new and updated gestures introduced in Android KitKat: @@ -101,7 +102,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> gestures are used for changing the viewing size of content. </p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/gesture_doubletouch.png"> <img src="{@docRoot}design/media/gesture_doubletouchdrag.png"> </div> @@ -111,8 +112,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <h2>Android 4.1 Jelly Bean</h2> <h4>Notifications</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>Notifications have received some notable enhancements in Android 4.1:</p> <ul> <li>Users can act on notifications immediately from the drawer</li> @@ -126,7 +127,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> href="{@docRoot}design/patterns/notifications.html">Notifications</a> page for more details.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/new_notifications.png"> </div> </div> @@ -134,8 +135,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <div class="vspace size-2"> </div> <h4>Resizable Application Widgets</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>Widgets are an essential aspect of home screen customization, allowing "at-a-glance" views of an app's most important data and functionality right from the user's home screen. Android 4.1 introduces improved App Widgets that can @@ -152,7 +153,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> href="{@docRoot}design/patterns/widgets.html">Application Widgets</a> page has useful details about widget types, limitations, and design considerations.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/new_widgets.png"> </div> </div> @@ -160,8 +161,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <div class="vspace size-2"> </div> <h4>Accessibility</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-11"> +<div class="cols"> + <div class="col-11"> <p>One of Android's missions is to organize the world's information and make it universally accessible and useful. Our mission applies to all users-including people with disabilities such as visual impairment, color @@ -183,7 +184,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <a href="{@docRoot}design/patterns/widgets.html">Widgets</a> page has useful details about widget types, limitations, and design considerations.</p> </div> - <div class="layout-content-col span-2"> + <div class="col-2"> <img src="{@docRoot}design/media/new_accessibility.png"> </div> </div> @@ -191,8 +192,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <h2>Android 4.0 Ice Cream Sandwich</h2> <h4>Navigation bar</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a virtual navigation bar that houses the Back, Home and Recents buttons. Read the @@ -200,7 +201,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> pattern to learn how the OS adapts to phones with hardware buttons and how pre-Android 3.0 apps that rely on menu keys are supported.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/whats_new_nav_bar.png"> </div> </div> @@ -208,13 +209,13 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <div class="vspace size-2"> </div> <h4>Action bar</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>The action bar is the most important structural element of an Android app. It provides consistent navigation across the platform and allows your app to surface actions.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/whats_new_action_bar.png"> </div> </div> @@ -222,14 +223,14 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <div class="vspace size-2"> </div> <h4>Multi-pane layouts</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>Creating apps that scale well across different form factors and screen sizes is important in the Android world. Multi-pane layouts allow you to combine different activities that show separately on smaller devices into richer compound views for tablets.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/whats_new_multipanel.png"> </div> </div> @@ -238,13 +239,13 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <h4>Selection</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>The long press gesture which was traditionally used to show contextual actions for objects is now used for data selection. When selecting data, contextual action bars allow you to surface actions.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/whats_new_multiselect.png"> </div> </div> diff --git a/docs/html/design/patterns/notifications_k.jd b/docs/html/design/patterns/notifications_k.jd index c8ef50b..01a12a7 100644 --- a/docs/html/design/patterns/notifications_k.jd +++ b/docs/html/design/patterns/notifications_k.jd @@ -22,8 +22,8 @@ paying attention.</p> <h2>Anatomy of a notification</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Base Layout</h4> <p>At a minimum, all notifications consist of a base layout, including:</p> <ul> @@ -34,7 +34,7 @@ paying attention.</p> image is shown for the main icon</li> </ul> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/notifications_pattern_anatomy.png"> <div class="figure-caption"> Base layout of a notification @@ -54,8 +54,8 @@ for you to re-use in your application.</p> <img src="{@docRoot}design/media/notifications_pattern_expandable.png"> <h4>Actions</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p>Android supports optional actions that are displayed at the bottom of the notification. With actions, users can handle the most common tasks for a particular notification from within the notification shade without having to @@ -80,7 +80,7 @@ displaying</li> or "Open")</li> </ul> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/notifications_pattern_two_actions.png"> <div class="figure-caption"> Calendar reminder notification with two actions @@ -96,11 +96,11 @@ otherwise hidden, you must make sure that any action a user can invoke from a notification is available from within the associated application as well.</p> <h2>Design guidelines</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/notifications_pattern_personal.png"> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <h4>Make it personal</h4> <p>For notifications of items sent by another user (such as a message or status update), include that person's image.</p> @@ -264,8 +264,8 @@ other people.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4>When not to display a notification</h4> <p>There are however many other cases where notifications should not be @@ -312,20 +312,20 @@ develop a widget that they can choose to place on their home screen.</p> </ul> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/notifications_pattern_social_fail.png"> </div> </div> <h2 id="interacting-with-notifications">Interacting With Notifications</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/notifications_pattern_phone_icons.png"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <p>Notifications are indicated by icons in the notification area and can be accessed by opening the notification drawer.</p> @@ -337,8 +337,8 @@ removes it from the drawer.</p> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p><h4>Ongoing notifications</h4> <p>Ongoing notifications keep users informed about an ongoing process in the @@ -349,15 +349,15 @@ downloading a file, or encoding a video. Ongoing notifications cannot be manually removed from the notification drawer.</p></p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-12"> +<div class="cols"> + <div class="col-12"> <h4>Dialogs and toasts are for feedback not notification</h4> <p>Your app should not create a dialog or toast if it is not currently on screen. Dialogs and Toasts should only be displayed as the immediate response diff --git a/docs/html/design/patterns/pure-android.jd b/docs/html/design/patterns/pure-android.jd index a0f672e..e617711 100644 --- a/docs/html/design/patterns/pure-android.jd +++ b/docs/html/design/patterns/pure-android.jd @@ -1,4 +1,5 @@ page.title=Pure Android +page.image=images/cards/design-pure-android_2x.png @jd:body <p>Most developers want to distribute their apps on multiple platforms. As you plan your app for @@ -10,8 +11,8 @@ guidelines to avoid the most common traps and pitfalls.</p> <div class="vspace size-1"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't mimic UI elements from other platforms</h4> <p>Platforms typically provide a carefully designed set of UI elements that are themed in a very @@ -28,7 +29,7 @@ elements, customize carefully according to your specific branding - and not acco conventions of a different platform.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_ui_elements.png"> <div class="figure-caption"> @@ -40,8 +41,8 @@ conventions of a different platform.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't carry over platform-specific icons</h4> <p>Platforms typically provide sets of icons for common functionality, such as sharing, creating a new @@ -52,7 +53,7 @@ counterparts.</p> <a href="{@docRoot}design/downloads/index.html">Downloads</a> page.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_icons.png"> <div class="figure-caption"> @@ -64,8 +65,8 @@ counterparts.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't use bottom tab bars</h4> <p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention, @@ -77,7 +78,7 @@ platform and to avoid confusion between actions and view switching on Android.</ <a href="{@docRoot}design/patterns/actionbar.html">Action Bars</a>.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_ios_dialers.png"> <div class="figure-caption"> @@ -87,8 +88,8 @@ platform and to avoid confusion between actions and view switching on Android.</ </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't hardcode links to other apps</h4> <p>In some cases you might want your app to take advantage of another app's feature set. For @@ -101,7 +102,7 @@ Action Provider</em> in your action bar to provide faster access to the user's m sharing target.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_intents.png"> <div class="figure-caption"> @@ -114,8 +115,8 @@ sharing target.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't use labeled back buttons on action bars</h4> <p>Other platforms use an explicit back button with label to allow the user to navigate up the @@ -125,7 +126,7 @@ please review the <a href="{@docRoot}design/patterns/navigation.html">Navigation <p>Follow this guideline to provide a consistent navigation experience across the platform.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_ios_galleries.png"> <div class="figure-caption"> @@ -135,8 +136,8 @@ please review the <a href="{@docRoot}design/patterns/navigation.html">Navigation </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't use right-pointing carets on line items</h4> <p>A common pattern on other platforms is the display of right-pointing carets on line items that allow @@ -145,7 +146,7 @@ the user to drill deeper into additional content.</p> the platform and in order to not have the user guess as to what the meaning of those carets may be.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_ios_settings.png"> <div class="figure-caption"> diff --git a/docs/html/design/patterns/selection.jd b/docs/html/design/patterns/selection.jd deleted file mode 100644 index 7ed6dcc..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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-7"> - - <img src="{@docRoot}design/media/selection_cab_example.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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 a24d6c0..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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-2"> - -<h4>7 or fewer</h4> - - </div> - <div class="layout-content-col span-11"> - -<p>Don't group them at all. It won't benefit users and will seem like overkill.</p> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-2"> - -<h4>8 to 10</h4> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-2"> - -<h4>11 to 15</h4> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-2"> - -<h4>16 or more</h4> - - </div> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-3"> - -<h4>Checkbox</h4> -<p>Use this pattern for a setting that is either selected or not selected.</p> - - </div> - <div class="layout-content-col span-10"> - -<img src="{@docRoot}design/media/settings_checkbox.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-10"> - -<img src="{@docRoot}design/media/settings_multiple_choice.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-10"> - -<img src="{@docRoot}design/media/settings_slider.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-10"> - -<img src="{@docRoot}design/media/settings_date_time.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-10"> - -<img src="{@docRoot}design/media/settings_subscreen_navigation.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-10"> - -<img src="{@docRoot}design/media/settings_list_subscreen.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-10"> - -<img src="{@docRoot}design/media/settings_master_on_off.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-10"> - -<img src="{@docRoot}design/media/settings_master_on_off_2.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-10"> - -<img src="{@docRoot}design/media/settings_individual_on_off.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd index af5c9dc..9ee33db 100644 --- a/docs/html/design/patterns/swipe-views.jd +++ b/docs/html/design/patterns/swipe-views.jd @@ -42,8 +42,8 @@ using the swipe gesture to navigate to the next/previous detail view.</p> <h2 id="between-tabs">Swiping Between Tabs</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <div class="framed-nexus5-port-span-5"> <video class="play-on-hover" autoplay> @@ -58,7 +58,7 @@ using the swipe gesture to navigate to the next/previous detail view.</p> </div> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <p>If your app uses action bar tabs, use swipe to navigate between the different views.</p> <div class="vspace size-1"> </div> diff --git a/docs/html/design/patterns/widgets.jd b/docs/html/design/patterns/widgets.jd index 47acc7b..b149af6 100644 --- a/docs/html/design/patterns/widgets.jd +++ b/docs/html/design/patterns/widgets.jd @@ -21,18 +21,18 @@ page.metaDescription=Design guide to creating widgets that are easy to use and l <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h3>Collection widgets</h3> <p>As the name implies, collection widgets specialize in displaying multitude elements of the same type, such as a collection of pictures from a gallery app, a collection of articles from a news app or a collection of emails/messages from a communication app. Collection widgets typically focus on two use cases: browsing the collection, and opening an element of the collection to its detail view for consumption. Collection widgets can scroll vertically.</p> </div> - <div class="layout-content-col span-3"> + <div class="col-3"> <img src="{@docRoot}design/media/widgets_collection_gmail.png"> <div class="figure-caption"> ListView widget </div> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/widgets_collection_bookmarks.png"> <div class="figure-caption"> GridView widget @@ -84,8 +84,8 @@ A music player widget is primarily a control widget, but also keeps the user inf <li>Open application at top level: Tapping on an information element will usually navigate the user to a lower level detail screen. Providing access to the top level of your application provides more navigation flexibility and can replace a dedicated app shortcut that users would otherwise use to navigate to the app from the home screen. Using your application icon as an affordance can also provide your widget with a clear identity in case the data you're displaying is ambiguous.</li> </ul> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h3>Widget resizing</h3> <p>With version 3.1, Android introduced resizable widgets to the platform. Resizing allows users to adjust the height and/or the width of a widget within the constraints of the home panel placement grid. You can decide if your widget is freely resizable or if it is constrained to horizontal or vertical size changes. You do not have to support resizing if your particular widget is inherently fixed-size.</p> <p>Allowing users to resize widgets has important benefits:</p> @@ -95,7 +95,7 @@ A music player widget is primarily a control widget, but also keeps the user inf </ul> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/widgets_resizing01.png"> <div class="figure-caption"> A long press and subsequent release sets resizable widgets into resize mode. Users can use the drag handles or the widget corners to set the desired size. @@ -116,14 +116,14 @@ A music player widget is primarily a control widget, but also keeps the user inf </ul> <h3>Widget configuration</h3> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p>Sometimes widgets need to be setup before they can become useful. Think of an email widget for example, where you need to provide an account before the inbox can be displayed. Or a static photo widget where the user has to assign the picture that is to be displayed from the gallery.</p> <p>Android widgets display their configuration choices right after the widget is dropped onto a home panel. Keep the widget configuration light and don't present more than 2-3 configuration elements. Use dialog-style instead of full-screen activities to present configuration choices and retain the user's context of place, even if doing so requires use of multiple dialogs.</p> <p>Once setup, there typically is not a lot of reason to revisit the setup. Therefore Android widgets do not show a "Setup" or "Configuration" button.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/widgets_config.png"> <div class="figure-caption"> After adding a Play widget to a home panel, the widget asks the user to specify the type of media the widget should display. diff --git a/docs/html/design/style/branding.jd b/docs/html/design/style/branding.jd deleted file mode 100644 index b5bb77c..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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-6"> - <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;"> - </div> - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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/devices-displays.jd b/docs/html/design/style/devices-displays.jd index 1590363..caa77da 100644 --- a/docs/html/design/style/devices-displays.jd +++ b/docs/html/design/style/devices-displays.jd @@ -19,15 +19,15 @@ gracefully scale from large tablets to smaller phones.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <h4>Be flexible</h4> <p>Stretch and compress your layouts to accommodate various heights and widths.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <h4>Optimize layouts</h4> @@ -35,7 +35,7 @@ gracefully scale from large tablets to smaller phones.</p> multiple views to reveal more content and ease navigation.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <h4>Assets for all</h4> <p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd deleted file mode 100644 index e2cdf3f..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="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_launcher_size.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_launcher_focal.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_launcher_style.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-4"> - - </div> - <div class="layout-content-col span-7"> - - <img src="{@docRoot}design/media/iconography_launcher_example.png"> - - </div> - <!-- 2 free columns --> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_size.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_focal.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_style.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_small_size.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_small_focal.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_small_style.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_notification_size.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_notification_focal.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_notification_style.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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 d7b5f78..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="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="{@docRoot}design/media/metrics_diagram.png"> - - </div> - <div class="layout-content-col span-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 3313a2b..0000000 --- a/docs/html/design/style/themes.jd +++ /dev/null @@ -1,53 +0,0 @@ -page.title=Themes -@jd:body - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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 b6d6407..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="layout-content-row" style="margin-bottom: -100px"> -<div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-7"> - - <img src="{@docRoot}design/media/touch_feedback_manipulation.png"> - - </div> -</div> -<div class="vspace size-3"> </div> - -<div class="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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 2f8e91b..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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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 4f62253..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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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/tv/patterns.jd b/docs/html/design/tv/patterns.jd index e786ee5..ccec285 100644 --- a/docs/html/design/tv/patterns.jd +++ b/docs/html/design/tv/patterns.jd @@ -43,8 +43,8 @@ Your application provides these recommendations, as described in <a href="{@docR </a>. For a visual overview of recommendations, see <a href="design/tv/index.html#recommendations"> Design for Android TV</a>.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-8 with-callouts"> +<div class="cols"> + <div class="col-8 with-callouts"> <p>The design elements of the recommendation card are as follows:</p> <ol> @@ -61,7 +61,7 @@ Design for Android TV</a>.</p> Recommendations</a> for more information.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <img src="{@docRoot}images/tv/recommend-card.png"> diff --git a/docs/html/design/videos/index.jd b/docs/html/design/videos/index.jd deleted file mode 100644 index 976767d..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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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="layout-content-row"> - <div class="layout-content-col span-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="layout-content-col span-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/design/wear/creative-vision.jd b/docs/html/design/wear/creative-vision.jd index a879cf9..0955240 100644 --- a/docs/html/design/wear/creative-vision.jd +++ b/docs/html/design/wear/creative-vision.jd @@ -2,17 +2,19 @@ page.title=Creative Vision for Android Wear @jd:body <style> -div.span-13 { - margin:10px 0; +.page-vision { + float: left; + margin: 10px 0; + width: 100%; } -div.span-13 img { +.page-vision img { float:left; margin:2px 20px 40px 0; } -div.span-13 p { +.page-vision p { margin-left:167px; } -div.span-13 h2 { +.page-vision h2 { margin-top:0; } </style> @@ -22,28 +24,28 @@ allowing users to be more connected to both the virtual world and the real world Wear experiences are:</p> - <div class="layout-content-col span-13"> + <div class="page-vision"> <img src="{@docRoot}design/media/wear/vision_traffic.png" width="147" height="147" /> <h2 id="Launched">Launched automatically</h2> <p>Most people are used to launching apps by clicking an icon. Android Wear is different. Wearable apps are aware of the user’s context - time, location, physical activity, and so on. The apps use this information to insert cards into the stream when they become relevant. This makes Android Wear timely, relevant and very specific.</p> </div> - <div class="layout-content-col span-13"> + <div class="page-vision"> <img src="{@docRoot}design/media/wear/vision_navigation.png" width="147" height="147" /> <h2 id="Glanceable">Glanceable</h2> <p>A classic wrist watch is designed to let you see the time in a split second and get on with what you were doing. Designing for Android Wear is no different. The less time it takes to use your software, the more time the user can be present in whatever they are doing. Android wear is fast, sharp, and immediate.</p> </div> - <div class="layout-content-col span-13"> + <div class="page-vision"> <img src="{@docRoot}design/media/wear/vision_voice.png" width="147" height="147" style="border: 1px solid #ddd;" /> <h2 id="SuggestDemand">All about suggest and demand</h2> <p>Android Wear is like a great personal assistant: it knows you and your preferences, it only interrupts you when absolutely necessary, and it’s always on hand to provide a ready answer. Android Wear is helpful, respectful, and responsive.</p> </div> - <div class="layout-content-col span-13"> + <div class="page-vision"> <img src="{@docRoot}design/media/wear/vision_music.png" width="147" height="147" /> <h2 id="Interaction">Zero or low interaction</h2> diff --git a/docs/html/design/wear/style.jd b/docs/html/design/wear/style.jd index abd3a9a..bb559fe 100644 --- a/docs/html/design/wear/style.jd +++ b/docs/html/design/wear/style.jd @@ -21,26 +21,26 @@ href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WatchViewS -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/wear/assets_specifics.png" width="300" style="margin:32px 0 20px;"> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <h2 id="Assets" style="clear:both">Specific Assets Required</h2> <p>A core set of standard assets may need to be provided depending on your card design: app icon, background image or images, action icons, and action confirmation animations. Of course, your specific design may necessitate other assets. Background images should be provided in landscape format at least 600px width for notifications that include pages of cards, since the system automatically adds a parallaxing effect.</p> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h2 id="PeekCard" style="clear:both">Peek Card Readability</h2> <p>Test your card layout to ensure that useful information is conveyed in the peek state on the Home screen. The main message of the card should be readable in the peek state, particularly for contextual cards. Content that requires an interaction to be read, for example a long message, should be cropped appropriately to provide an affordance to the user to swipe the card to read more.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/wear/peek-card.png" width="300" style="margin:12px 0 0 20px"> diff --git a/docs/html/design/wear/watchfaces.jd b/docs/html/design/wear/watchfaces.jd index 2a00802..2def05b 100644 --- a/docs/html/design/wear/watchfaces.jd +++ b/docs/html/design/wear/watchfaces.jd @@ -55,42 +55,42 @@ format.</p> <p>These guidelines help your concepts align across devices:</p> -<div class="layout-content-row" style="margin-top:20px"> -<div class="layout-content-col span-6"> +<div class="cols" style="margin-top:20px"> +<div class="col-6"> <h3>Create flexible concepts</h3> <p>Ideally, the visual functionality of the watch face works for both round and square formats. In this example, the visual functionality of the watch face is flexible enough to work well in either format without any adjustment. However, other design concepts require different executions for square and round screens.</p> </div> -<div class="layout-content-col span-7"> +<div class="col-7"> <img src="{@docRoot}design/media/wear/ScreenShapes_Invert.png" width="400" height="221" alt="" style="margin-top:-30px"> </div> </div> -<div class="layout-content-row" style="margin-top:20px"> -<div class="layout-content-col span-6"> +<div class="cols" style="margin-top:20px"> +<div class="col-6"> <h3>Use a common design language</h3> <p>Try using a common set of colors, line weights, shading, and other design elements to draw a visual connection between your square and round versions. By using similar color palettes and a few consistent visual elements, the overall appearance of square and round can be appropriately customized while still feeling like part of the same visual system.</p> </div> -<div class="layout-content-col span-7"> +<div class="col-7"> <img src="{@docRoot}design/media/wear/ScreenShapes_Pyramids.png" width="400" height="221" alt="" style="margin-top:-30px"> </div> </div> -<div class="layout-content-row" style="margin-top:20px"> -<div class="layout-content-col span-6"> +<div class="cols" style="margin-top:20px"> +<div class="col-6"> <h3>Adjust for analog concepts</h3> <p>Some of your concepts will naturally take the shape of an analog clock, like a center dial with hour and minute hands. In this case, consider the corner areas that are exposed when translating to a square format. Try extending and exploring this extra space.</p> </div> -<div class="layout-content-col span-7"> +<div class="col-7"> <img src="{@docRoot}design/media/wear/ScreenShapes_Rift.png" width="400" height="221" alt="" style="margin-top:-30px"> </div> @@ -137,8 +137,8 @@ You can configure your watch face to display different ambient designs depending of screen available on the device. Consider the best design for your watch faces on all screens.</p> -<div class="layout-content-row" style="margin-top:20px"> -<div class="layout-content-col span-9"> +<div class="cols" style="margin-top:20px"> +<div class="col-9"> <h3>Reduced color space</h3> <p>Some displays use a reduced color space in ambient mode to save power.</p> <p>One reduced color space power saving method is to use a "low-bit" mode. In low-bit mode, @@ -152,14 +152,14 @@ screens.</p> displays which do not use color in ambient mode, the background may be either black or white.</p> </div> -<div class="layout-content-col span-4"> +<div class="col-4"> <img src="{@docRoot}design/media/wear/Render_LowBit.png" width="200" height="" alt="" style="margin-top:45px;margin-left:13px"> </div> </div> -<div class="layout-content-row" style="margin-top:20px"> -<div class="layout-content-col span-9"> +<div class="cols" style="margin-top:20px"> +<div class="col-9"> <h3>Burn protection techniques</h3> <p>When designing for OLED screens, you should consider power efficiency and the screen burn-in effect. When these screens are in ambient mode, the system shifts the contents of @@ -169,7 +169,7 @@ screens.</p> replace filled images with pixel patterns. For analog watch face designs, hollow out the center where the hands meet to avoid pixel burn-in in this mode.</p> </div> -<div class="layout-content-col span-4"> +<div class="col-4"> <img src="{@docRoot}design/media/wear/Render_1Bit.png" width="200" height="" alt="" style="margin-top:-10px;margin-left:13px"> </div> @@ -183,8 +183,8 @@ screens.</p> user the status of the wearable and show notifications from services on the user's phone. Try to keep critical elements in your watch face designs from being obscured by the UI elements.</p> -<div class="layout-content-row" style="margin-top:20px"> -<div class="layout-content-col span-9"> +<div class="cols" style="margin-top:20px"> +<div class="col-9"> <h3>Cards</h3> <p>Cards are the notification system that bridges information between the wearable and a mobile device. Cards are also how most applications communicate with users. The user will be @@ -202,14 +202,14 @@ the bottom half of the face should leverage the small peek card instead.</p> <p>The system notifies your watch face when the bounds of a peek card change, so you can rearrange the elements in your design if necessary.</p> </div> -<div class="layout-content-col span-4"> +<div class="col-4"> <img src="{@docRoot}design/media/wear/CardsRender_Build.png" width="200" height="" alt="" style="margin-top:20px;margin-left:13px"> </div> </div> -<div class="layout-content-row" style="margin-top:20px"> -<div class="layout-content-col span-9"> +<div class="cols" style="margin-top:20px"> +<div class="col-9"> <h3>Indicators</h3> <p>Indicators tell the user the status of the wearable, such as charging and airplane mode. When designing a watch face, consider how the indicator will fall over the watch face.</p> @@ -219,14 +219,14 @@ position the status icons or the hotword on the bottom of the screen, the system peek cards. If the edge of the watch face contains strong visual elements, such as ticks or numbers, place the indicators on the center of the screen.</p> </div> -<div class="layout-content-col span-4"> +<div class="col-4"> <img src="{@docRoot}design/media/wear/Indicators_Cropped.png" width="200" height="" alt="" style="margin-top:0px;margin-left:13px"> </div> </div> -<div class="layout-content-row" style="margin-top:20px"> -<div class="layout-content-col span-9"> +<div class="cols" style="margin-top:20px"> +<div class="col-9"> <h3>The hotword</h3> <p>The hotword is the phrase "OK Google", which tells the user that they can interact with the watch using voice commands. When a user turns on the wearable, the hotword appears on @@ -237,7 +237,7 @@ watch face. Finally, background protection for the hotword and the indicators sh turned on unless your design is tailored to have these elements appear on top of them, for example using dark solid colors with no patterns.</p> </div> -<div class="layout-content-col span-4"> +<div class="col-4"> <img src="{@docRoot}design/media/wear/Hotword_Cropped.png" width="200" height="" alt="" style="margin-top:0px;margin-left:13px"> </div> @@ -253,8 +253,8 @@ using dark solid colors with no patterns.</p> <p>Your watch face can show users contextually relevant data and react to it by changing styles and colors in your design.</p> -<div class="layout-content-row" style="margin-top:20px"> -<div class="layout-content-col span-9"> +<div class="cols" style="margin-top:20px"> +<div class="col-9"> <h3>What do you want your user to know?</h3> <p>The first step in designing a data-integrated watch face is to define a conceptual user outcome based on available data. First, generate a strong concept or outcome you believe is @@ -262,14 +262,14 @@ supported by real user needs. What do you want your users to know after they hav at your design? Once you have identified your outcome, you need to determine how to obtain the required data.</p> </div> -<div class="layout-content-col span-4"> +<div class="col-4"> <img src="{@docRoot}design/media/wear/Render_Saturn.png" width="200" height="" alt="" style="margin-top:-10px;margin-left:13px"> </div> </div> -<div class="layout-content-row" style="margin-top:20px"> -<div class="layout-content-col span-9"> +<div class="cols" style="margin-top:20px"> +<div class="col-9"> <h3>A watch dial is a timeline; add data to it</h3> <p>Your watch face concept may include use of data beyond time, such as weather, calendar and fitness data. Consider the inclusion of data integration creatively. Avoid simply @@ -279,14 +279,14 @@ watch face as a clock with an indication of the current temperature in degrees o you might design a watch face that describes how the temperature will change over the course of the day.</p> </div> -<div class="layout-content-col span-4"> +<div class="col-4"> <img src="{@docRoot}design/media/wear/Render_Episode.png" width="200" height="" alt="" style="margin-top:-10px;margin-left:13px"> </div> </div> -<div class="layout-content-row" style="margin-top:20px"> -<div class="layout-content-col span-9"> +<div class="cols" style="margin-top:20px"> +<div class="col-9"> <h3>Stick to one message</h3> <p>Once you have solidified your conceptual direction or desired outcome, you will need to begin visualizing your watch face. The strongest watch face designs are highly glanceable @@ -296,7 +296,7 @@ an entire month of calendar events, you might decide to display only the next upcoming event. By a process of reduction, you should arrive at a powerful singular expression of data to include in your design.</p> </div> -<div class="layout-content-col span-4"> +<div class="col-4"> <img src="{@docRoot}design/media/wear/Render_Albumem.png" width="200" height="" alt="" style="margin-top:-10px;margin-left:13px"> </div> diff --git a/docs/html/develop/index.jd b/docs/html/develop/index.jd index e89e228..970aded 100644 --- a/docs/html/develop/index.jd +++ b/docs/html/develop/index.jd @@ -9,378 +9,109 @@ tabbedList=1 excludeFromSuggestions=true @jd:body -<style> -#noplayer-message { -position:absolute;top:50%;left:0;width:100%;z-index:-1;text-align:center;display:none; -} -#player-frame object {z-index:1;} -</style> - -<div id="player-wrapper"> - <div id="player-frame"> - <div id="noplayer-message"> - <!-- busted flash player message --> - Your video is supposed to appear here.<br/> - Make sure you have the <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash® Player</a>. +<section class="dac-expand dac-hero dac-light"> + <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> + <p class="dac-hero-description"> + 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"> + <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"> + <span class="dac-sprite dac-auto-chevron"></span> + Make your first app + </a><br> + <a class="dac-hero-cta" href="/guide/index.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Learn about Android + </a><br> + </div> + </div> + <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 id="player"><!-- Youtube embeds here... actually replaces this div --></div> - <a class="close" onclick="$('#player-wrapper').hide()">close video</a> </div> -</div> -<div class="wrap"> - <!-- Slideshow --> - <div class="slideshow-container slideshow-develop col-16"> - <a href="" class="slideshow-prev">Prev</a> - <a href="" class="slideshow-next">Next</a> - <div class="frame"> - <ul> - - <li class="item carousel-home"> - <div class="col-8"> - <img - style="max-height: 250px; margin-top:5px; - margin-left: 30px; max-width: 451px;" -src="{@docRoot}design/tv/images/focus.png" -class="play no-shadow no-transform" /> - </div> - <div class="content-right col-6"> - <h2>Create Quality Apps for TV</h2> - <p>Now that the Android platform has - extended to TVs, your apps on Google Play have - a new opportunity for engagement in the - living room. To provide the best - "leanback" experience on the couch, follow - this quality checklist.</p> - <p><a -href="{@docRoot}distribute/essentials/quality/tv.html" class="button">Read -more</a></p> - </div> - </li> - - <li class="item carousel-home"> - <div class="col-8"> - <img -src="//lh4.ggpht.com/-lfjzgG5Dqrk/UHMThRtpRwI/AAAAAAAABpk/h4d3nsmkgPM/s400/mint.png" -class="play no-shadow no-transform" /> - </div> - <div class="content-right col-6"> - <h2>Building Great Apps for Tablets</h2> - <p>Tablets are a fast-growing part of the Android installed base and they offer new opportunities for user engagement and monetization. If you are targeting tablets, check out this list of tips and techniques on how to deliver a great app experience for tablet users. </p> - <p><a -href="//android-developers.blogspot.com/2012/11/designing-for-tablets-were-here-to-help.html" class="button">Read -more</a></p> - </div> - </li> - <li class="item carousel-home"> - <div class="col-8"> - <img src="{@docRoot}images/google/gps-location.png" -class="play no-shadow no-transform" style="margin:0 0 0 70px;height:230px;width:340px" /> - </div> - <div class="content-right col-6" style="width:350px"> - <h2>New Location APIs from Google</h2> - <p>The latest version of Google Play services includes new APIs that provide more - efficient and immediate user location data on devices running Android 2.2 - and higher. Features include geofencing APIs, user activity recognition, and - power-efficient location updates.</p> - <p><a -href="{@docRoot}google/play-services/location.html" class="button">Read more</a></p> - </div> - </li> - - <li class="item carousel-home"> - <div class="col-8"> - <img src="{@docRoot}images/google/gps-plus-signin-hero.jpg" -class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px; - max-width:409px;width:409px" /> - </div> - <div class="content-right col-6" style="width:350px"> - <h2>New Cross-Platform Single Sign On</h2> - <p>Google+ Sign-In is an easy, trusted way to sign a user into your app. - Now it's even more seamless. A user can sign in to your app on one device and - pick it up on another—without signing in again. Best of all, it's built - into Google+ Sign-in, so there's no change needed in your app.</p> - <p><a -href="{@docRoot}google/play-services/plus.html" class="button">Read more</a></p> - </div> - </li> - - <li class="item carousel-home"> - <div class="col-8"> - <img src="{@docRoot}images/google/maps-v2-trulia-n7.png" -class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px; - max-width:409px;width:409px" /> - </div> - <div class="content-right col-6" style="width:350px"> - <h2>New Google Maps Android APIs!</h2> - <p>Google Maps Android API version 2 is now available with enhanced - features such as 3D buildings, vector-based map tiles, rich overlay capabilities, - indoor maps, support for fragments, and much more.</p> - - <p>The APIs are bundled with Google Play services and are - compatible with Android 2.2 and higher.</p> - <p><a -href="{@docRoot}google/play-services/maps.html" class="button">Read more</a></p> - </div> - </li> - </ul> - </div> - </div> - <!-- /End slideshow --> -</div> -<div class="wrap"> - <!-- news and feature feed --> - <div class="feed col-8" style="margin-left:0"> - <ul class="feed-nav"> - <li class="active">DEVELOPER NEWS</li> - <li>FEATURED DOCS</li> - </ul> - <div class="feed-container"> - <div class="feed-frame"> - <!-- DEVELOPER NEWS --> - <ul> - <li><a href="//android-developers.blogspot.com/2013/07/making-beautiful-android-app-icons.html"> - <div class="feed-image" style="background:url('//2.bp.blogspot.com/-HfoO6KNFBKA/UeiyRoELb7I/AAAAAAAAAFs/bHR-5viktU4/s1000/icons.png') no-repeat 0 0;background-size:500px;background-position:center center;"></div> - <h4>Making Beautiful Android App Icons</h4> - <p>As higher density screens gain popularity, it's important to make sure your launcher icon is crisp and high quality...</p> - </a></li> - <li><a href="//android-developers.blogspot.com/2013/07/beautiful-design-collection-summer-2013.html"> - <div class="feed-image" style="background:url('//1.bp.blogspot.com/-k8DZYu0daT4/UdRt1AzstvI/AAAAAAAAAFM/CvEkb2yh-i0/s965/beautifulapps_4.png') no-repeat 0 0"></div> - <h4>The Beautiful Design Summer 2013 Collection</h4> - <p>See the apps chosen by the Android Design team for their masterfully crafted design details...</p> - </a></li> - <li><a href="//android-developers.blogspot.com/2013/10/new-developer-features-in-google-play.html"> - <div class="feed-image" style="background:url('//3.bp.blogspot.com/-k33rf398Lqw/UlRUMQQRUNI/AAAAAAAAClM/pSwz2YgQpmY/s1600/gps-play_games_logo.png') no-repeat 0 0;background-size:130px;background-position:8px -4px;"></div> - <h4>New Features in Google Play Games</h4> - <p>Three new features that make it easier to understand what players are doing in your game and help you manage game features...</p> - </a></li> - <li><a href="//android-developers.blogspot.com/2013/05/new-ways-to-optimize-your-business-in.html"> - <div class="feed-image" style="background:url('//3.bp.blogspot.com/-_8WvpdTVGsE/UkxxxrVoNNI/AAAAAAAACj8/FrQyA-BO11c/s1600/gp-referral-ga.png') no-repeat 0 0;background-size:180px"></div> - <h4>Linking Google Analytics with Google Play</h4> - <p>Understanding your users easier through a new integration between Google Analytics and the Google Play Developer Console...</p> - </a></li> - </ul> - <!-- FEATURED DOCS --> - <ul> - <li><a href="{@docRoot}distribute/googleplay/spotlight/tablets.html"> - <h4>Tablet Stories</h4> - <p>More developers are investing in a full tablet experience for their apps. Here are some stories from developers who are seeing real results as they expand their offering to include Android tablets. </p> - </a></li> - <li><a href="{@docRoot}distribute/googleplay/quality/core.html"> - <h4>Core App Quality Guidelines</h4> - <p>This document helps you assess basic aspects of quality in your app through a compact set of core app quality criteria and associated tests. All Android apps should meet these criteria.</p> - </a></li> - <li><a href="{@docRoot}guide/topics/ui/notifiers/notifications.html"> - <h4>Updated Notifications API Guide</h4> - <p>The Notifications API Guide is updated to include information about building Jelly Bean rich notifications using the Support Library APIs for backwards-compatibility.</p> - </a></li> - <li><a href="{@docRoot}guide/topics/ui/dialogs.html"> - <h4>Updated Dialogs API Guide</h4> - <p>The Dialogs API Guide now shows to use DialogFragment class, a simpler way to manage your dialogs and embed them in alternative layouts.</p> - </a></li> - </ul> - </div> - </div> - </div> <!-- /news and feature feed --> - <!-- video feed --> - <div class="feed col-8" style="margin-right:0"> - <ul class="feed-nav"> - <li class="active">DEVELOPERS LIVE</li> - <li>VIDEO PLAYLISTS</li> - </ul> - <div class="feed-container"> - <div class="feed-frame"> - <ul id="DevelopersLive"> - </ul> - <ul id="VideoPlaylists"> - </ul> - </div> - </div> - </div> - <!-- /video feed --> -</div> - -<br class="clearfix"/> - - - - - - - - - - -<script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script> -<script type="text/javascript"> - -/* Load a video into the player box. - * @param id The YouTube video ID - * @param title The video title to display in the player box (character escaped) - * @param autoplay Whether to automatically play the video - */ -function loadVideo(id, title, autoplay) { - swfobject.embedSWF('//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1&autoplay=' + - (autoplay?1:0), 'player', '525', '330', '9.0.0', false, false, {allowfullscreen: 'true'}); - $("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>"); - $("#player-wrapper").show(); - setTimeout(function(){$('#noplayer-message').show()}, 2000); -} - -/* Draw all videos from a playlist into a 'videoPreviews' list - * @param data The feed data returned from the youtube request - */ -function renderVideoPlaylists(data) { - var MAX_LIST_DESC_LENGTH = 130; // the length at which we will trim the description - var MAX_VIDEO_DESC_LENGTH = 100; // the length at which we will trim the description - var MAX_LIST_LENGTH = 4; // number of videos to put in the list - var feed = data.feed; - var entries = feed.entry || []; - var playlistId = feed.yt$playlistId.$t; - - var $ulVideos = $('<ul style="display:none"/>'); - var summary = feed.media$group.media$description != null ? feed.media$group.media$description.$t : feed.subtitle.$t; - - var $liPlaylist = $('<li class="playlist"></li>'); - var $aPlaylist = $('<a href="" onclick="togglePlaylist(this);return false;"></a>'); - $liPlaylist.append($aPlaylist); - $aPlaylist.append('<h4>' + feed.title.$t + '</h4>'); - - var playlistDescription = summary.substr(0, MAX_LIST_DESC_LENGTH); - playlistDescription += playlistDescription.length == MAX_LIST_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description - $aPlaylist.append('<p>' + playlistDescription + '</p>'); - - // Loop through each entry (each video) and add it to the 'videoPreviews' list - var length = feed.entry.length < MAX_LIST_LENGTH ? feed.entry.length : MAX_LIST_LENGTH; // max of 4 videos per list - for (var i = 0; i < length; i++) { - var entry = entries[i]; - - var title = entry.title.$t; - var id = entry.media$group.yt$videoid.$t; - var thumbUrl = entry.media$group.media$thumbnail[0].url; - var fullDescription = entry.media$group.media$description.$t; - var playerUrl = entry.media$group.media$content[0].url; - - var shortDescription = fullDescription.substr(0, MAX_VIDEO_DESC_LENGTH); - shortDescription += shortDescription.length == MAX_VIDEO_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description - - var img = $('<img src="' + thumbUrl + '" width="60" height="45"/>'); - var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />'); - var pShortDescription = $('<p>' + shortDescription + '</p>'); - var h5Title = "<h5>" + title + "</h5>"; - var li = $('<li class="playlist-video"/>'); - - li.append(a); - a.append(img).append(h5Title).append(pShortDescription); - - $ulVideos.append(li); - - // use the first entry's thumbnail for the playlist - if (i == 0) { - $aPlaylist.prepend('<img src="' + thumbUrl + '" width="120" height="90"/>'); - } - } - - if (feed.entry.length > MAX_LIST_LENGTH) { - // add item to go to youtube for playlist - $ulVideos.append('<li class="more"><a href="//www.youtube.com/playlist?list=' + playlistId + '">More »</a></li>'); - } +</section> - $liPlaylist.append($ulVideos); - $('#VideoPlaylists').append($liPlaylist); -} +<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> -function renderDevelopersLivePlaylist(data) { - - var MAX_DESC_LENGTH = 125; // the length at which we will trim the description - var feed = data.feed; - var entries = feed.entry || []; - var playlistId = feed.yt$playlistId.$t; - - var ul = $('#DevelopersLive'); - - // Loop through each entry (each video) and add it to the '#DevelopersLive' list - for (var i = 0; i < 4; i++) { - var entry = entries[i]; - - var title = entry.title.$t; - var id = entry.media$group.yt$videoid.$t; - var thumbUrl = entry.media$group.media$thumbnail[0].url; - var fullDescription = entry.media$group.media$description.$t; - var playerUrl = entry.media$group.media$content[0].url; - var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH); - shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description - - var img = $('<img src="' + thumbUrl + '" width="120" height="90"/>'); - var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />'); - var pShortDescription = $('<p>' + shortDescription + '</p>'); - var h4Title = "<h4>" + title + "</h4>"; - var li = $('<li/>'); - - li.append(a); - a.append(img).append(h4Title).append(pShortDescription); - - ul.append(li); - } -} - -/* This 'playlist' object defines the playlist IDs for each tab. - * Each name inside 'playlist' corresponds to class names for the tab that the playlists belong to (eg: "googleioTab" and "googleioBox" divs). - * Each string in 'ids' is the ID of a YouTube playlist that belongs in the corresponding tab. - */ -var playlists = { - 'designinaction' : { - 'ids': ["PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF"] - }, - 'bizdevbytes' : { - 'ids': ["PLWz5rJ2EKKc8-Osr0TuHyTMEhKV0xJ6ql"] - }, - 'thisweek' : { - 'ids': ["PLWz5rJ2EKKc9Wam5jE-9oY8l6RpeAx-XM"] - }, - 'googleio' : { - 'ids': ["PLWz5rJ2EKKc9WGUwq2gQ-coU3fSyexgOx"] - } -}; - -/* Request the playlist feeds from YouTube */ -function showVideosPlaylists() { - for (var x in playlists) { - var ids = playlists[x].ids; - for (var i in ids) { - var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/" - + ids[i] + - "?v=2&alt=json-in-script&max-results=50&callback=renderVideoPlaylists&orderby=position'><\/script>"; - $("body").append(script); - } - } -} - - -/* Request the playlist feeds from YouTube */ -function showDevelopersLivePlaylist() { - var playlistId = "PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0"; /* DevBytes */ - var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/" - + playlistId + - "?v=2&alt=json-in-script&max-results=10&callback=renderDevelopersLivePlaylist&orderby=position'><\/script > "; - $("body").append(script); -} - - -function togglePlaylist(listLink) { - var $list = $(listLink).parent(); - var $ul = $list.find('ul'); - if ($ul.is(":visible")) { - $ul.slideUp(function() { - $list.css({'height':'inherit'}); - }); - } else { - $list.closest('ul').find('li.playlist').find('ul').slideUp(); - $ul.slideDown(); - $list.css({'height':'auto'}); - } -} - -showDevelopersLivePlaylist(); -showVideosPlaylists(); -</script> +<section class="dac-section dac-light"><div class="wrap"> + <h1 class="dac-section-title">Android performance patterns</h1> + <div class="dac-section-subtitle"> + Everything you need to know about improving your app’s performance. + </div> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:develop/landing/performance" + data-cardSizes="6x6" + data-maxResults="3"></div> + <ul class="dac-section-links"> + <li class="dac-section-link"><a href="https://www.youtube.com/playlist?list=PLOU2XLYxmsIKEOXh5TwZEv89aofHzNCiu"> + <span class="dac-sprite dac-auto-chevron"></span> + Playlist + </a></li> + </ul> +</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"></div> + <ul class="dac-section-links"> + </ul> +</div></section> + +<section class="dac-section dac-light"><div class="wrap"> + <h1 class="dac-section-title">Ubiquitous computing</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/ubicomp" + data-cardSizes="6x6" + data-maxResults="3"></div> + <ul class="dac-section-links"> + <li class="dac-section-link"><a href="/wear/index.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Wear + </a></li> + <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> + 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">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" + data-maxResults="3"></div> +</div></section> diff --git a/docs/html/distribute/analyze/index.jd b/docs/html/distribute/analyze/index.jd index d8ab59e..f948dbd 100644 --- a/docs/html/distribute/analyze/index.jd +++ b/docs/html/distribute/analyze/index.jd @@ -1,5 +1,6 @@ page.title=Analyze page.metaDescription=Understanding what your users do inside your app is the key to engaging and monetizing them. +page.image=images/cards/analytics-mobile_2x.jpg section.landing=true excludefromsuggestions=true nonavpage=true @@ -37,4 +38,3 @@ nonavpage=true data-cardSizes="6x6" data-maxResults="10"> </div> -
\ No newline at end of file diff --git a/docs/html/distribute/engage/deep-linking.jd b/docs/html/distribute/engage/deep-linking.jd index a25c3c6..ea1f1de 100644 --- a/docs/html/distribute/engage/deep-linking.jd +++ b/docs/html/distribute/engage/deep-linking.jd @@ -1,7 +1,7 @@ page.title=Deep Link to Bring Users Back page.metaDescription=Use deep links to bring your users into your apps from social posts, search, or ads. page.tags="app indexing, google+ signin" -page.image=/images/gp-listing-4.jpg +page.image=images/cards/google-search_2x.png @jd:body @@ -96,4 +96,4 @@ page.image=/images/gp-listing-4.jpg <div class="resource-widget resource-flow-layout col-13" data-query= "collection:distribute/engage/deeplinks" data-sortorder="-timestamp" data-cardsizes="9x3" data-maxresults="6"> -</div>
\ No newline at end of file +</div> diff --git a/docs/html/distribute/engage/easy-signin.jd b/docs/html/distribute/engage/easy-signin.jd index d066181..2bfa5d1 100644 --- a/docs/html/distribute/engage/easy-signin.jd +++ b/docs/html/distribute/engage/easy-signin.jd @@ -1,7 +1,7 @@ page.title=Make Signing In Easy page.metaDescription=Increase conversion rates while helping users minimize typing by letting users sign in with Google+. page.tags="google+" -page.image=/images/google/gps-googleplus.png +page.image=images/cards/google-sign-in_2x.png @jd:body diff --git a/docs/html/distribute/googleplay/about.jd b/docs/html/distribute/googleplay/about.jd index c25a9cf..2652046 100644 --- a/docs/html/distribute/googleplay/about.jd +++ b/docs/html/distribute/googleplay/about.jd @@ -2,7 +2,7 @@ page.title=The Google Play Opportunity meta.tags="visibility, growth, distributing" page.tags="play, apps, distributing, publishing" page.metaDescription=Billons of downloads a month and growing. Get your apps in front of users at Google's scale. -page.image=/distribute/images/about-play.jpg +page.image=images/cards/google-play_2x.png @jd:body @@ -369,4 +369,4 @@ page.image=/distribute/images/about-play.jpg data-sortOrder="-timestamp" data-cardSizes="9x3" data-maxResults="4"></div> - </div>
\ No newline at end of file + </div> diff --git a/docs/html/distribute/googleplay/developer-console.jd b/docs/html/distribute/googleplay/developer-console.jd index f5b3ac6..748c1d1 100644 --- a/docs/html/distribute/googleplay/developer-console.jd +++ b/docs/html/distribute/googleplay/developer-console.jd @@ -1,6 +1,6 @@ page.title=Developer Console page.metaDescription=Learn about the Developer Console, your home for app publishing on Google Play. -page.image=/distribute/images/developer-console.jpg +page.image=images/cards/dev-console_2x.jpg Xnonavpage=true @jd:body @@ -600,4 +600,4 @@ Xnonavpage=true data-sortOrder="-timestamp" data-cardSizes="9x3" data-maxResults="6"></div> - </div>
\ No newline at end of file + </div> diff --git a/docs/html/distribute/googleplay/index.jd b/docs/html/distribute/googleplay/index.jd index b25f6b7..72e2de8 100644 --- a/docs/html/distribute/googleplay/index.jd +++ b/docs/html/distribute/googleplay/index.jd @@ -1,4 +1,5 @@ page.title=Google Play +page.image=images/cards/program-edu_2x.jpg section.landing=true nonavpage=true diff --git a/docs/html/distribute/images/advertising.jpg b/docs/html/distribute/images/advertising.jpg Binary files differindex 9625671..7747097 100644 --- a/docs/html/distribute/images/advertising.jpg +++ b/docs/html/distribute/images/advertising.jpg diff --git a/docs/html/distribute/index.jd b/docs/html/distribute/index.jd index d0ea661..c49fe3e 100644 --- a/docs/html/distribute/index.jd +++ b/docs/html/distribute/index.jd @@ -1,3 +1,4 @@ +fullpage=true page.title=Distribute Your Apps page.viewport_width=970 section.landing=true @@ -6,21 +7,74 @@ nonavpage=true page.metaDescription=The most visited store in the world for Android apps. Cloud-connected and always synced, it's never been easier for users to find and download your apps. @jd:body +<div class="dac-hero-carousel" data-carousel-query="collection:distribute/landing/carousel"> +</div> - <div class="resource-widget resource-carousel-layout col-16" - style="height:420px;margin-top:20px;padding-top:0" - data-query="type:youtube+tag:googleplay+tag:developerstory+tag:featured" - data-sortOdrder="-timestamp" - data-maxResults="4"></div> +<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="type:youtube+tag:googleplay+tag:developerstory+tag:featured, type:blog+tag:googleplay+tag:distribute+tag:featured" + data-sortOrder="-timestamp" + data-cardSizes="6x6" + data-maxResults="6"></div> +</div></section> +<section class="dac-section dac-invert dac-darken-bg" style="background-image: url(/images/distribute/google-play-bg.jpg)"><div class="wrap"> + <div class="cols"><div class="col-10of12 col-push-1of12"> + <h1 class="dac-section-title">Reach the world with Google Play</h1> + <div class="dac-section-subtitle"> + Publish your apps and games on Google Play and reach over a billion active Android users in over 190 countries around the world. + </div> + </div></div> <div class="resource-widget resource-flow-layout col-16" - data-query="type:blog+tag:googleplay+tag:distribute+tag:featured" - data-sortOrder="" - data-cardSizes="9x6" - data-maxResults="2"></div> + data-query="collection:distribute/landing/googleplay" + data-cardSizes="6x6" + data-maxResults="3"></div> + + <ul class="dac-section-links"> + <li class="dac-section-link"><a href="/distribute/googleplay/start.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Get started + </a></li> + <li class="dac-section-link"><a href="/distribute/essentials/index.html#quality-guidelines"> + <span class="dac-sprite dac-auto-chevron"></span> + Quality guidelines + </a></li> + <li class="dac-section-link"><a href="/distribute/essentials/index.html#tools-and-resources"> + <span class="dac-sprite dac-auto-chevron"></span> + Resources & tools + </a></li> + <li class="dac-section-link"><a href="/distribute/stories/index.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Developer stories + </a></li> + <li class="dac-section-link"><a href="/distribute/users/index.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Get users + </a></li> + <li class="dac-section-link"><a href="/distribute/engage/index.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Engage & retain + </a></li> + <li class="dac-section-link"><a href="/distribute/monetize/index.html"> + <span class="dac-sprite dac-auto-chevron"></span> + Monetize + </a></li> + </ul> +</div></section> +<section class="dac-section dac-light"><div class="wrap"> + <div class="cols"><div class="col-10of12 col-push-1of12"> + <h1 class="dac-section-title">More from Google</h1> + <div class="dac-section-subtitle">Reach and retain a valuable audience and grow your revenue.</div> + </div></div> <div class="resource-widget resource-flow-layout col-16" - data-query="collection:launch/static" - data-sortOrder="" - data-cardSizes="6x2x3,6x6,6x6,6x6,6x6,6x2x3,6x2x3,6x6,6x6,6x6,6x6,6x6" - data-maxResults="24"></div> + data-query="collection:distribute/landing/more" + data-cardSizes="6x6"></div> + <ul class="dac-section-links"> + <li class="dac-section-link"><a href="https://developers.google.com/"> + <span class="dac-sprite dac-auto-chevron"></span> + More on Google Developers + </a></li> + </ul> +</div></section> diff --git a/docs/html/distribute/monetize/ads.jd b/docs/html/distribute/monetize/ads.jd index 9a847ff..b5c5f4a 100644 --- a/docs/html/distribute/monetize/ads.jd +++ b/docs/html/distribute/monetize/ads.jd @@ -1,7 +1,7 @@ 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.png +page.image=/distribute/images/advertising.jpg @jd:body diff --git a/docs/html/distribute/tools/promote/device-art.jd b/docs/html/distribute/tools/promote/device-art.jd index 814177b..d321074 100644 --- a/docs/html/distribute/tools/promote/device-art.jd +++ b/docs/html/distribute/tools/promote/device-art.jd @@ -16,12 +16,12 @@ feature image or screenshots for your Google Play app listing.</p> <div class="supported-browser"> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <h4>Step 1</h4> <p>Drag a screenshot from your desktop onto a device to the right.</p> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <ul class="device-list primary"></ul> <a href="#" id="archive-expando">Older devices</a> <ul class="device-list archive"></ul> @@ -30,8 +30,8 @@ feature image or screenshots for your Google Play app listing.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <h4>Step 2</h4> <p>Customize the generated image and drag it to your desktop to save.</p> <p id="frame-customizations"> @@ -48,7 +48,7 @@ feature image or screenshots for your Google Play app listing.</p> <label for="output-round">Round</label><br><br> </p> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <!-- position:relative fixes an issue where dragging an image out of a inline-block container produced no drag feedback image in Chrome 28. --> <div id="output" style="position:relative">No input image.</div> diff --git a/docs/html/distribute/users/promote-with-ads.jd b/docs/html/distribute/users/promote-with-ads.jd index 1e28ae1..c1d79fc 100644 --- a/docs/html/distribute/users/promote-with-ads.jd +++ b/docs/html/distribute/users/promote-with-ads.jd @@ -1,6 +1,6 @@ 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.image=/images/gp-ads-console.jpg +page.image=images/cards/adwords_2x.jpg page.tags="users, ads, analytics" @jd:body @@ -42,4 +42,4 @@ page.tags="users, ads, analytics" data-query="collection:distribute/users/promotewithads" data-sortOrder="-timestamp" data-cardSizes="9x3" - data-maxResults="6"></div>
\ No newline at end of file + data-maxResults="6"></div> diff --git a/docs/html/google/index.jd b/docs/html/google/index.jd index 4778a85..cc209cd 100644 --- a/docs/html/google/index.jd +++ b/docs/html/google/index.jd @@ -16,7 +16,7 @@ div.cell-icon img { } </style> -<div class="landing-banner"> +<div class="landing-banner cols"> <div class="col-6" style="min-height:0"> <img src="{@docRoot}images/google/google-services.png" alt="" width="340" height="193" /> diff --git a/docs/html/google/play-services/index.jd b/docs/html/google/play-services/index.jd index 5ccdcb9..11060e8 100644 --- a/docs/html/google/play-services/index.jd +++ b/docs/html/google/play-services/index.jd @@ -24,8 +24,8 @@ page.metaDescription=With Google Play services, your app can take advantage of t </div> </div> - <div class="layout-content-row"> - <div class="layout-content-col span-4"> + <div class="cols"> + <div class="col-4"> <h4>Google Technology</h4> <p>Google Play services provides you with easy access to Google services and is @@ -34,7 +34,7 @@ provided for each service that let you implement the functionality you want easier and faster.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <h4>Standard Authorization</h4> <p>All products in Google Play services share a common authorization API @@ -43,7 +43,7 @@ easier and faster.</p> to Google services.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <h4>Automatic Updates</h4> <p>Devices running Android 2.3 or higher that have the Google Play Store @@ -666,8 +666,8 @@ announcement <a href="http://android-developers.blogspot.com/2014/03/google-play <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4 id="apk">The Google Play services APK</h4> <p> The Google Play services APK contains the individual Google services and runs @@ -687,7 +687,7 @@ announcement <a href="http://android-developers.blogspot.com/2014/03/google-play </p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="/images/play-services-diagram.png" /> <p class="img-caption"><em>The Google Play services APK on user devices receives regular updates for new APIs, features, and bug fixes.</em></p> diff --git a/docs/html/google/play-services/location.jd b/docs/html/google/play-services/location.jd index b28302c..98b0544 100644 --- a/docs/html/google/play-services/location.jd +++ b/docs/html/google/play-services/location.jd @@ -30,8 +30,8 @@ developer guide. </div> <div class="landing-docs"> <h3 style="clear:left">Key Developer Features</h3> - <div class="layout-content-row normal-links"> - <div class="layout-content-col span-6"> + <div class="cols normal-links"> + <div class="col-6"> @@ -74,7 +74,7 @@ developer guide. </ul> </div> -<div class="layout-content-col span-6"> +<div class="col-6"> <h4 style="font-weight:bold">Places API</h4> diff --git a/docs/html/google/play/dist.jd b/docs/html/google/play/dist.jd index f1ad834..02bb42b 100644 --- a/docs/html/google/play/dist.jd +++ b/docs/html/google/play/dist.jd @@ -9,8 +9,8 @@ page.title=Google Play Distribution <div class="vspace size-1"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4> Device Filtering </h4> @@ -20,7 +20,7 @@ page.title=Google Play Distribution </p><p><a href="{@docRoot}google/play/filters.html">Learn more »</a></p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4> Multiple APK Support </h4> @@ -30,8 +30,8 @@ page.title=Google Play Distribution </p><p><a href="{@docRoot}google/play/publishing/multiple-apks.html">Learn more »</a></p> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4> APK Expansion files </h4> @@ -42,14 +42,14 @@ page.title=Google Play Distribution </p><a href="{@docRoot}google/play/expansion-files.html">Learn more »</a> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4> Application Licensing </h4> <p>Protect your revenue streams and integrate policies for usage into your app. </p><a href="{@docRoot}google/play/licensing/index.html">Learn more »</a> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4> Google Play Developer API </h4> diff --git a/docs/html/images/cards/adwords_2x.jpg b/docs/html/images/cards/adwords_2x.jpg Binary files differnew file mode 100644 index 0000000..cd83b26 --- /dev/null +++ b/docs/html/images/cards/adwords_2x.jpg diff --git a/docs/html/images/cards/analytics-mobile_2x.jpg b/docs/html/images/cards/analytics-mobile_2x.jpg Binary files differnew file mode 100644 index 0000000..e668991 --- /dev/null +++ b/docs/html/images/cards/analytics-mobile_2x.jpg diff --git a/docs/html/images/cards/android-auto_2x.png b/docs/html/images/cards/android-auto_2x.png Binary files differnew file mode 100644 index 0000000..6acdcb1 --- /dev/null +++ b/docs/html/images/cards/android-auto_2x.png diff --git a/docs/html/images/cards/android-devices_2x.jpg b/docs/html/images/cards/android-devices_2x.jpg Binary files differnew file mode 100644 index 0000000..cefff15 --- /dev/null +++ b/docs/html/images/cards/android-devices_2x.jpg diff --git a/docs/html/images/cards/android-studio_2x.png b/docs/html/images/cards/android-studio_2x.png Binary files differnew file mode 100644 index 0000000..87f9e70 --- /dev/null +++ b/docs/html/images/cards/android-studio_2x.png diff --git a/docs/html/images/cards/android-tv_2x.png b/docs/html/images/cards/android-tv_2x.png Binary files differnew file mode 100644 index 0000000..deb41a2 --- /dev/null +++ b/docs/html/images/cards/android-tv_2x.png diff --git a/docs/html/images/cards/android-wear-apps_2x.jpg b/docs/html/images/cards/android-wear-apps_2x.jpg Binary files differnew file mode 100644 index 0000000..614ef19 --- /dev/null +++ b/docs/html/images/cards/android-wear-apps_2x.jpg diff --git a/docs/html/images/cards/android-wear-materials_2x.jpg b/docs/html/images/cards/android-wear-materials_2x.jpg Binary files differnew file mode 100644 index 0000000..19a78c3 --- /dev/null +++ b/docs/html/images/cards/android-wear-materials_2x.jpg diff --git a/docs/html/images/cards/android-wear_2x.png b/docs/html/images/cards/android-wear_2x.png Binary files differnew file mode 100644 index 0000000..5d1a796 --- /dev/null +++ b/docs/html/images/cards/android-wear_2x.png 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/cloud-platform_2x.png b/docs/html/images/cards/cloud-platform_2x.png Binary files differnew file mode 100644 index 0000000..d3c203d --- /dev/null +++ b/docs/html/images/cards/cloud-platform_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/cards/design-creative-vision_2x.jpg b/docs/html/images/cards/design-creative-vision_2x.jpg Binary files differnew file mode 100644 index 0000000..9c7dde3 --- /dev/null +++ b/docs/html/images/cards/design-creative-vision_2x.jpg diff --git a/docs/html/images/cards/design-material-for-android_2x.jpg b/docs/html/images/cards/design-material-for-android_2x.jpg Binary files differnew file mode 100644 index 0000000..e47594a --- /dev/null +++ b/docs/html/images/cards/design-material-for-android_2x.jpg diff --git a/docs/html/images/cards/design-new-in-android_2x.jpg b/docs/html/images/cards/design-new-in-android_2x.jpg Binary files differnew file mode 100644 index 0000000..3bdd542 --- /dev/null +++ b/docs/html/images/cards/design-new-in-android_2x.jpg diff --git a/docs/html/images/cards/design-pure-android_2x.png b/docs/html/images/cards/design-pure-android_2x.png Binary files differnew file mode 100644 index 0000000..94758f7 --- /dev/null +++ b/docs/html/images/cards/design-pure-android_2x.png diff --git a/docs/html/images/cards/dev-console_2x.jpg b/docs/html/images/cards/dev-console_2x.jpg Binary files differnew file mode 100644 index 0000000..f2d10eb --- /dev/null +++ b/docs/html/images/cards/dev-console_2x.jpg diff --git a/docs/html/images/cards/google-play_2x.png b/docs/html/images/cards/google-play_2x.png Binary files differnew file mode 100644 index 0000000..8680639 --- /dev/null +++ b/docs/html/images/cards/google-play_2x.png diff --git a/docs/html/images/cards/google-search_2x.png b/docs/html/images/cards/google-search_2x.png Binary files differnew file mode 100644 index 0000000..2564121 --- /dev/null +++ b/docs/html/images/cards/google-search_2x.png diff --git a/docs/html/images/cards/google-sign-in_2x.png b/docs/html/images/cards/google-sign-in_2x.png Binary files differnew file mode 100644 index 0000000..60078a7 --- /dev/null +++ b/docs/html/images/cards/google-sign-in_2x.png diff --git a/docs/html/images/cards/material-animation_2x.png b/docs/html/images/cards/material-animation_2x.png Binary files differnew file mode 100644 index 0000000..79315e4 --- /dev/null +++ b/docs/html/images/cards/material-animation_2x.png diff --git a/docs/html/images/cards/material-color-palette_2x.jpg b/docs/html/images/cards/material-color-palette_2x.jpg Binary files differnew file mode 100644 index 0000000..bae8d07 --- /dev/null +++ b/docs/html/images/cards/material-color-palette_2x.jpg diff --git a/docs/html/images/cards/material-components_2x.jpg b/docs/html/images/cards/material-components_2x.jpg Binary files differnew file mode 100644 index 0000000..7ac1012 --- /dev/null +++ b/docs/html/images/cards/material-components_2x.jpg diff --git a/docs/html/images/cards/material-layout-template_2x.jpg b/docs/html/images/cards/material-layout-template_2x.jpg Binary files differnew file mode 100644 index 0000000..d2fa3c5 --- /dev/null +++ b/docs/html/images/cards/material-layout-template_2x.jpg diff --git a/docs/html/images/cards/material-layout_2x.png b/docs/html/images/cards/material-layout_2x.png Binary files differnew file mode 100644 index 0000000..6c5dca1 --- /dev/null +++ b/docs/html/images/cards/material-layout_2x.png diff --git a/docs/html/images/cards/material-patterns_2x.png b/docs/html/images/cards/material-patterns_2x.png Binary files differnew file mode 100644 index 0000000..8e8d8aa --- /dev/null +++ b/docs/html/images/cards/material-patterns_2x.png diff --git a/docs/html/images/cards/material-sticker-sheet_2x.jpg b/docs/html/images/cards/material-sticker-sheet_2x.jpg Binary files differnew file mode 100644 index 0000000..8e9f3f7c --- /dev/null +++ b/docs/html/images/cards/material-sticker-sheet_2x.jpg diff --git a/docs/html/images/cards/material-style_2x.jpg b/docs/html/images/cards/material-style_2x.jpg Binary files differnew file mode 100644 index 0000000..38ae540 --- /dev/null +++ b/docs/html/images/cards/material-style_2x.jpg diff --git a/docs/html/images/cards/material-typography_2x.jpg b/docs/html/images/cards/material-typography_2x.jpg Binary files differnew file mode 100644 index 0000000..537db8e --- /dev/null +++ b/docs/html/images/cards/material-typography_2x.jpg diff --git a/docs/html/images/cards/material-usability_2x.png b/docs/html/images/cards/material-usability_2x.png Binary files differnew file mode 100644 index 0000000..468e1c8 --- /dev/null +++ b/docs/html/images/cards/material-usability_2x.png diff --git a/docs/html/images/cards/material_2x.png b/docs/html/images/cards/material_2x.png Binary files differnew file mode 100644 index 0000000..e759d9f --- /dev/null +++ b/docs/html/images/cards/material_2x.png diff --git a/docs/html/images/cards/program-edu_2x.jpg b/docs/html/images/cards/program-edu_2x.jpg Binary files differnew file mode 100644 index 0000000..4430dfd --- /dev/null +++ b/docs/html/images/cards/program-edu_2x.jpg diff --git a/docs/html/images/cards/samples-new_2x.png b/docs/html/images/cards/samples-new_2x.png Binary files differnew file mode 100644 index 0000000..270f4a3 --- /dev/null +++ b/docs/html/images/cards/samples-new_2x.png diff --git a/docs/html/images/develop/hero-android-studio-on-device.png b/docs/html/images/develop/hero-android-studio-on-device.png Binary files differnew file mode 100644 index 0000000..eac0e1f --- /dev/null +++ b/docs/html/images/develop/hero-android-studio-on-device.png diff --git a/docs/html/images/distribute/google-play-bg.jpg b/docs/html/images/distribute/google-play-bg.jpg Binary files differnew file mode 100644 index 0000000..effd422 --- /dev/null +++ b/docs/html/images/distribute/google-play-bg.jpg diff --git a/docs/html/images/distribute/hero-family.jpg b/docs/html/images/distribute/hero-family.jpg Binary files differnew file mode 100644 index 0000000..6e467a5 --- /dev/null +++ b/docs/html/images/distribute/hero-family.jpg diff --git a/docs/html/images/distribute/hero-g-play-guidebooks_2x.png b/docs/html/images/distribute/hero-g-play-guidebooks_2x.png Binary files differnew file mode 100644 index 0000000..3dfda18 --- /dev/null +++ b/docs/html/images/distribute/hero-g-play-guidebooks_2x.png diff --git a/docs/html/images/distribute/hero-ginlemon.jpg b/docs/html/images/distribute/hero-ginlemon.jpg Binary files differnew file mode 100644 index 0000000..11837b3 --- /dev/null +++ b/docs/html/images/distribute/hero-ginlemon.jpg diff --git a/docs/html/images/distribute/hero-haystack.jpg b/docs/html/images/distribute/hero-haystack.jpg Binary files differnew file mode 100644 index 0000000..36b6d9f --- /dev/null +++ b/docs/html/images/distribute/hero-haystack.jpg diff --git a/docs/html/images/distribute/hero-jelly-button.jpg b/docs/html/images/distribute/hero-jelly-button.jpg Binary files differnew file mode 100644 index 0000000..032755b --- /dev/null +++ b/docs/html/images/distribute/hero-jelly-button.jpg diff --git a/docs/html/images/distribute/hero-outfit7.jpg b/docs/html/images/distribute/hero-outfit7.jpg Binary files differnew file mode 100644 index 0000000..a013417 --- /dev/null +++ b/docs/html/images/distribute/hero-outfit7.jpg diff --git a/docs/html/images/home/hero-lollipop_2x.png b/docs/html/images/home/hero-lollipop_2x.png Binary files differnew file mode 100644 index 0000000..6f41e13 --- /dev/null +++ b/docs/html/images/home/hero-lollipop_2x.png diff --git a/docs/html/index.jd b/docs/html/index.jd index 2838959..cfbe7b6 100644 --- a/docs/html/index.jd +++ b/docs/html/index.jd @@ -6,96 +6,53 @@ page.customHeadTag=<meta name="google-site-verification" content="sa-bIAI6GKvct3 @jd:body -<div class="home-new-carousel-1"> - <div class="fullscreen-carousel-content"> - <div class="vcenter"> - <div class="wrap clearfix"> +<div class="dac-hero-carousel" data-carousel-query="collection:index/carousel"> +</div> - <div class="static resource-flow-layout wrap col-16"> - <div class="resource resource-card resource-card-18x6"> - - <div class="landing-section-header"> - <div class="col-10"><img src="{@docRoot}images/home/l-hero_2x.png" - srcset="{@docRoot}images/home/l-hero.png 1x, {@docRoot}images/home/l-hero_2x.png 2x" - width="510" style="margin:20px 30px 0 30px"></div> - <div class="col-5" style=" margin-top:70px "> - <h3 stye="font-weight:300;">Android 5.0 Lollipop</h3> - <p>The Android 5.0 update adds a variety of new - features for your apps, such as notifications on the lock screen, an all-new camera API, - OpenGL ES 3.1, the new Material design interface, and much more.</p> - <a href="{@docRoot}about/versions/lollipop.html" class="landing-button landing-primary">Learn More</a> - </div> - </div> - </div> - </div> - <h2> </h2> - <div style="margin-top:20px;height:115px" class="resource-widget resource-flow-layout wrap col-16 - no-section" data-query="collection:index/primary" data-resourcestyle="card" - data-sortorder="-timestamp" data-maxresults="3" data-cardsizes="6x2,6x2,6x2"></div> <!-- end .resource-widget --> - </div> <!-- end .wrap --> - </div> <!-- end .vcenter --> - </div> <!-- end .fullscreen-carousel-content --> -</div> <!-- end .fullscreen-carousel --> - -<div class="actions-bar" style="margin-top:20px"> +<div class="actions-bar dac-expand dac-invert"> <div class="wrap"> <div class="actions"> - <div><a href="{@docRoot}sdk/index.html">Get the SDK</a></div> - <div><a href="{@docRoot}samples/index.html">Browse Samples</a></div> - <div><a href="//www.youtube.com/user/androiddevelopers">Watch Videos</a></div> - <div><a href="{@docRoot}distribute/googleplay/developer-console.html">Manage Your Apps</a></div> + <div><a href="{@docRoot}sdk/index.html"> + <span class="dac-sprite dac-auto-chevron-large"></span> + Get the SDK + </a></div> + <div><a href="{@docRoot}samples/index.html"> + <span class="dac-sprite dac-auto-chevron-large"></span> + Browse Samples + </a></div> + <div><a href="//www.youtube.com/user/androiddevelopers"> + <span class="dac-sprite dac-auto-chevron-large"></span> + Watch Videos + </a></div> + <div><a href="{@docRoot}distribute/googleplay/developer-console.html"> + <span class="dac-sprite dac-auto-chevron-large"></span> + Manage Your Apps + </a></div> </div><!-- end .actions --> </div><!-- end .wrap --> </div><!-- end .actions-bar --> - - -<div class="landing-rest-of-page"> - <div class="landing-section"> - <div class="wrap"> - <div class="landing-section-header"> - - <div class="landing-h1" style="margin-top:0px">Build for a Multi-Screen World</div> - <div class="landing-subhead" style="margin-top: 20px;"> - Android runs on hundreds of millions of handheld devices around the world, <br> - and it now supports these exciting, new form-factors. - </div> - </div> - <div class="landing-body" style="margin-top: 50px;"> - <div class="landing-breakout cols"> - <div class="col-3-wide"> - <img src="{@docRoot}images/home/wear-wordmark.png"> - <img src="{@docRoot}images/home/wear.png"> - <p class="landing-small"> - Provide information on-the-go for your users, whenever they need it. - </p> - <p class="landing-small"> - <a href="{@docRoot}wear/index.html">Learn about Android Wear</a> - </p> - </div> - <div class="col-3-wide"> - <img src="{@docRoot}images/home/tv-wordmark.png"> - <img src="{@docRoot}images/home/tv.png"> - <p class="landing-small"> - Build your apps for the big screen and bring your content to life. - </p> - <p class="landing-small"> - <a href="{@docRoot}tv/index.html">Learn about Android TV</a> - - </p> - </div> - <div class="col-3-wide"> - <img src="{@docRoot}images/home/auto-wordmark.png"> - <img src="{@docRoot}images/home/auto.png"> - <p class="landing-small"> - Extend your music apps to automobile - entertainment systems. - </p> - <p class="landing-small"> - <a href="{@docRoot}auto/index.html">Learn about Android Auto</a> - </p> - </div> - </div> - </div> - </div> <!-- end .wrap --> - </div> <!-- end .landing-section -->
\ No newline at end of file +<section class="dac-section dac-section-light"><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. + </div> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:index/primary" + data-cardSizes="6x6" + data-maxResults="3"></div> +</div></section> + +<section class="dac-section dac-gray"><div class="wrap"> + <div class="cols"><div class="col-10of12 col-push-1of12"> + <h1 class="dac-section-title">Build for a Multi-Screen World</h1> + <div class="dac-section-subtitle"> + Android runs on hundreds of millions of handheld devices around the world, + and it now supports these exciting, new form-factors. + </div> + </div></div> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:index/multiscreen" + data-cardSizes="6x6" + data-maxResults="3"></div> +</div></section> diff --git a/docs/html/jd_collections.js b/docs/html/jd_collections.js index e2d0eb9..834eac1 100644 --- a/docs/html/jd_collections.js +++ b/docs/html/jd_collections.js @@ -1,4 +1,10 @@ var RESOURCE_COLLECTIONS = { + "index/carousel": { + "title": "", + "resources": [ + "about/versions/lollipop.html" + ] + }, "index/primary": { "title": "", "resources": [ @@ -7,6 +13,14 @@ var RESOURCE_COLLECTIONS = { "sdk/index.html" ] }, + "index/multiscreen": { + "title": "", + "resources": [ + "wear/index.html", + "tv/index.html", + "auto/index.html" + ] + }, "index/primary/zhcn": { "title": "", "resources": [ @@ -15,6 +29,128 @@ var RESOURCE_COLLECTIONS = { "intl/zh-cn/distribute/tools/localization-checklist.html" ] }, + "design/landing/latest": { + "title": "", + "resources": [ + "http://www.youtube.com/watch?v=p4gmvHyuZzw", + "http://www.youtube.com/watch?v=YaG_ljfzeUw", + "http://www.youtube.com/watch?v=XOcCOBe8PTc" + ] + }, + "design/landing/materialdesign": { + "title": "", + "resources": [ + "https://www.google.com/design/spec/animation/", + "https://www.google.com/design/spec/style/", + "https://www.google.com/design/spec/layout/", + "https://www.google.com/design/spec/components/", + "https://www.google.com/design/spec/patterns/", + "https://www.google.com/design/spec/usability/" + ] + }, + "design/landing/pureandroid": { + "title": "", + "resources": [ + "design/get-started/creative-vision.html", + "design/material/index.html", + "training/material/index.html", + "design/patterns/pure-android.html", + "design/patterns/new.html", + "design/devices.html" + ] + }, + "design/landing/resources": { + "title": "", + "resources": [ + "https://www.google.com/design/spec/resources/color-palettes.html", + "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" + ] + }, + "develop/landing/mainlinks": { + "title": "", + "resources": [ + "tools/studio/index.html", + "samples/new/index.html", + "tools/projects/templates.html" + ] + }, + "develop/landing/latest": { + "title": "", + "resources": [ + "http://android-developers.blogspot.com/2015/04/new-android-code-samples.html", + "http://android-developers.blogspot.com/2015/04/android-support-library-221.html", + "http://android-developers.blogspot.com/2015/03/a-new-reference-app-for-multi-device.html" + ] + }, + "develop/landing/performance": { + "title": "", + "resources": [ + "http://www.youtube.com/watch?v=fEEulSk1kNY", + "http://www.youtube.com/watch?v=-3ry8PxcJJA", + "http://www.youtube.com/watch?v=_kKTGK-Cb_4" + ] + }, + "develop/landing/buildwithgoogle": { + "title": "", + "resources": [ + ] + }, + "develop/landing/ubicomp": { + "title": "", + "resources": [ + "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=KNKGM4ss5Sc&index=4&list=PLWz5rJ2EKKc9BdE_PSLNIGjXXr3h_orXM" + ] + }, + "develop/landing/tools": { + "title": "", + "resources": [ + "https://www.youtube.com/watch?v=K2dodTXARqc&list=PLWz5rJ2EKKc8I9gHTMh5yKkwRRGE8BjbQ&index=1", + "https://www.youtube.com/watch?v=3PIc-DuEU2s&index=1&list=PLWz5rJ2EKKc9e0d55YHgJFHXNZbGHEXJX", + "https://www.youtube.com/watch?v=FOn64iqlphk&index=1&list=PLWz5rJ2EKKc9Qk1_iCZNbBp6adYnJf9Vf" + ] + }, + "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" + ] + }, + "distribute/landing/carousel": { + "title": "", + "resources": [ + "http://www.youtube.com/watch?v=Pd49vTkvu0U", + "http://www.youtube.com/watch?v=ekxABqJeRBc", + "http://www.youtube.com/watch?v=MPnH7h12h0U", + "http://www.youtube.com/watch?v=700gYRkhkLM" + ] + }, + "distribute/landing/googleplay": { + "title": "", + "resources": [ + "distribute/googleplay/about.html", + "distribute/googleplay/developer-console.html", + "distribute/googleplay/index.html#opportunities" + ] + }, + "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/edu/videos/stories": { "title": "", "resources": [ @@ -40,21 +176,20 @@ var RESOURCE_COLLECTIONS = { "launch/static": { "title": "", "resources": [ - "distribute/googleplay/about.html", - "distribute/googleplay/guide.html", - "about/versions/lollipop.html", - "distribute/googleplay/wear.html", - "distribute/googleplay/tv.html", - "distribute/googleplay/edu/about.html", - "distribute/googleplay/families/about.html", - "distribute/monetize/subscriptions.html", + "http://www.youtube.com/watch?v=1RIz-cmTQB4", + "http://www.youtube.com/watch?v=MVBMWDzyHAI", + "http://android-developers.blogspot.com/2013/11/app-translation-service-now-available.html", + "http://android-developers.blogspot.com/2013/10/more-visibility-for-tablet-apps-in.html", + "http://android-developers.blogspot.com/2013/11/bring-your-apps-into-classroom-with.html", + "distribute/essentials/quality/tablets.html", + "distribute/users/build-buzz.html", + "distribute/monetize/premium.html", "distribute/monetize/freemium.html", "distribute/monetize/ads.html", - "distribute/users/promote-with-ads.html", - "distribute/engage/deep-linking.html", - "distribute/engage/game-services.html", - "distribute/essentials/optimizing-your-app.html", - "distribute/engage/easy-signin.html", + "distribute/essentials/best-practices/apps.html", + "distribute/essentials/best-practices/games.html", + "distribute/users/know-your-user.html", + "distribute/googleplay/developer-console.html" ] }, "launch/static/ja": { @@ -1095,6 +1230,14 @@ var RESOURCE_COLLECTIONS = { "https://support.google.com/googleplay/answer/2651410" ] }, + "preview/landing/resources": { + "title": "", + "resources": [ + "preview/api-overview.html", + "preview/setup-sdk.html", + "preview/samples.html" + ] + }, "autolanding": { "title": "", "resources": [ diff --git a/docs/html/jd_extras.js b/docs/html/jd_extras.js index f91550f..cc11da5 100644 --- a/docs/html/jd_extras.js +++ b/docs/html/jd_extras.js @@ -99,6 +99,138 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "type":"video" }, { + "title":"DesignBytes: Intro To Material Design", + "titleFriendly":"", + "summary":"These days, UI designers need to be thinking about phones, tablets, laptops, TVs, smartwatches, and beyond. In this DesignByte we talk about how Google designers have been working on making cross-platform and multi-screen design easier. We wanted to build a design system that felt at home on every screen, from the smallest watch to the largest TV.", + "url":"http://www.youtube.com/watch?v=p4gmvHyuZzw", + "group":"", + "keywords": [], + "tags": [ + ], + "image":"http://i1.ytimg.com/vi/p4gmvHyuZzw/maxresdefault.jpg", + "type":"video" + }, + { + "title":"DesignBytes: Paper and Ink: The Materials that Matter", + "titleFriendly":"", + "summary":"Join Rich Fulcher to learn about the materials of material design. See how virtual paper and ink form the foundation of your tactile user interface and master the rules that govern their behaviour.", + "url":"http://www.youtube.com/watch?v=YaG_ljfzeUw", + "group":"", + "keywords": [], + "tags": [ + ], + "image":"http://i1.ytimg.com/vi/YaG_ljfzeUw/maxresdefault.jpg", + "type":"video" + }, + { + "title":"DesignBytes: Material Design in the Google I/O App", + "titleFriendly":"", + "summary":"Roman Nurik shares details on the design process for the Google I/O 2014 app. To check out the app's source code, visit github.com/google/iosched.", + "url":"http://www.youtube.com/watch?v=XOcCOBe8PTc", + "group":"", + "keywords": [], + "tags": [ + ], + "image":"http://i1.ytimg.com/vi/XOcCOBe8PTc/maxresdefault.jpg", + "type":"video" + }, + { + "title":"Battery Drain and Networking", + "titleFriendly":"", + "summary":"Let’s take a moment to make something insanely clear: As far as battery is concerned, NETWORKING is the biggest, baddest, dirtiest offender there is. And optimizing performance here isn’t easy. Since the chip isn’t always awake and draining power, means you can optimize how it wakes up, sends traffic, and saves battery.", + "url":"http://www.youtube.com/watch?v=fEEulSk1kNY", + "group":"", + "keywords": [], + "tags": [ + ], + "image":"http://i1.ytimg.com/vi/fEEulSk1kNY/maxresdefault.jpg", + "type":"video" + }, + { + "title":"Batching Background Work Until Later", + "titleFriendly":"", + "summary":"Yes, your app is special. But when it comes to battery use, sometimes it’s better to be part of the crowd. Why not spread the battery blame around a bit? Ian Ni-Lewis shows you how ridiculously easy it is to go from battery hog to team player in this video.", + "url":"http://www.youtube.com/watch?v=-3ry8PxcJJA", + "group":"", + "keywords": [], + "tags": [ + ], + "image":"http://i1.ytimg.com/vi/-3ry8PxcJJA/maxresdefault.jpg", + "type":"video" + }, + { + "title":"The Performance Lifecycle", + "titleFriendly":"", + "summary":"Performance problems surface in your application at the least-wanted times (like right before you’re about to ship your first build). But don’t freak out: There’s a simple process that you can follow to help get your performance back under control.", + "url":"http://www.youtube.com/watch?v=_kKTGK-Cb_4", + "group":"", + "keywords": [], + "tags": [ + ], + "image":"http://i1.ytimg.com/vi/_kKTGK-Cb_4/maxresdefault.jpg", + "type":"video" + }, + { + "title":"Introduction to Android Studio", + "titleFriendly":"", + "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&index=1", + "group":"", + "keywords": ["studio", "tools"], + "tags": [ + ], + "image":"http://i1.ytimg.com/vi/K2dodTXARqc/maxresdefault.jpg", + "type":"video" + }, + { + "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":"https://www.youtube.com/watch?v=FOn64iqlphk&index=1&list=PLWz5rJ2EKKc9Qk1_iCZNbBp6adYnJf9Vf", + "group":"", + "keywords": ["google play services"], + "tags": [ + ], + "image":"http://i1.ytimg.com/vi/FOn64iqlphk/maxresdefault.jpg", + "type":"video" + }, + { + "title":"Running a Successful Games Business with Google", + "titleFriendly":"", + "summary":"Sure, we all want to make the next great gaming masterpiece. But we also want to feed our families and/or dogs. Join Bob Meese from the Google Play team as he gives you some key pointers on how to make sure you're best taking advantage of Google Play and running a successful games business.", + "url":"http://www.youtube.com/watch?v=tDmnGNkTtlE", + "group":"", + "keywords": [], + "tags": [ + ], + "image":"http://i1.ytimg.com/vi/tDmnGNkTtlE/maxresdefault.jpg", + "type":"video" + }, + { + "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":"https://www.youtube.com/watch?v=6K_jxccHv5M&index=1&list=PLOU2XLYxmsILFBfx66ens76VMLMEPJAB0", + "group":"", + "keywords": ["tv"], + "tags": [ + ], + "image":"http://i1.ytimg.com/vi/6K_jxccHv5M/maxresdefault.jpg", + "type":"video" + }, + { + "title":"Under the Hood of 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. ", + "url":"https://www.youtube.com/watch?v=KNKGM4ss5Sc&index=4&list=PLWz5rJ2EKKc9BdE_PSLNIGjXXr3h_orXM", + "group":"", + "keywords": ["auto"], + "tags": [ + ], + "image":"http://i1.ytimg.com/vi/KNKGM4ss5Sc/maxresdefault.jpg", + "type":"video" + }, + { "title":"Developer Registration", "titleFriendly":"", "summary":"Additional information about the registration process.", @@ -1990,6 +2122,261 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "titleFriendly": "" }, { + "lang": "en", + "group": "", + "tags": [], + "url": "https://www.google.com/design/spec/animation/", + "timestamp": null, + "image": "images/cards/material-animation_2x.png", + "title": "Animation", + "summary": "", + "keywords": [], + "type": "material design", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://www.google.com/design/spec/style/", + "timestamp": null, + "image": "images/cards/material-style_2x.jpg", + "title": "Style", + "summary": "", + "keywords": [], + "type": "material design", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://www.google.com/design/spec/layout/", + "timestamp": null, + "image": "images/cards/material-layout_2x.png", + "title": "Layout", + "summary": "", + "keywords": [], + "type": "material design", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://www.google.com/design/spec/components/", + "timestamp": null, + "image": "images/cards/material-components_2x.jpg", + "title": "Components", + "summary": "", + "keywords": [], + "type": "material design", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://www.google.com/design/spec/patterns/", + "timestamp": null, + "image": "images/cards/material-patterns_2x.png", + "title": "Patterns", + "summary": "", + "keywords": [], + "type": "material design", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://www.google.com/design/spec/usability/", + "timestamp": null, + "image": "images/cards/material-usability_2x.png", + "title": "Usability", + "summary": "", + "keywords": [], + "type": "material design", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://www.google.com/design/spec/resources/color-palettes.html", + "timestamp": null, + "image": "images/cards/material-color-palette_2x.jpg", + "title": "Color Palettes", + "summary": "", + "keywords": [], + "type": "material design", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://www.google.com/design/spec/resources/layout-templates.html", + "timestamp": null, + "image": "images/cards/material-layout-template_2x.jpg", + "title": "Layout Templates", + "summary": "", + "keywords": [], + "type": "material design", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://www.google.com/design/spec/resources/sticker-sheets-icons.html", + "timestamp": null, + "image": "images/cards/material-sticker-sheet_2x.jpg", + "title": "Sticker Sheets & Icons", + "summary": "", + "keywords": [], + "type": "material design", + "titleFriendly": "" + }, + { + "lang": "en", + "group": "", + "tags": [], + "url": "https://www.google.com/design/spec/resources/roboto-noto-fonts.html", + "timestamp": null, + "image": "images/cards/material-typography_2x.jpg", + "title": "Typography: Roboto and Noto Sans fonts", + "summary": "", + "keywords": [], + "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": "" + }, + { + "title":"Android Wear Materials", + "titleFriendly":"", + "summary":"Drag and drop your way to beautifully designed Android Wear apps.", + "url":"design/downloads/index.html#Wear", + "group":"", + "keywords": ["icons","stencils","color swatches"], + "tags": ["icons","stencils","colorswatches"], + "image":"images/cards/android-wear-materials_2x.jpg", + "lang":"en", + "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&index=1&list=PLWz5rJ2EKKc9e0d55YHgJFHXNZbGHEXJX", + "group":"", + "keywords": ["support", "compatibility"], + "tags": [], + "image":"http://i1.ytimg.com/vi/3PIc-DuEU2s/maxresdefault.jpg", + "lang":"en", + "type":"Video" + }, + { + "tags": [ + "android", + "developerstory", + "googleplay", + "featured" + ], + "title": "Android Developer Storys: Jelly Button Games — Growing globally through data driven development", + "type": "youtube", + "url": "http://www.youtube.com/watch?v=Pd49vTkvu0U" + }, + { + "title":"Scale with Google Cloud Platform", + "titleFriendly":"", + "summary":"With Google Cloud Platform, developers can build, test and deploy applications on Google's highly-scalable and reliable infrastructure for your web, mobile and backend solutions.", + "url":"https://cloud.google.com/docs/", + "group":"", + "keywords": [], + "tags": [], + "image":"images/cards/cloud-platform_2x.png", + "lang":"en", + "type":"distribute" + }, + { + "title":"Opportunities & Programs", + "titleFriendly":"", + "summary":"This is a card body place holder text. This is a card body place holder text. This is a card body place holder text.", + "url":"distribute/googleplay/index.html#opportunities", + "group":"", + "keywords": [], + "tags": [], + "image":"images/cards/program-edu_2x.jpg", + "lang":"en", + "type":"distribute" + }, + { "lang": "ja", "title": "Gaming Everywhere", "titleFriendly": "", @@ -2313,4 +2700,45 @@ DISTRIBUTE_RESOURCES = DISTRIBUTE_RESOURCES.concat([ "image": "distribute/images/advertising.jpg", "type": "distribute" } -]);
\ No newline at end of file +]); + +var CAROUSEL_OVERRIDE = { + "about/versions/lollipop.html": { + "image": "images/home/hero-lollipop_2x.png", + "heroColor": "#263238", + "heroInvert": true, + "title": "Android 5.0 Lollipop", + "summary": "The Android 5.0 update adds a variety of new features for your apps, such as notifications on the lock screen, an all-new camera API, OpenGL ES 3.1, the new Material design interface, and much more." + }, + "distribute/googleplay/families/about.html": { + "image": "images/distribute/hero-family.jpg", + "title": "Designed for Families", + "summary": "Introducing a new Google Play section to promote family friendly apps. Your apps in the program can benefit from enhanced discoverability in addition to maintaining their existing categories, rankings, and reviews elsewhere on the Google Play store." + }, + "http://www.youtube.com/watch?v=Pd49vTkvu0U": { + "image": "images/distribute/hero-jelly-button.jpg", + "title": "How Jelly Button Games are growing globally through data", + "summary": "To really understand their users, Jelly Button Games analyses over 3 billion events each month using Google Analytics and Google BigQuery." + }, + "http://www.youtube.com/watch?v=700gYRkhkLM": { + "image": "images/distribute/hero-outfit7.jpg", + "title": "Outfit7 — Building an entertainment company with Google", + "summary": "Outfit7, creators of My Talking Tom and My Talking Angela, offer a complete entertainment experience to users spanning mobile apps, user generated and original YouTube content, and a range of toys, clothing, and accessories...." + }, + "http://www.youtube.com/watch?v=MPnH7h12h0U": { + "image": "images/distribute/hero-haystack.jpg", + "summary": "Haystack TV built a scalable business with six employees and Android TV. Two weeks was all it took for them to bring their mobile app to the big screen." + }, + "http://www.youtube.com/watch?v=ekxABqJeRBc": { + "image": "images/distribute/hero-ginlemon.jpg", + "title": "How GinLemon is breaking through with Google Play", + "summary": "Meet Vincenzo Colucci, developer and founder of GinLemon, which started as a summer holiday joke and has now become a successful global app business on Google Play based in Manfredonia, southern Italy." + }, + "distribute/googleplay/guide.html": { + "heroColor": "#fcb94e", + "image": "images/distribute/hero-g-play-guidebooks_2x.png", + "title": "Finding Success on Google Play", + "summary": "We’ve created a downloadable guide to help you find success with your app or game business on Google Play. In it, you’ll find features, tips, and best practices to help you build an effective strategy.", + "tags": [] + } +};
\ No newline at end of file diff --git a/docs/html/jd_tag_helpers.js b/docs/html/jd_tag_helpers.js index 7538e4d..f03b1d7 100644 --- a/docs/html/jd_tag_helpers.js +++ b/docs/html/jd_tag_helpers.js @@ -13,6 +13,7 @@ var ALL_RESOURCES = mergeArrays( GOOGLE_RESOURCES, GUIDE_RESOURCES, SAMPLES_RESOURCES, + PREVIEW_RESOURCES, TOOLS_RESOURCES, TRAINING_RESOURCES, YOUTUBE_RESOURCES, @@ -70,6 +71,7 @@ var ALL_RESOURCES_BY_TYPE = { 'google': GOOGLE_RESOURCES, 'guide': GUIDE_RESOURCES, 'samples': SAMPLES_RESOURCES, + 'preview': PREVIEW_RESOURCES, 'tools': TOOLS_RESOURCES, 'training': TRAINING_RESOURCES, 'youtube': YOUTUBE_RESOURCES, @@ -86,6 +88,7 @@ var ALL_RESOURCES_BY_TAG = mergeMaps( {map:GOOGLE_BY_TAG,arr:GOOGLE_RESOURCES}, {map:GUIDE_BY_TAG,arr:GUIDE_RESOURCES}, {map:SAMPLES_BY_TAG,arr:SAMPLES_RESOURCES}, + {map:PREVIEW_BY_TAG,arr:PREVIEW_RESOURCES}, {map:TOOLS_BY_TAG,arr:TOOLS_RESOURCES}, {map:TRAINING_BY_TAG,arr:TRAINING_RESOURCES}, {map:YOUTUBE_BY_TAG,arr:YOUTUBE_RESOURCES}, diff --git a/docs/html/preview/api-overview.jd b/docs/html/preview/api-overview.jd new file mode 100644 index 0000000..dde3c7b --- /dev/null +++ b/docs/html/preview/api-overview.jd @@ -0,0 +1,120 @@ +page.title=API Overview +page.keywords=preview,sdk,compatibility +sdk.platform.apiLevel=22 +@jd:body + + +<div id="qv-wrapper"> +<div id="qv"> + +<h2>In this document + <a href="#" onclick="hideNestedItems('#toc44',this);return false;" class="header-toggle"> + <span class="more">show more</span> + <span class="less" style="display:none">show less</span></a></h2> + +<ol id="toc44" class="hide-nested"> + <li><a href="#">Important Behavior Changes</a> + <ol> + <li><a href="#">change 1</a></li> + <li><a href="#">change 2</a></li> + </ol> + </li> + <li><a href="#">Feature Group 1</a> + <ol> + <li><a href="#">change 1</a></li> + <li><a href="#">change 2</a></li> + </ol> + </li> + <li><a href="#">Feature Group 2</a> + <ol> + <li><a href="#">change 1</a></li> + <li><a href="#">change 2</a></li> + </ol> + </li> +</ol> + +</div> +</div> + +<p>The M Developer Preview gives you an advance look at the upcoming release +for the Android platform, which offers new features for users and app +developers. This document provides an introduction to the most notable APIs.</p> + +<p>The M Developer Preview is intended for <strong>developer early +adopters</strong> and <strong>testers</strong>. If you are interested in +influencing the direction of the Android framework, +<a href="{@docRoot}preview/setup-sdk.html">give the M Developer Preview a +try</a> and send us your feedback!</p> + +<p class="caution"><strong>Caution:</strong> Do not not publish apps +that use the M Developer Preview to the Google Play store.</p> + +<p class="note"><strong>Note:</strong> This document often refers to classes and +methods that do not yet have reference material available on <a +href="{@docRoot}">developer.android.com</a>. These API elements are +formatted in {@code code style} in this document (without hyperlinks). For the +preliminary API documentation for these elements, download the <a +href="http://storage.googleapis.com/androiddevelopers/preview/l-developer-preview-reference.zip">preview +reference</a>.</p> + +<h2 id="Behaviors">Important Behavior Changes</h2> + +<p>If you have previously published an app for Android, be aware that your app + might be affected by changes in the upcoming release.</p> + +<h3 id="id">Behavior Change 1</h3> + +<p> + Bacon ipsum dolor amet biltong picanha t-bone, jowl salami tri-tip jerky kielbasa sirloin boudin + porchetta fatback cow meatloaf capicola. Short ribs kielbasa pig drumstick rump boudin jowl chuck + beef ribs doner tenderloin biltong swine. +</p> + + + +<h2 id="id">Feature Group 1</h2> + +<h3 id="id">Feature item 1</h3> + +<p> + Bacon ipsum dolor amet landjaeger capicola tail sausage shank swine biltong pork andouille t-bone + alcatra chicken. Strip steak bacon tongue beef bresaola landjaeger. Shankle boudin pork belly + jowl pig. Rump swine ham hock frankfurter pork shankle. Shank corned beef alcatra doner flank + turducken. Tongue brisket ham shoulder: +</p> + +<h3 id="id">Feature item 2</h3> + +<p> + Bacon ipsum dolor amet landjaeger capicola tail sausage shank swine biltong pork andouille t-bone + alcatra chicken. Strip steak bacon tongue beef bresaola landjaeger. Shankle boudin pork belly + jowl pig. Rump swine ham hock frankfurter pork shankle. Shank corned beef alcatra doner flank + turducken. Tongue brisket ham shoulder: +</p> + +<h2 id="id">Feature Group 2</h2> + +<h3 id="id">Feature item 1</h3> + +<p> + Bacon ipsum dolor amet landjaeger capicola tail sausage shank swine biltong pork andouille t-bone + alcatra chicken. Strip steak bacon tongue beef bresaola landjaeger. Shankle boudin pork belly + jowl pig. Rump swine ham hock frankfurter pork shankle. Shank corned beef alcatra doner flank + turducken. Tongue brisket ham shoulder: +</p> + +<h3 id="id">Feature item 2</h3> + +<p> + Bacon ipsum dolor amet landjaeger capicola tail sausage shank swine biltong pork andouille t-bone + alcatra chicken. Strip steak bacon tongue beef bresaola landjaeger. Shankle boudin pork belly + jowl pig. Rump swine ham hock frankfurter pork shankle. Shank corned beef alcatra doner flank + turducken. Tongue brisket ham shoulder: +</p> + + + +<p class="note"> + For a detailed view of all API changes in the M Developer Preview, see the <a href= + "{@docRoot}preview/reference.html">API Differences Report</a>. +</p>
\ No newline at end of file diff --git a/docs/html/preview/images/bugs.png b/docs/html/preview/images/bugs.png Binary files differnew file mode 100644 index 0000000..46adf05 --- /dev/null +++ b/docs/html/preview/images/bugs.png diff --git a/docs/html/preview/images/dev-prev.png b/docs/html/preview/images/dev-prev.png Binary files differnew file mode 100644 index 0000000..eae6ede --- /dev/null +++ b/docs/html/preview/images/dev-prev.png diff --git a/docs/html/preview/images/updates.png b/docs/html/preview/images/updates.png Binary files differnew file mode 100644 index 0000000..f165c5a --- /dev/null +++ b/docs/html/preview/images/updates.png diff --git a/docs/html/preview/index.html b/docs/html/preview/index.html index 7cd029f..af99e2d 100644 --- a/docs/html/preview/index.html +++ b/docs/html/preview/index.html @@ -1,81 +1,23 @@ <!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 L 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> -<a name="download"></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; z-index:99"> - <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> @@ -89,7 +31,6 @@ body,html, #qv {background-color:#e9e9e9} - <div class="landing-rest-of-page" style="position:relative;"> @@ -98,463 +39,299 @@ body,html, #qv {background-color:#e9e9e9} - <div class="wrap" id="tos" style="display:none;padding-top:90px"> - <p class="sdk-terms-intro">Before downloading the Android Preview system image, - you must agree to the following terms and conditions.</p> - <h2 class="norule">Terms and Conditions</h2> - <div class="sdk-terms" onfocus="this.blur()" style="width:100%"> -This is the Android SDK Preview License Agreement (the “License Agreement”). -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. +<html> +<head> -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. +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<meta name="viewport" content="width=970" /> -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. +<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> -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. +<!-- 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"> -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><!-- sdk terms --> +<!-- 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> - <div id="sdk-terms-form"> - <p> - <input id="agree" type="checkbox" name="agree" value="1" onclick="onAgreeChecked()" /> - <label id="agreeLabel" for="agree">I have read and agree with the above terms and conditions</label> - </p> - <p><a href="" class="button disabled" id="downloadForRealz" onclick="return onDownloadForRealz(this);"></a></p> - </div> +<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> - </div><!-- end TOS --> +</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> - <div class="landing-section" id="landing-wrapper" style="padding:55px 10px 0"> - <div class="landing-section-header" style="margin:0"> - <div class="landing-h1">Android L Developer Preview</div> - <div class="landing-subhead" style="padding-bottom:40px"> - Final APIs now available! + <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 class="wrap" style="padding:20px; position:relative"> - - <img src="/images/home/l-hero_2x.png" - srcset="/images/home/l-hero.png 1x, /images/home/l-hero_2x.png 2x" - style=" margin:-5px -30px 0 0;float:right" alt="" width="510"> - - <a href="/about/versions/android-5.0.html" class="landing-button landing-primary" - style="position:absolute;z-index:100;right:215px;top:375px">Android 5.0 API Overview</a> - - <div style="width:440px"> -<p>Android 5.0 (Lollipop) is now out of preview and available to users.</p> - -<p>If you previously developed apps with the L Developer Preview, be aware that various APIs and -behaviors have changed, so you should update your SDK now to test your apps and take advantage of -new features in Android 5.0.</p> - - - <p>To get the latest Android 5.0 SDK:</p> - <ol> - <li>Start the <a href="/tools/help/sdk-manager.html">Android SDK Manager</a>.</li> - <li>In the <b>Tools</b> section, select the latest <b>SDK Tools</b>, - <b>SDK Platform-tools</b>, and <b>SDK Build-tools</b>.</li> - <!-- Android L not yet showing up in Android SDK Manager... --> - <li>Select everything under the <b>Android 5.0</b> section, then - click <b>Install packages...</b></li> - <li>Accept the licensing agreement for the packages, then click - <b>Install</b>.</li> - <li>If you previously installed the Android L Preview SDK, select all those - packages in the SDK Manager and click <strong>Delete packages</strong>. - </ol> - <p>Now you're ready to develop and test on Android 5.0 with your normal workflow - and begin publishing app updates to Google Play. - </div> - - <h2 id="Start" class="norule" style="margin:60px 0 0 0">Get Started on Android 5.0</h2> </div> <!-- end .wrap --> + </div> <!-- end .landing-section --> - <div class="wrap" style="background-color:#fff;padding:20px;position:relative"> - - <div id="qv-wrapper"> - <div id="qv"> - <h2>More about Android 5.0</h2> - <ul> - <li><a href="http://android-developers.blogspot.com/">Android 5.0 announcement</a></li> - <li><a href="/about/versions/android-5.0.html">Android 5.0 API Overview</a></li> - <li><a href="/sdk/api_diff/21/changes.html">Android 5.0 API Diff Report</a></li> - <li><a href="/samples/new/index.html">Android 5.0 API Samples</a></li> - </ul> - </div> + <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> - <p>Now that Android 5.0 APIs are final:</p> - <ul> - <li>The API level for Android 5.0 is 21, so be sure to update your - app's manifest file to set <a href="/guide/topics/manifest/uses-sdk-element.html#target" - ><code>targetSdkVersion</code></a> to - <code>"21"</code> when you begin testing: - <pre><uses-sdk android:targetSdkVersion="21" ... /></pre> - </li> - <li>Google Play now accepts APKs with <a - href="/guide/topics/manifest/uses-sdk-element.html#min"><code>minSdkVersion</code></a> or - <a href="/guide/topics/manifest/uses-sdk-element.html#target" - ><code>targetSdkVersion</code></a> set - to <code>"21"</code>, so you can upload your updated apps today.</li> - </ul> - - <p>If you previously flashed your Nexus 5 or Nexus 7 with a preview system image, you should - now update your device to the final factory system image. - Download the appropriate image from - <a href="http://developers.google.com/android/nexus/images">Factory Images for Nexus - Devices</a> and follow the flashing instructions on that page.</p> - - </div> <!-- end .wrap --> - - - - - - - - - <div class="wrap" style="padding:20px; position:relative"> - <h2 id="Material" class="norule" style="margin:40px 0 0 0">Design with Material</h2> - </div> - - <div class="wrap" style="background-color:#fff;padding:20px;position:relative"> - <img src="images/material-layers.png" width="240" - style="position:absolute;right:20px;top:-50px"> - - <div id="qv-wrapper" style="margin-top:120px"> - <div id="qv"> - - <h2>More about Material Design</h2> - <ul> - <li><a href="http://www.google.com/design/spec/material-design/introduction.html">Material - Design Spec</a></li> - <li><a href="/design/material/index.html">Android Material Design</a></li> - <li><a href="/training/material/index.html">Creating Apps with Material Design</a> - </ul> + <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> - - -<p>Material design is a complete design philosophy for visual, motion, and interaction design -across platforms and devices. The <a href= -"http://www.google.com/design/spec/material-design/introduction.html">material design specification -(preview)</a> provides all the details for designers.</p> - - - <p>To get started with Material design in your Android app, update - your <a href="/guide/topics/manifest/uses-sdk-element.html#target" - ><code>targetSdkVersion</code></a> to <code>"21"</code> and apply the new - <a href="/reference/android/R.style.html#Theme_Material" - ><code>Material</code></a> theme. For example, when creating - a <a href="/guide/topics/ui/themes.html">custom theme</a> - for your app, open your project's <code>res/values/styles.xml</code> file - and extend the <a href="/reference/android/R.style.html#Theme_Material" - ><code>Material</code></a> theme:</p> -<pre> -<resources> - <style name="AppTheme" parent="android:Theme.Material"> - <!-- Customize the Material elements here --> - </style> -</resources> -</pre> -<p>Then apply your custom theme to your application in the manifest file:</p> -<pre> -<application android:theme="@style/AppTheme"> -</pre> -<p>Material design is more than just the UI theme, though. It's also about the way the app - behaves—how elements move and transform when the user interacts with them. So Android 5.0 - and the <a href="/tools/support-library/features.html#v7">v7 support library</a> provide new - widgets and animation APIs that allow you to - build interaction patterns described in the - <a href="http://www.google.com/design/spec/material-design/introduction.html">Material design - specification</a>.</p> - -<p>All the Material design elements and interaction patterns provided by the UI styles and widgets -are flexible, so you can adopt only what's appropriate for your app and retain a unique identity -and experience for your product.</p> - -<p>And Material design on Android isn't just for Android 5.0. The - <a href="/tools/support-library/features.html#v7">v7 support library</a> has been significantly - updated in revision 21 to make many of the Material design elements available when - running on older versions of the platform.</p> - -<p>For many more details about how to implement the Material look and feel, - see <a href="/training/material/index.html">Creating Apps with Material - Design</a>.</p> - - - </div> - - - - - - - - - - - - <div class="wrap" style="padding:20px; position:relative"> - <h2 id="TV" class="norule" style="margin:40px 0 0 0">Build for Android TV</h2> - </div> - - <div class="wrap" style="background-color:#fff;padding:20px;position:relative"> - <img src="/tv/images/components.png" width="240" - style="position:absolute;right:20px;top:-50px"> - - <div id="qv-wrapper" style="margin-top:120px"> - <div id="qv"> - - <h2>More about Android TV</h2> - <ul> - <li><a href="/design/tv/index.html">Android TV Design</a></li> - <li><a href="/training/tv/start/index.html">Building Apps for Android TV</a></li> - <li><a href="/training/tv/games/index.html">Building TV Games</a></li> - <li><a href="/training/tv/playback/index.html">Building TV Playback Apps</a></li> - <li><a href="/distribute/essentials/quality/tv.html">TV App Quality</a></li> - </ul> - </div> - </div> - -<p>Android 5.0 provides a new platform for users to experience your app on a big screen. The -Android TV experience is centered around a simplified home screen that allows users to discover -your app's content with personalized recommendations and voice search, or select your app to launch -into your fullscreen experience.</p> - - -<p>Making your app available on Android TV does not require that you build an entirely new app. -Android TV is simply another form factor for the Android platform, so you can deliver the same APK -that you provide for phones and tablets to TVs through Google Play. However, to make your app -available on Android TV, you'll need to make some optimizations such as adding layouts -for the big screen and adding support for remote control input. For more information about design -guidelines, see <a href="/distribute/essentials/quality/tv.html">TV App Quality</a>.</p> - -<p class="note"><strong>Note:</strong> Google Play for Android TV will officially -open for apps on November 3.</p> - -<p>Android TV is also great new opportunity for Android games. If you'd like to make your games -available on Android TV, be sure to optimize the user experience for the big screen by following -the recommendations in <a href="/training/tv/games/index.html">Building TV Games</a>.</p> - - - <p>To get started on Android TV, you need:</p> - <ul> - <li>The Android 5.0 SDK packages from the - <a href="/tools/help/sdk-manager.html">Android SDK Manager</a>, - including the <strong>Android TV System Image</strong> so you can create an - Android TV emulator.</li> - <li>An activity that's launchable from the Android TV home screen. This requires that you - add the <a href="/reference/android/content/Intent.html#CATEGORY_LEANBACK_LAUNCHER" - ><code>LEANBACK_LAUNCHER</code></a> category to one of your activities. For example: -<pre> -<activity ... > - <intent-filter> - <action android:name="android.intent.action.MAIN" /> - <category android:name="android.intent.category.LEANBACK_LAUNCHER" /> - </intent-filter> -</activity> -</pre> - </li> - - <li>For a set of default styles that optimize your UI for the TV's - <em>leanback user experience</em>, - you should also apply the <a - href="/reference/android/support/v17/leanback/R.style.html#Theme_Leanback" - ><code>Leanback</code></a> theme to your activity: -<pre> -<activity android:theme="@style/Theme.Leanback" ... > -</pre> - </li> - - </ul> - <p>You should also take advantage of the <a - href="/tools/support-library/features.html#v17-leanback">v17 leanback library</a>, which - provides the <a href="/reference/android/support/v17/leanback/R.style.html#Theme_Leanback" - ><code>Leanback</code></a> theme shown above, plus several widgets designed to - make your UI beautiful and easy to navigate on the big screen, such as a widget that creates - a set of large horizontal card views.</p> - - <p>For more information about setting up a project for your TV app, building - TV layouts, and handling controller input, - see <a href="/training/tv/start/index.html">Building - TV Apps</a>.</p> - </div> - - - - - - - - - </div> <!-- end .landing-section --> - - - - - - - - - <!-- spacer --> - <div class="wrap" style="padding:20px; position:relative"> - <p> </p> </div> - - - - <div id="footer" class="wrap" style="width:940px;position:relative;"> + <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="https://developer.android.com/license.html">Content + 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="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> @@ -571,7 +348,7 @@ the recommendations in <a href="/training/tv/games/index.html">Building TV Games 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 + restrictions, see the <a href="/license.html">Content License</a>. </div> @@ -582,50 +359,14 @@ the recommendations in <a href="/training/tv/games/index.html">Building TV Games </div> <!-- end body-content --> -<script> - var urlRoot = "http://storage.googleapis.com/androiddevelopers/finalpreview/"; - function onDownload(link) { - - $("#downloadForRealz").html("Download " + $(link).text()); - $("#downloadForRealz").attr('href', urlRoot + $(link).text()); - - $("#tos").show(); - $("#landing-wrapper").hide(); - - return true; - } - - - function onAgreeChecked() { - /* verify that the TOS is agreed */ - if ($("input#agree").is(":checked")) { - /* reveal the download button */ - $("a#downloadForRealz").removeClass('disabled'); - } else { - $("a#downloadForRealz").addClass('disabled'); - } - } - - function onDownloadForRealz(link) { - if ($("input#agree").is(':checked')) { - $("#tos").fadeOut('fast'); - $("#landing-wrapper").fadeIn('fast'); - ga('send', 'event', 'L Preview', 'System Image', $("#downloadForRealz").html()); - location.hash = ""; - // reset the checkbox for future downloads - $("#agree").trigger('click'); - $("a#downloadForRealz").addClass('disabled'); - return true; - } else { - $("label#agreeLabel").parent().stop().animate({color: "#258AAF"}, 200, - function() {$("label#agreeLabel").parent().stop().animate({color: "#222"}, 200)} - ); - return false; - } - } -</script> + <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>
\ No newline at end of file +</html> diff --git a/docs/html/preview/index.jd b/docs/html/preview/index.jd new file mode 100644 index 0000000..a2d0b18 --- /dev/null +++ b/docs/html/preview/index.jd @@ -0,0 +1,60 @@ +page.title=M Developer Preview +page.tags=preview +meta.tags="preview" +fullpage=true +page.viewport_width=970 +section.landing=true +header.hide=1 +footer.hide=1 +@jd:body + +<section class="dac-expand dac-hero dac-light"> + <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="/design/media/hero-material-design.png"> + </div> + <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! + </p> + <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="{@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="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> + <div class="resource-widget resource-flow-layout col-16" + data-query="collection:preview/landing/resources" + data-cardSizes="6x6" + data-maxResults="6"></div> +</div></section> + + diff --git a/docs/html/preview/license.jd b/docs/html/preview/license.jd new file mode 100644 index 0000000..5ff52ba --- /dev/null +++ b/docs/html/preview/license.jd @@ -0,0 +1,143 @@ +page.title=License Agreement + +@jd:body + +<p> +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. 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:700px"> +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>
\ No newline at end of file diff --git a/docs/html/preview/overview.jd b/docs/html/preview/overview.jd new file mode 100644 index 0000000..00f1cfe --- /dev/null +++ b/docs/html/preview/overview.jd @@ -0,0 +1,7 @@ +page.title=Preview Program Overview + +@jd:body + +<p> + This is an overview of the program. Bacon. +</p>
\ No newline at end of file diff --git a/docs/html/preview/preview_toc.cs b/docs/html/preview/preview_toc.cs new file mode 100644 index 0000000..fbf73f6 --- /dev/null +++ b/docs/html/preview/preview_toc.cs @@ -0,0 +1,37 @@ +<ul id="nav"> + + <li class="nav-section"> + <div class="nav-section-header empty"><a href="<?cs var:toroot ?>preview/overview.html"> + Program Overview</a></div> + </li> + + <li class="nav-section"> + <div class="nav-section-header empty"><a href="<?cs var:toroot ?>preview/setup-sdk.html"> + Set up the SDK</a></div> + </li> + + <li class="nav-section"> + <div class="nav-section-header empty"><a href="<?cs var:toroot ?>preview/api-overview.html"> + API Overview</a></div> + </li> + + <li class="nav-section"> + <div class="nav-section-header empty"><a href="<?cs var:toroot ?>preview/samples.html"> + Samples</a></div> + </li> + <li class="nav-section"> + <div class="nav-section-header empty"><a href="<?cs var:toroot ?>preview/reference.html"> + Reference</a></div> + </li> + + <li class="nav-section"> + <div class="nav-section-header empty"><a href="<?cs var:toroot ?>preview/support.html"> + Support</a></div> + </li> + + <li class="nav-section"> + <div class="nav-section-header empty"><a href="<?cs var:toroot ?>preview/license.html"> + License Agreement</a></div> + </li> + +</ul> diff --git a/docs/html/preview/reference.jd b/docs/html/preview/reference.jd new file mode 100644 index 0000000..2d30c62 --- /dev/null +++ b/docs/html/preview/reference.jd @@ -0,0 +1,15 @@ +page.title=Reference + +@jd:body + +<p> + The reference documentation and API difference report for the Developer Preview are available in + this downloadable package. +</p> + +<ul> + <li> + <a href="http://storage.googleapis.com/androiddevelopers/preview/m-developer-preview-reference.zip"> + M Developer Preview reference</a> + </li> +</ul>
\ No newline at end of file diff --git a/docs/html/preview/samples.jd b/docs/html/preview/samples.jd new file mode 100644 index 0000000..fb80e30 --- /dev/null +++ b/docs/html/preview/samples.jd @@ -0,0 +1,37 @@ +page.title=Samples + +@jd:body + +<p> + The following code samples are provided for the M Developer Preview. You can download them in the + Android SDK Manager under the <b>SDK Samples</b> component for the M Developer Preview. +</p> + +<p class="note"> + <strong>Note:</strong> These downloadable projects are designed + for use with Gradle and Android Studio. +</p> + + +<h3 id="id">Sample 1</h3> + +<p> + This sample demonstrates how to turducken frankfurter boudin, ham brisket alcatra kielbasa pork + loin pork. Jowl kielbasa kevin, sausage landjaeger corned beef cow spare ribs pastrami leberkas + drumstick. +</p> + +<p><a href="#">Get it on GitHub</a></p> + + +<h3 id="id">Sample 2</h3> + +<p> + This sample demonstrates how to turducken frankfurter boudin, ham brisket alcatra kielbasa pork + loin pork. Jowl kielbasa kevin, sausage landjaeger corned beef cow spare ribs pastrami leberkas + drumstick. +</p> + +<p><a href="#">Get it on GitHub</a></p> + + diff --git a/docs/html/preview/setup-sdk.jd b/docs/html/preview/setup-sdk.jd new file mode 100644 index 0000000..11b009e --- /dev/null +++ b/docs/html/preview/setup-sdk.jd @@ -0,0 +1,361 @@ +page.title=Setting Up the Preview SDK +@jd:body + + + + + + + +<div style="position:relative; min-height:600px"> + + <div class="wrap" id="tos" style="position:absolute;display:none;width:inherit;"> + + <p class="sdk-terms-intro">Before installing the Android SDK, you must agree to the following terms and conditions.</p> + + <h2 class="norule">Terms and Conditions</h2> + <div class="sdk-terms" onfocus="this.blur()" style="width:678px"> +This is the Android SDK Preview License Agreement (the “License Agreement”). + +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><!-- sdk terms --> + + + + <div id="sdk-terms-form"> + <p> + <input id="agree" type="checkbox" name="agree" value="1" onclick="onAgreeChecked()" /> + <label id="agreeLabel" for="agree">I have read and agree with the above terms and conditions</label> + </p> + <p><a href="" class="button disabled" id="downloadForRealz" onclick="return onDownloadForRealz(this);"></a></p> + </div> + + + </div><!-- end TOS --> + + + + + + + + + + <div id="landing"> + +<p>The Preview SDK is available from the Android SDK Manager. +This document assumes that you are familiar with Android app development, such +as using the Android SDK Manager and creating projects. If you're new to +Android, see <a href="{@docRoot}training/basics/firstapp/index.html">Building Your First +App</a> training lesson first.</a></p> + +<h2 id="downloadSdk">Download the SDK</h2> + +<ol> + <li>Start the <a href="{@docRoot}tools/help/sdk-manager.html">Android SDK Manager</a>.</li> + <li>In the <b>Tools</b> section, select the latest Android <b>SDK Tools</b>, + <b>Platform-tools</b>, and <b>Build-tools</b>.</li> + <li>Select everything under the <b>Android M Developer Preview</b> section and + click <b>Install packages...</b></li> + <li>Accept the Licensing Agreement for all of the packages and click + <b>Install</b>.</li> +</ol> + +<p class="note"><strong>Note:</strong> The Eclipse ADT plug-in requires Java 7 + if your compilation target is the M Developer Preview.</p> + +<h2 id="setupHardware">Set Up Hardware and AVDs</h2> + +<p>The Android M Developer Preview provides you with 32-bit system images +to flash the following devices: +</p> + +<ul> + <li>Nexus 5</li> + <li>Nexus 7 Wi-Fi (version 2, released in 2013)</li> +</ul> + +<p>In addition, you also get the emulator system images, which includes +experimental 64-bit system images along with standard 32-bit system images. +</p> + +<p class="note"><strong>Note:</strong> The 64-bit system images require the +Intel x86 Emulator Accelerator (HAXM) Rev.5 which can be downloaded from the +<a href="{@docRoot}tools/help/sdk-manager.html">SDK Manager</a> <em>Extras</em> +folder.</p> + + +<h3 id="installImage">Install the M Preview System Image</h3> + +<p class="warning"><b>Warning:</b> This is a preview version of the Android +system image, and is subject to change. Your use of this system image is +governed by the Android SDK Preview License Agreement. The Android preview +system image is not a stable release, and may contain errors and defects that +can result in damage to your computer systems, devices, and data. The preview +Android system image is not subject to the same testing as the factory OS and +can cause your phone and installed services and applications to stop working. +</p> + + +<ol> + <li>Download and uncompress the Android Developer Preview package. + <table style="width:860px"> + <tr> + <th scope="col">Device</th> + <th scope="col">Download</th> + <th scope="col">Checksum</th> + </tr> + <tr id="hammerhead"> + <td>Nexus 5 (GSM/LTE) <br>"hammerhead"</td> + <td><a href="#top" onclick="onDownload(this)" + >hammerhead-lpv79-preview-ac1d8a8e.tgz</a></td> + <td>MD5: <code>5a6ae77217978cb7b958a240c2e80b57</code> + <br>SHA-1: <code>ac1d8a8e4f4a1dca5864dc733caa940bffc28616</code></td> + </tr> + <tr id="razor"> + <td>Nexus 7 (Wifi) <br>"razor"</td> + <td><a href="#top" onclick="onDownload(this)" + >razor-lpv79-preview-d0ddf8ce.tgz</a></td> + <td>MD5: <code>b293a5d3a4e07beabebcc0be85ad68a2</code> + <br><nobr>SHA-1: <code>d0ddf8ce733ba2a34279cdff8827fd604762c2342d</nobr></td> + </tr> + </table> + </li> + + <li>Follow the instructions at + <a href="https://developers.google.com/android/nexus/images#instructions">developers.google.com/android</a> + to flash the image onto your device.</li> +</ol> + + +<h3 id="revertDevice">Revert a Device to Factory Specifications</h3> + + <p>If you want to uninstall the Preview and revert the device to factory +specifications, go to <a href="http://developers.google.com/android +/nexus/images">developers.google.com/android</a> and download the image you want +to flash to for your device. Follow the instructions on that page to flash the +image to your device.</p> + + +<h3 id="setupAVD">Set up an AVD</h3> + +<p>You can set up <a href="{@docRoot}tools/devices/">Android Virtual Devices +(AVD)</a> and use the emulator to build and test apps with the M Preview.</p> + +<p>To create an AVD with the AVD Manager:</p> + +<ol> + <li>Install the M Preview SDK in your development environment, as described + in <a href="{@docRoot}preview/setup-sdk.html">Setting Up the Preview + SDK.</a></li> + <li>Follow the steps in + <a href="{@docRoot}tools/devices/managing-avds.html">Managing AVDs with AVD + Manager</a>. Use the following settings: + <ul> + <li><b>Device:</b> Either Nexus 5 or Nexus 7</li> + <li><b>Target:</b> <!-- Confirm exact text when we have final distro --> + Android M (Preview) - API Level M</li> + </ul> + <!-- Confirm this works when you can download image through SDK manager! --> + </li> +</ol> + + +<h2 id="createProject">Create a Project</h2> + +<p>Android Studio makes it easy to create a project for the M Developer Preview. Follow +the steps described in <a href="{@docRoot}sdk/installing/create-project.html">Creating a +Project</a>. In the <strong>Form Factors</strong> screen:</p> + +<ul> + <li>Check <strong>Phone and Tablet</strong>.</li> + <li>Select <strong>API 22+: Android M (Preview)</strong> in <strong>Minimum SDK</strong>.</li> +</ul> + +<p>On the development environment, open the <code>build.gradle</code> file for your module +and make sure that:</p> + +<ul> + <li><code>compileSdkVersion</code> is set to <code>'android-M'</code></li> + <li><code>minSdkVersion</code> is set to <code>'M'</code></li> + <li><code>targetSdkVersion</code> is set to <code>'M'</code></li> +</ul> + + </div><!-- landing --> + +</div><!-- relative wrapper --> + + + +<script> + var urlRoot = "http://storage.googleapis.com/androiddevelopers/preview/"; + function onDownload(link) { + + $("#downloadForRealz").html("Download " + $(link).text()); + $("#downloadForRealz").attr('href', urlRoot + $(link).text()); + + $("#tos").fadeIn('fast'); + $("#landing").fadeOut('fast'); + + return true; + } + + + function onAgreeChecked() { + /* verify that the TOS is agreed */ + if ($("input#agree").is(":checked")) { + /* reveal the download button */ + $("a#downloadForRealz").removeClass('disabled'); + } else { + $("a#downloadForRealz").addClass('disabled'); + } + } + + function onDownloadForRealz(link) { + if ($("input#agree").is(':checked')) { + $("#tos").fadeOut('fast'); + $("#landing").fadeIn('fast'); + ga('send', 'event', 'M Preview', 'System Image', $("#downloadForRealz").html()); + location.hash = ""; + return true; + } else { + $("label#agreeLabel").parent().stop().animate({color: "#258AAF"}, 200, + function() {$("label#agreeLabel").parent().stop().animate({color: "#222"}, 200)} + ); + return false; + } + } + + $(window).hashchange( function(){ + if (location.hash == "") { + location.reload(); + } + }); + +</script> diff --git a/docs/html/preview/support.jd b/docs/html/preview/support.jd new file mode 100644 index 0000000..4be6dd7 --- /dev/null +++ b/docs/html/preview/support.jd @@ -0,0 +1,67 @@ +page.title=Support + +@jd:body + +<p> + If you've encountered bugs or have feedback about the M Developer Preview, + <a href="https://code.google.com/p/android-developer-preview/">create an issue</a> + on our issue tracker. +</p> + +<p> + For more support, join the + <a href="https://plus.google.com/communities/101985907812750684586">M Developer + Preview Google+ community</a> to discuss your development experiences. +</p> + +<h2 id="release-notes">Release Notes</h2> + +<!-- +<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=""/>M Developer Preview, Revision 2</a> <em>(Month 2015)</em> + </p> + + <div class="toggle-content-toggleme"> + + <dl> + + <dt>Fix Category 1</dt> + <dd> + <ul> + <li>Fixed issue X.</li> + <li>Fixed issue Y.</li> + <li>Fixed issue Z.</li> + </ul> + </dd> + + <dt>Fix Category 2</dt> + <dd> + <ul> + <li>Fixed issue X.</li> + <li>Fixed issue Y.</li> + <li>Fixed issue Z.</li> + </ul> + </dd> + + </dl> + </div> +</div> +--> + +<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=""/>M Developer Preview, Revision 1</a> <em>(May 2015)</em> + </p> + + <div class="toggle-content-toggleme"> + + <dl> + <dt>Initial release.</dt> + </dl> + </div> +</div> + + diff --git a/docs/html/samples/new/index.jd b/docs/html/samples/new/index.jd index 279b910..80765c7 100644 --- a/docs/html/samples/new/index.jd +++ b/docs/html/samples/new/index.jd @@ -1,4 +1,5 @@ page.title=What's New +page.image=images/cards/samples-new_2x.png @jd:body diff --git a/docs/html/sdk/index.jd b/docs/html/sdk/index.jd index 5a03197..d3fcf48 100644 --- a/docs/html/sdk/index.jd +++ b/docs/html/sdk/index.jd @@ -1,6 +1,7 @@ page.title=Download Android Studio and SDK Tools page.tags=sdk, android studio page.template=sdk +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. @@ -63,7 +64,7 @@ sdk.win_installer_checksum=e764ea93aa72766737f9be3b9fb3e42d879ab599 } .feature-blurb { margin:0px; font-size:16px; font-weight:300; - padding:40px 0 0 0; + padding-top:40px; } .landing-button.green { @@ -284,7 +285,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:80px" /> +width="760" height="400" alt="" style="margin-bottom:100px" /> <div style="color: #fff; width:226px; height:0; overflow:visible; position:absolute; top:40px; left:25px"> @@ -293,7 +294,7 @@ width="760" height="400" alt="" style="margin-bottom:80px" /> <p style="font-size: 16px; color:#bbb; position: absolute;left: 297px; top: 5px; display: block; width: 400px;text-align: center;">The official Android IDE</p> -<ul style="font-size:12px"> +<ul style="font-size:12px;line-height:19px;"> <li>Android Studio IDE</li> <li>Android SDK tools</li> <li>Android 5.0 (Lollipop) Platform</li> @@ -322,10 +323,10 @@ target="_blank">Take a Survey</a></li> +<div class="cols"> +<h2 class="feature norule col-13">Intelligent code editor</h2> -<h2 class="feature norule" >Intelligent code editor</h2> - -<div class="col-9" style="margin:0 20px 0 0"> +<div class="col-9"> <img src="{@docRoot}images/tools/studio-hero-code.png" srcset="{@docRoot}images/tools/studio-hero-code_2x.png 2x, {@docRoot}images/tools/studio-hero-code.png 1x" width="520" /> </div><!-- end col-9 (left column) --> @@ -340,9 +341,9 @@ srcset="{@docRoot}images/tools/studio-hero-code_2x.png 2x, {@docRoot}images/tool -<h2 class="feature norule">Code templates and GitHub integration</h2> +<h2 class="feature norule col-13">Code templates and GitHub integration</h2> -<div class="col-9" style="margin:0 20px 0 0"> +<div class="col-9"> <img src="{@docRoot}images/tools/studio-hero-import.png" srcset="{@docRoot}images/tools/studio-hero-import_2x.png 2x, {@docRoot}images/tools/studio-hero-import.png 1x" width="520" /> </div><!-- end col-9 (left column) --> @@ -357,9 +358,9 @@ srcset="{@docRoot}images/tools/studio-hero-import_2x.png 2x, {@docRoot}images/to -<h2 class="feature norule">Multi-screen app development</h2> +<h2 class="feature norule col-13">Multi-screen app development</h2> -<div class="col-9" style="margin:0 20px 0 0"> +<div class="col-9"> <img src="{@docRoot}images/tools/studio-hero-screens.png" srcset="{@docRoot}images/tools/studio-hero-screens_2x.png 2x, {@docRoot}images/tools/studio-hero-screens.png 1x" width="520" /> </div><!-- end col-9 (left column) --> @@ -374,9 +375,9 @@ srcset="{@docRoot}images/tools/studio-hero-screens_2x.png 2x, {@docRoot}images/t -<h2 class="feature norule">Virtual devices for all shapes and sizes</h2> +<h2 class="feature norule col-13">Virtual devices for all shapes and sizes</h2> -<div class="col-9" style="margin:0 20px 0 0"> +<div class="col-9"> <img src="{@docRoot}images/tools/studio-hero-avds.png" srcset="{@docRoot}images/tools/studio-hero-avds_2x.png 2x, {@docRoot}images/tools/studio-hero-avds.png 1x" width="520" /> </div><!-- end col-9 (left column) --> @@ -390,10 +391,10 @@ srcset="{@docRoot}images/tools/studio-hero-avds_2x.png 2x, {@docRoot}images/tool -<h2 class="feature norule"> +<h2 class="feature norule col-13"> Android builds evolved, with Gradle</h2> -<div class="col-9" style="margin:0 20px 0 0"> +<div class="col-9"> <img src="{@docRoot}images/tools/studio-hero-gradle.png" srcset="{@docRoot}images/tools/studio-hero-gradle_2x.png 2x, {@docRoot}images/tools/studio-hero-gradle.png 1x" width="520" /> </div><!-- end col-9 (left column) --> 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/studio/index.jd b/docs/html/tools/studio/index.jd index a5b14a7..7f7fbad 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/index.jd b/docs/html/tools/support-library/index.jd index 1aef0c1..98c9ad5 100644 --- a/docs/html/tools/support-library/index.jd +++ b/docs/html/tools/support-library/index.jd @@ -1322,3 +1322,4 @@ Android 3.2 and higher (all other APIs in the v4 library are already available w <p>Initial release with the v4 library.</p> </div> </div> + diff --git a/docs/html/training/building-wearables.jd b/docs/html/training/building-wearables.jd index 8015d0c..c9e1856 100644 --- a/docs/html/training/building-wearables.jd +++ b/docs/html/training/building-wearables.jd @@ -1,6 +1,6 @@ page.title=Building Apps for Wearables page.trainingcourse=true -page.image=wear/images/notifications.png +page.image=images/cards/android-wear-apps_2x.jpg page.metaDescription=Learn how to build notifications, send and sync data, and use voice actions. @jd:body @@ -11,4 +11,4 @@ synced to wearables as well as how to build apps that run on wearables.</p> <p class="note"><strong>Note:</strong> For more information about the APIs used in these training classes, see the <a href="{@docRoot}reference/packages-wearable-support.html">Wear API reference -documentation</a>.</p>
\ No newline at end of file +documentation</a>.</p> diff --git a/docs/html/training/material/index.jd b/docs/html/training/material/index.jd index 4eb7911..6071fb1 100644 --- a/docs/html/training/material/index.jd +++ b/docs/html/training/material/index.jd @@ -1,6 +1,6 @@ -page.title=Creating Apps with Material Design +page.title=Material Design for Developers page.type=design -page.image=images/material.png +page.image=images/cards/material_2x.png page.metaDescription=Learn how to apply material design to your apps. diff --git a/docs/html/training/tv/start/start.jd b/docs/html/training/tv/start/start.jd index 0f5871f..e55e202 100644 --- a/docs/html/training/tv/start/start.jd +++ b/docs/html/training/tv/start/start.jd @@ -1,4 +1,4 @@ -page.title=Getting Started with TV Apps +page.title=Get Started with TV Apps page.tags="leanback","recyclerview","launcher" trainingnavtop=true diff --git a/docs/html/tv/index.jd b/docs/html/tv/index.jd index e4d7f7a..7a0cdcc 100644 --- a/docs/html/tv/index.jd +++ b/docs/html/tv/index.jd @@ -1,6 +1,6 @@ page.title=About Android TV page.type=about -page.image=tv/images/hero.jpg +page.image=images/cards/android-tv_2x.png page.viewport_width=970 page.tags="tv", "leanback" page.metaDescription=Bring your apps, games, and content to the biggest screen in the house. diff --git a/docs/html/wear/index.jd b/docs/html/wear/index.jd index 316f5ca..74e4939 100644 --- a/docs/html/wear/index.jd +++ b/docs/html/wear/index.jd @@ -3,7 +3,7 @@ page.viewport_width=970 fullpage=true no_footer_links=true page.type=about - +page.image=images/cards/android-wear_2x.png @jd:body <style> @@ -74,7 +74,7 @@ page.type=about </div> <!-- end .landing-section .landing-hero --> - <div class="landing-rest-of-page" style="margin-top:80px"> + <div class="landing-rest-of-page"> <div class="landing-section" id="extending-android-to-wearables"> <div class="wrap"> <div class="landing-section-header"> |
