diff options
Diffstat (limited to 'docs/html/design')
251 files changed, 4903 insertions, 0 deletions
diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd new file mode 100644 index 0000000..18beab0 --- /dev/null +++ b/docs/html/design/building-blocks/buttons.jd @@ -0,0 +1,40 @@ +page.title=Buttons +@jd:body + +<p>A button consists of text and/or an image that clearly communicates what action will occur when the +user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless +buttons</em>. Both can contain text labels and/or images.</p> + +<div style="text-align: center"> + <img src="{@docRoot}design/media/buttons_basic.png"> +</div> + +<h2 id="basic">Basic Buttons</h2> + +<p>Basic buttons are traditional buttons with borders and background. Android supports two styles for +basic buttons: default and small. Default buttons have slightly larger font size and are optimized +for display outside of form content. Small buttons are intended for display alongside other content. +They have a smaller font and smaller minimum height. Use small buttons in forms where they need to +align with other UI elements.</p> + +<img src="{@docRoot}design/media/buttons_default_small.png"> +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <div class="figure-caption"> + Default buttons in Holo Dark & Light. + </div> + </div> + <div class="layout-content-col span-6"> + <div class="figure-caption"> + Small buttons in Holo Dark & Light. + </div> + </div> +</div> + +<h2 id="borderless">Borderless Buttons</h2> + +<p>Borderless buttons resemble basic buttons except that they have no borders or background. You can +use borderless buttons with both icons and text. Borderless buttons are visually more lightweight +than basic buttons and integrate nicely with other content.</p> + +<img src="{@docRoot}design/media/buttons_borderless.png"> diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd new file mode 100644 index 0000000..9b653ee --- /dev/null +++ b/docs/html/design/building-blocks/dialogs.jd @@ -0,0 +1,112 @@ +page.title=Dialogs +@jd:body + +<p>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. As a rule, the dismissive action of a dialog is always on the left + whereas the affirmative actions are on the right.</p> +</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> + + +<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-6"></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> + + </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 new file mode 100644 index 0000000..775ebcc --- /dev/null +++ b/docs/html/design/building-blocks/grid-lists.jd @@ -0,0 +1,79 @@ +page.title=Grid Lists +@jd:body + +<img src="{@docRoot}design/media/gridview_overview.png"> + +<p>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 new file mode 100644 index 0000000..52b4915 --- /dev/null +++ b/docs/html/design/building-blocks/index.jd @@ -0,0 +1,29 @@ +page.title=Building Blocks +header.justLinks=1 +footer.hide=1 +@jd:body + +<style> +#landing-graphic-container { + position: relative; +} + +#text-overlay { + position: absolute; + left: 10px; + top: 472px; + width: 450px; +} +</style> + +<div id="landing-graphic-container"> + <div id="text-overlay"> + Your inventory of ready-to-use elements for creating outstanding apps. + <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 new file mode 100644 index 0000000..aaa86b8 --- /dev/null +++ b/docs/html/design/building-blocks/lists.jd @@ -0,0 +1,31 @@ +page.title=Lists +@jd:body + +<p>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> +<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> + + </div> +</div> diff --git a/docs/html/design/building-blocks/pickers.jd b/docs/html/design/building-blocks/pickers.jd new file mode 100644 index 0000000..85f2187 --- /dev/null +++ b/docs/html/design/building-blocks/pickers.jd @@ -0,0 +1,32 @@ +page.title=Pickers +@jd:body + +<p>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-2"> </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/picker_space.png"> + + </div> + <div class="layout-content-col span-5"> + +<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 new file mode 100644 index 0000000..b188538 --- /dev/null +++ b/docs/html/design/building-blocks/progress.jd @@ -0,0 +1,80 @@ +page.title=Progress and Activity +header.title=Feedback +@jd:body + +<p>When an operation of interest to the user is taking place over a relatively long period of time, +provide visual feedback that it's still happening and in the process of being completed.</p> +<h2 id="progress">Progress</h2> + +<p>If you know the percentage of the operation that has been completed, use a determinate progress bar +to give the user a sense of how much longer it will take.</p> + +<img src="{@docRoot}design/media/progress_download.png"> + +<p>The progress bar should always travel from 0% to 100% completion. Avoid setting the bar to a lower +value than a previous value, or using the same progress bar to represent the progress of multiple +events, since doing so makes the display meaningless. If you're not sure how long a particular +operation will take, use an indeterminate progress indicator.</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</h2> + +<p>If you don't know how much longer an operation will continue, use an indeterminate progress +indicator. There are two styles available: a flat bar and a circle. Use the one that best fits the +available space.</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 (shown with the Holo Dark theme)</h4> + <p> + +An indeterminate activity bar is used at the start of an application download because the Play Store +app hasn't been able to contact the server yet, and it's not possible to determine how long it will +take for the download to begin. + + </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 (shown with the Holo Light theme)</h4> + <p> + +An indeterminate activity circle 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> + </li> + </ol> + + </div> +</div> + +<p>You should only use one activity indicator on screen per activity, and it should appropriately sized +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.</p> diff --git a/docs/html/design/building-blocks/scrolling.jd b/docs/html/design/building-blocks/scrolling.jd new file mode 100644 index 0000000..7695157 --- /dev/null +++ b/docs/html/design/building-blocks/scrolling.jd @@ -0,0 +1,37 @@ +page.title=Scrolling +@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-galaxynexus-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-galaxynexus-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 new file mode 100644 index 0000000..3407ddd --- /dev/null +++ b/docs/html/design/building-blocks/seek-bars.jd @@ -0,0 +1,36 @@ +page.title=Seek Bars and Sliders +@jd:body + +<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 new file mode 100644 index 0000000..621a57c --- /dev/null +++ b/docs/html/design/building-blocks/spinners.jd @@ -0,0 +1,37 @@ +page.title=Spinners +@jd:body + +<p>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 new file mode 100644 index 0000000..607e0b6 --- /dev/null +++ b/docs/html/design/building-blocks/switches.jd @@ -0,0 +1,31 @@ +page.title=Switches +@jd:body + +<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> + +<p>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> + +<div style="text-align: center"> + <img src="{@docRoot}design/media/switches_checkboxes.png"> +</div> + +<h2 id="radio-buttons">Radio Buttons</h2> + +<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> + +<div style="text-align: center"> + <img src="{@docRoot}design/media/switches_radios.png"> +</div> + +<h2 id="switches">On/off Switches</h2> + +<p>On/off switches toggle the state of a single settings option.</p> + +<div style="text-align: center"> + <img src="{@docRoot}design/media/switches_switches.png"> +</div> diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd new file mode 100644 index 0000000..19ed1c3 --- /dev/null +++ b/docs/html/design/building-blocks/tabs.jd @@ -0,0 +1,59 @@ +page.title=Tabs +@jd:body + +<img src="{@docRoot}design/media/tabs_overview.png"> + +<p>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> + + +<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"> </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.</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 YouTube app. +</div> + + + +<h2 id="stacked">Stacked Tabs</h2> + + +<p>If view navigation is essential to your app, you can break out tabs into a separate action bar. This +permits fast view switching even on narrower screens.</p> + +<img src="{@docRoot}design/media/tabs_stacked.png"> diff --git a/docs/html/design/building-blocks/text-fields.jd b/docs/html/design/building-blocks/text-fields.jd new file mode 100644 index 0000000..1b10420 --- /dev/null +++ b/docs/html/design/building-blocks/text-fields.jd @@ -0,0 +1,70 @@ +page.title=Text Fields +@jd:body + +<p>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 new file mode 100644 index 0000000..6dd8d61 --- /dev/null +++ b/docs/html/design/design_toc.cs @@ -0,0 +1,70 @@ +<ul id="nav"> + + <li class="nav-section"> + <div class="nav-section-header"><a href="<?cs var:toroot ?>design/index.html">Get Started</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/get-started/ui-overview.html">UI Overview</a></li> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header"><a href="<?cs var:toroot ?>design/style/index.html">Style</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/writing.html">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-4-0.html">New in Android 4.0</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/multi-pane-layouts.html">Multi-pane Layouts</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/selection.html">Selection</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/settings.html">Settings</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</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> + </ul> + </li> + + <li class="nav-section"> + <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></div> + </li> + + <li> + <div id="back-dac-section"><a href="<?cs var:toroot ?>index.html">Developers</a></div> + </li> + +</ul>
\ No newline at end of file diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd new file mode 100644 index 0000000..67dfd79 --- /dev/null +++ b/docs/html/design/downloads/index.jd @@ -0,0 +1,121 @@ +page.title=Downloads +@jd:body + +<div class="layout-content-row"> + <div class="layout-content-col span-9"> + +<p>Want everything? We've bundled all the downloads available on Android Design into a single ZIP file. +You can also download individual files listed below.</p> +<p>You may use these materials without restriction in your apps and to develop your apps.</p> + + </div> + <div class="layout-content-col span-4"> + +<p> + <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Downloads_20120229.zip">Download All</a> +</p> + + </div> +</div> + +<h2 id="stencils">Stencils and Sources</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<p>Drag and drop your way to beautifully designed Ice Cream Sandwich apps. The stencils feature the +rich typography, colors, interactive controls, and icons found throughout Android 4.0, 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"> + +<p> + <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Fireworks_Stencil_20120229.png">Adobe® Fireworks® PNG Stencil</a> + <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_OmniGraffle_Stencil_20120229.graffle">Omni® OmniGraffle® Stencil</a> + <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120302.zip">Adobe® Photoshop® 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"> + +<p> + <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Action Bar Icon Pack</a> +</p> + + </div> +</div> + +<h2 id="style">Style</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<h4>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><a href="{@docRoot}design/style/typography.html#actionbar">More on Roboto</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"> + +<p> + <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Roboto</a> + <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a> +</p> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<h4>Color</h4> +<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 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"> + +<p> + <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a> +</p> + + </div> +</div> diff --git a/docs/html/design/get-started/creative-vision.jd b/docs/html/design/get-started/creative-vision.jd new file mode 100644 index 0000000..792b97d --- /dev/null +++ b/docs/html/design/get-started/creative-vision.jd @@ -0,0 +1,48 @@ +page.title=Creative Vision +@jd:body + +<img src="{@docRoot}design/media/creative_vision_main.png"> + +<div class="vspace size-1"> </div> + +<p>Ice Cream Sandwich (Android 4.0) marks a major milestone for Android design. We touched nearly every +pixel of the system as we expanded the new design approaches introduced in Honeycomb tablets to all +types of mobile devices. Starting with the most basic elements, we introduced a new font, Roboto, +designed for high-resolution displays. Other big changes include framework-level action bars on +phones and support for new phones without physical buttons.</p> +<p>We focused the design work with three overarching goals for our core apps and the system at large. +As you design apps to work with Android, consider these goals:</p> + +<div class="vspace size-1"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + +<h4>Enchant me</h4> +<p>Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels. +Transitions are fast and clear; layout and typography are crisp and meaningful. App icons are works +of art in their own right. Just like a well-made tool, your app should strive to combine beauty, +simplicity and purpose to create a magical experience that is effortless and powerful.</p> + + </div> + <div class="layout-content-col span-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 +time, they should intuitively grasp the most important features. The design work doesn't stop at the +first use, though. Android apps remove ongoing chores like file management and syncing. Simple tasks +never require complex procedures, and complex tasks are tailored to the human hand and mind. People +of all ages and cultures feel firmly in control, and are never overwhelmed by too many choices or +irrelevant flash.</p> + + </div> + <div class="layout-content-col span-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 +and to use apps in inventive new ways. Android lets people combine applications into new workflows +through multitasking, notifications, and sharing across apps. At the same time, your app should feel +personal, giving people access to superb technology with clarity and grace.</p> + + </div> +</div> diff --git a/docs/html/design/get-started/principles.jd b/docs/html/design/get-started/principles.jd new file mode 100644 index 0000000..0b7147b --- /dev/null +++ b/docs/html/design/get-started/principles.jd @@ -0,0 +1,300 @@ +page.title=Design Principles +@jd:body + +<p>These design principles were developed by and for the Android User Experience Team to keep users' +best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate +with purpose.</p> + +<h2 id="enchant-me">Enchant Me</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-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 +experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful +force is at hand.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/principles_delight.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + + <img src="{@docRoot}design/media/principles_real_objects.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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 +sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder +primary tasks.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/principles_make_it_mine.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + + <img src="{@docRoot}design/media/principles_get_to_know_me.png"> + + </div> +</div> + +<h2 id="simplify-my-life">Simplify My Life</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + + <img src="{@docRoot}design/media/principles_keep_it_brief.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + + <img src="{@docRoot}design/media/principles_pictures.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + + <img src="{@docRoot}design/media/principles_decide_for_me.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + + <img src="{@docRoot}design/media/principles_information_when_need_it.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + + <img src="{@docRoot}design/media/principles_navigation.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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, +personal touches, and creations across phones, tablets, and computers. It makes upgrading the +easiest thing in the world.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/principles_never_lose_stuff.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + + <img src="{@docRoot}design/media/principles_looks_same.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + + <img src="{@docRoot}design/media/principles_important_interruption.png"> + + </div> +</div> + +<h2 id="make-me-amazing">Make Me Amazing</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-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 +leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture +may be a good navigational shortcut.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/principles_tricks.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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 +app. If something goes wrong, give clear recovery instructions but spare them the technical details. +If you can fix it behind the scenes, even better.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/principles_error.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + + <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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 +example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in +only a few steps.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/principles_heavy_lifting.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + + <img src="{@docRoot}design/media/principles_make_important_fast.png"> + + </div> +</div> diff --git a/docs/html/design/get-started/ui-overview.jd b/docs/html/design/get-started/ui-overview.jd new file mode 100644 index 0000000..34cdd06 --- /dev/null +++ b/docs/html/design/get-started/ui-overview.jd @@ -0,0 +1,149 @@ +page.title=UI Overview +@jd:body + +<p>Android's system UI provides the framework on top of which you build your app. Important aspects +include the Home screen experience, global device navigation, and notifications.</p> +<p>Your app will play an important part in keeping the overall Android experience consistent and +enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal +in your app.</p> +<p>Read on for a quick overview of the most important aspects of the Android user interface.</p> + +<h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2> + +<div class="vspace size-1"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/ui_overview_home_screen.png"> + +<h4>Home screen</h4> +<p>Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between +different home screen panels by swiping left and right.</p> +<p>The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view +regardless of which panel is currently showing.</p> +<p>Access the entire collection of apps and widgets by touching the All Apps button at the center of +the Favorites Tray.</p> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/ui_overview_all_apps.png"> + +<h4>All apps screen</h4> +<p>The All Apps screen lets you browse the entire set of apps and widgets that are installed on your +device.</p> +<p>Users can drag an app or widget icon from the All Apps screen and place it in any empty location on +any Home screen.</p> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/ui_overview_recents.png"> + +<h4>Recents screen</h4> +<p>Recents provides an efficient way of switching between recently used applications. It provides a +clear navigation path between multiple ongoing tasks.</p> +<p>The Recents button at the right side of the navigation bar displays the apps that the user has +interacted with most recently. They are organized in reverse chronological order with the most +recently used app at the bottom.</p> +<p>Switch to an app by touching it. Remove an item by swiping left or right.</p> + + </div> +</div> + +<h2 id="system-bars">System Bars</h2> + +<p>The system bars are screen areas dedicated to the display of notifications, communication of device +status, and device navigation. Typically the system bars are displayed concurrently with your app. +Apps that display immersive content, such as movies or images, can temporarily hide the system bars +to allow the user to enjoy full screen content without distraction.</p> + +<img src="{@docRoot}design/media/ui_overview_system_ui.png"> + +<div class="with-callouts"> + +<ol> +<li> +<h4>Status Bar</h4> +<p>Displays pending notifications on the left and status, such as time, battery level, or signal + strength, on the right. Swipe down from the status bar to show notification details.</p> +</li> +<li> +<h4>Navigation Bar</h4> +<p>New for phones in Android 4.0, the navigation bar is present only on devices that don't have + the traditional hardware keys. It houses the device navigation controls Back, Home, and + Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p> +</li> +<li> +<h4>Combined Bar</h4> +<p>On tablet form factors the status and navigation bars are combined into a single bar at the + bottom of the screen.</p> +</li> +</ol> + +</div> + +<h2 id="notifications">Notifications</h2> + +<p>Notifications are brief messages that users can access at any time from the status bar. They +provide updates, reminders, or information that's important, but not critical enough to warrant +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"> + + <img src="{@docRoot}design/media/ui_overview_notifications.png"> + + </div> + <div class="layout-content-col span-9"> + + <img src="{@docRoot}design/media/notifications_dismiss.png"> + +<p>Most notifications have a one-line title and a one-line message. The recommended layout for a +notification includes two lines. If necessary, you can add a third line. Timestamps are optional.</p> +<p>Swiping a notification right or left removes it from the notification drawer.</p> + + </div> +</div> + + +<h2 id="app">Common App UI</h2> + + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/ui_overview_app_ui.png"> + + </div> + <div class="layout-content-col span-6 with-callouts"> + +<p>A typical Android app consists of action bars and the app content area.</p> +<ol> +<li> +<h4>Main Action Bar</h4> +<p>The command and control center for your app. The main action bar includes elements for + navigating your app's hierarchy and views, and also surfaces the most important actions.</p> +<p><a href="{@docRoot}design/patterns/actionbar.html">More on the Action Bar</a></p> +</li> +<li> +<h4>View Control</h4> +<p>Allows users to switch between the different views that your app provides. Views typically + consist of different arrangements of your data or different functional aspects of your app.</p> +</li> +<li> +<h4>Content Area</h4> +<p>The space where the content of your app is displayed.</p> +</li> +<li> +<h4>Split Action Bar</h4> +<p>Split action bars provide a way to distribute actions across additional bars located below + the main action bar or at the bottom of the screen. In this example, a split action bar moves + important actions that won't fit in the main bar to the bottom.</p> +</li> +</ol> + + </div> +</div> diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd new file mode 100644 index 0000000..d404aa6 --- /dev/null +++ b/docs/html/design/index.jd @@ -0,0 +1,29 @@ +page.title= +header.hide=1 +footer.hide=1 +@jd:body + +<style> +#landing-graphic-container { + position: relative; +} + +#text-overlay { + position: absolute; + left: 10px; + top: 472px; + width: 280px; +} +</style> + +<div id="landing-graphic-container"> + <div id="text-overlay"> + Welcome to <strong>Android Design</strong>, your place for learning how to design exceptional Android apps. + <br><br> + <a href="{@docRoot}design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a> + </div> + + <a href="{@docRoot}design/get-started/creative-vision.html"> + <img src="{@docRoot}design/media/index_landing_page.png"> + </a> +</div> diff --git a/docs/html/design/media/action_bar_basics.png b/docs/html/design/media/action_bar_basics.png Binary files differnew file mode 100644 index 0000000..0bf3d56 --- /dev/null +++ b/docs/html/design/media/action_bar_basics.png diff --git a/docs/html/design/media/action_bar_cab.png b/docs/html/design/media/action_bar_cab.png Binary files differnew file mode 100644 index 0000000..aa629b9 --- /dev/null +++ b/docs/html/design/media/action_bar_cab.png diff --git a/docs/html/design/media/action_bar_pattern_action_icons.png b/docs/html/design/media/action_bar_pattern_action_icons.png Binary files differnew file mode 100644 index 0000000..66f7f87 --- /dev/null +++ b/docs/html/design/media/action_bar_pattern_action_icons.png diff --git a/docs/html/design/media/action_bar_pattern_considerations.png b/docs/html/design/media/action_bar_pattern_considerations.png Binary files differnew file mode 100644 index 0000000..977e7f2 --- /dev/null +++ b/docs/html/design/media/action_bar_pattern_considerations.png diff --git a/docs/html/design/media/action_bar_pattern_default_tabs.png b/docs/html/design/media/action_bar_pattern_default_tabs.png Binary files differnew file mode 100644 index 0000000..69df289 --- /dev/null +++ b/docs/html/design/media/action_bar_pattern_default_tabs.png diff --git a/docs/html/design/media/action_bar_pattern_overflow.png b/docs/html/design/media/action_bar_pattern_overflow.png Binary files differnew file mode 100644 index 0000000..9c69cfe --- /dev/null +++ b/docs/html/design/media/action_bar_pattern_overflow.png diff --git a/docs/html/design/media/action_bar_pattern_overview.png b/docs/html/design/media/action_bar_pattern_overview.png Binary files differnew file mode 100644 index 0000000..83a986b --- /dev/null +++ b/docs/html/design/media/action_bar_pattern_overview.png diff --git a/docs/html/design/media/action_bar_pattern_rotation.png b/docs/html/design/media/action_bar_pattern_rotation.png Binary files differnew file mode 100644 index 0000000..5b9a656 --- /dev/null +++ b/docs/html/design/media/action_bar_pattern_rotation.png diff --git a/docs/html/design/media/action_bar_pattern_share_pack.png b/docs/html/design/media/action_bar_pattern_share_pack.png Binary files differnew file mode 100644 index 0000000..7ae8a0a --- /dev/null +++ b/docs/html/design/media/action_bar_pattern_share_pack.png diff --git a/docs/html/design/media/action_bar_pattern_spinner.png b/docs/html/design/media/action_bar_pattern_spinner.png Binary files differnew file mode 100644 index 0000000..9c054b5 --- /dev/null +++ b/docs/html/design/media/action_bar_pattern_spinner.png diff --git a/docs/html/design/media/action_bar_pattern_table.png b/docs/html/design/media/action_bar_pattern_table.png Binary files differnew file mode 100644 index 0000000..dac7e21 --- /dev/null +++ b/docs/html/design/media/action_bar_pattern_table.png diff --git a/docs/html/design/media/action_bar_pattern_up_app_icon.png b/docs/html/design/media/action_bar_pattern_up_app_icon.png Binary files differnew file mode 100644 index 0000000..11b8aa9 --- /dev/null +++ b/docs/html/design/media/action_bar_pattern_up_app_icon.png diff --git a/docs/html/design/media/app_structure_book_detail_page_flip.png b/docs/html/design/media/app_structure_book_detail_page_flip.png Binary files differnew file mode 100644 index 0000000..13c9c52 --- /dev/null +++ b/docs/html/design/media/app_structure_book_detail_page_flip.png diff --git a/docs/html/design/media/app_structure_fixedtabs.png b/docs/html/design/media/app_structure_fixedtabs.png Binary files differnew file mode 100644 index 0000000..e41f97e --- /dev/null +++ b/docs/html/design/media/app_structure_fixedtabs.png diff --git a/docs/html/design/media/app_structure_gallery_filmstrip.png b/docs/html/design/media/app_structure_gallery_filmstrip.png Binary files differnew file mode 100644 index 0000000..deed672 --- /dev/null +++ b/docs/html/design/media/app_structure_gallery_filmstrip.png diff --git a/docs/html/design/media/app_structure_gmail.png b/docs/html/design/media/app_structure_gmail.png Binary files differnew file mode 100644 index 0000000..862ac75 --- /dev/null +++ b/docs/html/design/media/app_structure_gmail.png diff --git a/docs/html/design/media/app_structure_gmail_swipe.png b/docs/html/design/media/app_structure_gmail_swipe.png Binary files differnew file mode 100644 index 0000000..21da4ac --- /dev/null +++ b/docs/html/design/media/app_structure_gmail_swipe.png diff --git a/docs/html/design/media/app_structure_market.png b/docs/html/design/media/app_structure_market.png Binary files differnew file mode 100644 index 0000000..5aa595e --- /dev/null +++ b/docs/html/design/media/app_structure_market.png diff --git a/docs/html/design/media/app_structure_music_lndscp.png b/docs/html/design/media/app_structure_music_lndscp.png Binary files differnew file mode 100644 index 0000000..67354de --- /dev/null +++ b/docs/html/design/media/app_structure_music_lndscp.png diff --git a/docs/html/design/media/app_structure_overview.png b/docs/html/design/media/app_structure_overview.png Binary files differnew file mode 100644 index 0000000..5ba25b4 --- /dev/null +++ b/docs/html/design/media/app_structure_overview.png diff --git a/docs/html/design/media/app_structure_people_detail.png b/docs/html/design/media/app_structure_people_detail.png Binary files differnew file mode 100644 index 0000000..b870796 --- /dev/null +++ b/docs/html/design/media/app_structure_people_detail.png diff --git a/docs/html/design/media/app_structure_scrolltabs.png b/docs/html/design/media/app_structure_scrolltabs.png Binary files differnew file mode 100644 index 0000000..ea742c2 --- /dev/null +++ b/docs/html/design/media/app_structure_scrolltabs.png diff --git a/docs/html/design/media/app_structure_shortcut_on_item.png b/docs/html/design/media/app_structure_shortcut_on_item.png Binary files differnew file mode 100644 index 0000000..1341f1f --- /dev/null +++ b/docs/html/design/media/app_structure_shortcut_on_item.png diff --git a/docs/html/design/media/building_blocks_landing.png b/docs/html/design/media/building_blocks_landing.png Binary files differnew file mode 100644 index 0000000..2da47b7 --- /dev/null +++ b/docs/html/design/media/building_blocks_landing.png diff --git a/docs/html/design/media/buttons_basic.png b/docs/html/design/media/buttons_basic.png Binary files differnew file mode 100644 index 0000000..7fa3d09 --- /dev/null +++ b/docs/html/design/media/buttons_basic.png diff --git a/docs/html/design/media/buttons_borderless.png b/docs/html/design/media/buttons_borderless.png Binary files differnew file mode 100644 index 0000000..1a9d906 --- /dev/null +++ b/docs/html/design/media/buttons_borderless.png diff --git a/docs/html/design/media/buttons_default_small.png b/docs/html/design/media/buttons_default_small.png Binary files differnew file mode 100644 index 0000000..3e776ed --- /dev/null +++ b/docs/html/design/media/buttons_default_small.png diff --git a/docs/html/design/media/color_spectrum.png b/docs/html/design/media/color_spectrum.png Binary files differnew file mode 100644 index 0000000..3fd7a57 --- /dev/null +++ b/docs/html/design/media/color_spectrum.png diff --git a/docs/html/design/media/compatibility_legacy_apps.png b/docs/html/design/media/compatibility_legacy_apps.png Binary files differnew file mode 100644 index 0000000..a0400e1 --- /dev/null +++ b/docs/html/design/media/compatibility_legacy_apps.png diff --git a/docs/html/design/media/compatibility_physical_buttons.png b/docs/html/design/media/compatibility_physical_buttons.png Binary files differnew file mode 100644 index 0000000..30d5ddd --- /dev/null +++ b/docs/html/design/media/compatibility_physical_buttons.png diff --git a/docs/html/design/media/compatibility_virtual_nav.png b/docs/html/design/media/compatibility_virtual_nav.png Binary files differnew file mode 100644 index 0000000..ea595a4 --- /dev/null +++ b/docs/html/design/media/compatibility_virtual_nav.png diff --git a/docs/html/design/media/creative_vision_main.png b/docs/html/design/media/creative_vision_main.png Binary files differnew file mode 100644 index 0000000..c9d31cb --- /dev/null +++ b/docs/html/design/media/creative_vision_main.png diff --git a/docs/html/design/media/design_elements_landing.png b/docs/html/design/media/design_elements_landing.png Binary files differnew file mode 100644 index 0000000..d078cef --- /dev/null +++ b/docs/html/design/media/design_elements_landing.png diff --git a/docs/html/design/media/devices_displays_density.png b/docs/html/design/media/devices_displays_density.png Binary files differnew file mode 100644 index 0000000..a21b482 --- /dev/null +++ b/docs/html/design/media/devices_displays_density.png diff --git a/docs/html/design/media/devices_displays_main.png b/docs/html/design/media/devices_displays_main.png Binary files differnew file mode 100644 index 0000000..fd1c645 --- /dev/null +++ b/docs/html/design/media/devices_displays_main.png diff --git a/docs/html/design/media/dialogs_examples.png b/docs/html/design/media/dialogs_examples.png Binary files differnew file mode 100644 index 0000000..981c5f3 --- /dev/null +++ b/docs/html/design/media/dialogs_examples.png diff --git a/docs/html/design/media/dialogs_main.png b/docs/html/design/media/dialogs_main.png Binary files differnew file mode 100644 index 0000000..b95266a --- /dev/null +++ b/docs/html/design/media/dialogs_main.png diff --git a/docs/html/design/media/dialogs_popups_example.png b/docs/html/design/media/dialogs_popups_example.png Binary files differnew file mode 100644 index 0000000..c2a66f6 --- /dev/null +++ b/docs/html/design/media/dialogs_popups_example.png diff --git a/docs/html/design/media/dialogs_toasts.png b/docs/html/design/media/dialogs_toasts.png Binary files differnew file mode 100644 index 0000000..cc0b815 --- /dev/null +++ b/docs/html/design/media/dialogs_toasts.png diff --git a/docs/html/design/media/dialogs_w_no_title.png b/docs/html/design/media/dialogs_w_no_title.png Binary files differnew file mode 100644 index 0000000..47e2dbf --- /dev/null +++ b/docs/html/design/media/dialogs_w_no_title.png diff --git a/docs/html/design/media/dialogs_w_title.png b/docs/html/design/media/dialogs_w_title.png Binary files differnew file mode 100644 index 0000000..4f2b81f --- /dev/null +++ b/docs/html/design/media/dialogs_w_title.png diff --git a/docs/html/design/media/downloads_color_swatches.png b/docs/html/design/media/downloads_color_swatches.png Binary files differnew file mode 100644 index 0000000..af2b24f --- /dev/null +++ b/docs/html/design/media/downloads_color_swatches.png diff --git a/docs/html/design/media/downloads_roboto_specimen_preview.png b/docs/html/design/media/downloads_roboto_specimen_preview.png Binary files differnew file mode 100644 index 0000000..2954cbf --- /dev/null +++ b/docs/html/design/media/downloads_roboto_specimen_preview.png diff --git a/docs/html/design/media/downloads_stencils.png b/docs/html/design/media/downloads_stencils.png Binary files differnew file mode 100644 index 0000000..9e09319 --- /dev/null +++ b/docs/html/design/media/downloads_stencils.png diff --git a/docs/html/design/media/gesture_doubletouch.png b/docs/html/design/media/gesture_doubletouch.png Binary files differnew file mode 100644 index 0000000..693a593 --- /dev/null +++ b/docs/html/design/media/gesture_doubletouch.png diff --git a/docs/html/design/media/gesture_drag.png b/docs/html/design/media/gesture_drag.png Binary files differnew file mode 100644 index 0000000..6262644 --- /dev/null +++ b/docs/html/design/media/gesture_drag.png diff --git a/docs/html/design/media/gesture_longtouch.png b/docs/html/design/media/gesture_longtouch.png Binary files differnew file mode 100644 index 0000000..3eb3cbc --- /dev/null +++ b/docs/html/design/media/gesture_longtouch.png diff --git a/docs/html/design/media/gesture_pinchclose.png b/docs/html/design/media/gesture_pinchclose.png Binary files differnew file mode 100644 index 0000000..471251f --- /dev/null +++ b/docs/html/design/media/gesture_pinchclose.png diff --git a/docs/html/design/media/gesture_pinchopen.png b/docs/html/design/media/gesture_pinchopen.png Binary files differnew file mode 100644 index 0000000..b7c3ee3 --- /dev/null +++ b/docs/html/design/media/gesture_pinchopen.png diff --git a/docs/html/design/media/gesture_swipe.png b/docs/html/design/media/gesture_swipe.png Binary files differnew file mode 100644 index 0000000..f8e8a26 --- /dev/null +++ b/docs/html/design/media/gesture_swipe.png diff --git a/docs/html/design/media/gesture_touch.png b/docs/html/design/media/gesture_touch.png Binary files differnew file mode 100644 index 0000000..5c49b17 --- /dev/null +++ b/docs/html/design/media/gesture_touch.png diff --git a/docs/html/design/media/gridview_example.png b/docs/html/design/media/gridview_example.png Binary files differnew file mode 100644 index 0000000..850790f --- /dev/null +++ b/docs/html/design/media/gridview_example.png diff --git a/docs/html/design/media/gridview_horizontal.png b/docs/html/design/media/gridview_horizontal.png Binary files differnew file mode 100644 index 0000000..1d329a1 --- /dev/null +++ b/docs/html/design/media/gridview_horizontal.png diff --git a/docs/html/design/media/gridview_overview.png b/docs/html/design/media/gridview_overview.png Binary files differnew file mode 100644 index 0000000..a831625 --- /dev/null +++ b/docs/html/design/media/gridview_overview.png diff --git a/docs/html/design/media/gridview_style.png b/docs/html/design/media/gridview_style.png Binary files differnew file mode 100644 index 0000000..77384f9 --- /dev/null +++ b/docs/html/design/media/gridview_style.png diff --git a/docs/html/design/media/gridview_vertical.png b/docs/html/design/media/gridview_vertical.png Binary files differnew file mode 100644 index 0000000..f7d85a0 --- /dev/null +++ b/docs/html/design/media/gridview_vertical.png diff --git a/docs/html/design/media/iconography_actionbar_colors.png b/docs/html/design/media/iconography_actionbar_colors.png Binary files differnew file mode 100644 index 0000000..2ad550a --- /dev/null +++ b/docs/html/design/media/iconography_actionbar_colors.png diff --git a/docs/html/design/media/iconography_actionbar_focal.png b/docs/html/design/media/iconography_actionbar_focal.png Binary files differnew file mode 100644 index 0000000..49b6537 --- /dev/null +++ b/docs/html/design/media/iconography_actionbar_focal.png diff --git a/docs/html/design/media/iconography_actionbar_size.png b/docs/html/design/media/iconography_actionbar_size.png Binary files differnew file mode 100644 index 0000000..307a4fe --- /dev/null +++ b/docs/html/design/media/iconography_actionbar_size.png diff --git a/docs/html/design/media/iconography_actionbar_style.png b/docs/html/design/media/iconography_actionbar_style.png Binary files differnew file mode 100644 index 0000000..a48b448 --- /dev/null +++ b/docs/html/design/media/iconography_actionbar_style.png diff --git a/docs/html/design/media/iconography_launcher_example.png b/docs/html/design/media/iconography_launcher_example.png Binary files differnew file mode 100644 index 0000000..0cce7ef --- /dev/null +++ b/docs/html/design/media/iconography_launcher_example.png diff --git a/docs/html/design/media/iconography_launcher_example2.png b/docs/html/design/media/iconography_launcher_example2.png Binary files differnew file mode 100644 index 0000000..5a709e2 --- /dev/null +++ b/docs/html/design/media/iconography_launcher_example2.png diff --git a/docs/html/design/media/iconography_launcher_focal.png b/docs/html/design/media/iconography_launcher_focal.png Binary files differnew file mode 100644 index 0000000..014a340 --- /dev/null +++ b/docs/html/design/media/iconography_launcher_focal.png diff --git a/docs/html/design/media/iconography_launcher_size.png b/docs/html/design/media/iconography_launcher_size.png Binary files differnew file mode 100644 index 0000000..48267de --- /dev/null +++ b/docs/html/design/media/iconography_launcher_size.png diff --git a/docs/html/design/media/iconography_launcher_style.png b/docs/html/design/media/iconography_launcher_style.png Binary files differnew file mode 100644 index 0000000..b20c91b --- /dev/null +++ b/docs/html/design/media/iconography_launcher_style.png diff --git a/docs/html/design/media/iconography_notification_example.png b/docs/html/design/media/iconography_notification_example.png Binary files differnew file mode 100644 index 0000000..a8498ce --- /dev/null +++ b/docs/html/design/media/iconography_notification_example.png diff --git a/docs/html/design/media/iconography_notification_focal.png b/docs/html/design/media/iconography_notification_focal.png Binary files differnew file mode 100644 index 0000000..20d5e8f --- /dev/null +++ b/docs/html/design/media/iconography_notification_focal.png diff --git a/docs/html/design/media/iconography_notification_size.png b/docs/html/design/media/iconography_notification_size.png Binary files differnew file mode 100644 index 0000000..b264e98 --- /dev/null +++ b/docs/html/design/media/iconography_notification_size.png diff --git a/docs/html/design/media/iconography_notification_style.png b/docs/html/design/media/iconography_notification_style.png Binary files differnew file mode 100644 index 0000000..a52db1f --- /dev/null +++ b/docs/html/design/media/iconography_notification_style.png diff --git a/docs/html/design/media/iconography_overview.png b/docs/html/design/media/iconography_overview.png Binary files differnew file mode 100644 index 0000000..56cd409 --- /dev/null +++ b/docs/html/design/media/iconography_overview.png diff --git a/docs/html/design/media/iconography_small_colors.png b/docs/html/design/media/iconography_small_colors.png Binary files differnew file mode 100644 index 0000000..0ac1bfd --- /dev/null +++ b/docs/html/design/media/iconography_small_colors.png diff --git a/docs/html/design/media/iconography_small_example.png b/docs/html/design/media/iconography_small_example.png Binary files differnew file mode 100644 index 0000000..1e1400e --- /dev/null +++ b/docs/html/design/media/iconography_small_example.png diff --git a/docs/html/design/media/iconography_small_focal.png b/docs/html/design/media/iconography_small_focal.png Binary files differnew file mode 100644 index 0000000..dff3c16 --- /dev/null +++ b/docs/html/design/media/iconography_small_focal.png diff --git a/docs/html/design/media/iconography_small_size.png b/docs/html/design/media/iconography_small_size.png Binary files differnew file mode 100644 index 0000000..748cf79 --- /dev/null +++ b/docs/html/design/media/iconography_small_size.png diff --git a/docs/html/design/media/iconography_small_style.png b/docs/html/design/media/iconography_small_style.png Binary files differnew file mode 100644 index 0000000..0149ac6 --- /dev/null +++ b/docs/html/design/media/iconography_small_style.png diff --git a/docs/html/design/media/index_landing_page.png b/docs/html/design/media/index_landing_page.png Binary files differnew file mode 100644 index 0000000..3f319b0 --- /dev/null +++ b/docs/html/design/media/index_landing_page.png diff --git a/docs/html/design/media/lists_main.png b/docs/html/design/media/lists_main.png Binary files differnew file mode 100644 index 0000000..d89ac79 --- /dev/null +++ b/docs/html/design/media/lists_main.png diff --git a/docs/html/design/media/metrics_48.png b/docs/html/design/media/metrics_48.png Binary files differnew file mode 100644 index 0000000..5e6c57e --- /dev/null +++ b/docs/html/design/media/metrics_48.png diff --git a/docs/html/design/media/metrics_closeup.png b/docs/html/design/media/metrics_closeup.png Binary files differnew file mode 100644 index 0000000..032115a --- /dev/null +++ b/docs/html/design/media/metrics_closeup.png diff --git a/docs/html/design/media/metrics_diagram.png b/docs/html/design/media/metrics_diagram.png Binary files differnew file mode 100644 index 0000000..b5e6cd2 --- /dev/null +++ b/docs/html/design/media/metrics_diagram.png diff --git a/docs/html/design/media/metrics_forms.png b/docs/html/design/media/metrics_forms.png Binary files differnew file mode 100644 index 0000000..449bd57 --- /dev/null +++ b/docs/html/design/media/metrics_forms.png diff --git a/docs/html/design/media/migrating_icons.png b/docs/html/design/media/migrating_icons.png Binary files differnew file mode 100644 index 0000000..1a25867 --- /dev/null +++ b/docs/html/design/media/migrating_icons.png diff --git a/docs/html/design/media/migrating_intents.png b/docs/html/design/media/migrating_intents.png Binary files differnew file mode 100644 index 0000000..65fc1a5 --- /dev/null +++ b/docs/html/design/media/migrating_intents.png diff --git a/docs/html/design/media/migrating_ios_dialers.png b/docs/html/design/media/migrating_ios_dialers.png Binary files differnew file mode 100644 index 0000000..27751d8 --- /dev/null +++ b/docs/html/design/media/migrating_ios_dialers.png diff --git a/docs/html/design/media/migrating_ios_galleries.png b/docs/html/design/media/migrating_ios_galleries.png Binary files differnew file mode 100644 index 0000000..04472fe --- /dev/null +++ b/docs/html/design/media/migrating_ios_galleries.png diff --git a/docs/html/design/media/migrating_ios_settings.png b/docs/html/design/media/migrating_ios_settings.png Binary files differnew file mode 100644 index 0000000..b17cb72 --- /dev/null +++ b/docs/html/design/media/migrating_ios_settings.png diff --git a/docs/html/design/media/migrating_ui_elements.png b/docs/html/design/media/migrating_ui_elements.png Binary files differnew file mode 100644 index 0000000..51c2a80 --- /dev/null +++ b/docs/html/design/media/migrating_ui_elements.png diff --git a/docs/html/design/media/multipane_expand.png b/docs/html/design/media/multipane_expand.png Binary files differnew file mode 100644 index 0000000..bb4f371 --- /dev/null +++ b/docs/html/design/media/multipane_expand.png diff --git a/docs/html/design/media/multipane_show.png b/docs/html/design/media/multipane_show.png Binary files differnew file mode 100644 index 0000000..0231adb --- /dev/null +++ b/docs/html/design/media/multipane_show.png diff --git a/docs/html/design/media/multipane_stack.png b/docs/html/design/media/multipane_stack.png Binary files differnew file mode 100644 index 0000000..7769f0c --- /dev/null +++ b/docs/html/design/media/multipane_stack.png diff --git a/docs/html/design/media/multipane_stretch.png b/docs/html/design/media/multipane_stretch.png Binary files differnew file mode 100644 index 0000000..5075af6 --- /dev/null +++ b/docs/html/design/media/multipane_stretch.png diff --git a/docs/html/design/media/multipane_view_tablet.png b/docs/html/design/media/multipane_view_tablet.png Binary files differnew file mode 100644 index 0000000..56a6718 --- /dev/null +++ b/docs/html/design/media/multipane_view_tablet.png diff --git a/docs/html/design/media/multipane_views.png b/docs/html/design/media/multipane_views.png Binary files differnew file mode 100644 index 0000000..9fdfcfd --- /dev/null +++ b/docs/html/design/media/multipane_views.png diff --git a/docs/html/design/media/navigation_between_apps_back.png b/docs/html/design/media/navigation_between_apps_back.png Binary files differnew file mode 100755 index 0000000..ded5d0a --- /dev/null +++ b/docs/html/design/media/navigation_between_apps_back.png diff --git a/docs/html/design/media/navigation_between_apps_inward.png b/docs/html/design/media/navigation_between_apps_inward.png Binary files differnew file mode 100755 index 0000000..1f5e401 --- /dev/null +++ b/docs/html/design/media/navigation_between_apps_inward.png diff --git a/docs/html/design/media/navigation_between_apps_up.png b/docs/html/design/media/navigation_between_apps_up.png Binary files differnew file mode 100755 index 0000000..f192c88 --- /dev/null +++ b/docs/html/design/media/navigation_between_apps_up.png diff --git a/docs/html/design/media/navigation_between_siblings_gmail.png b/docs/html/design/media/navigation_between_siblings_gmail.png Binary files differnew file mode 100644 index 0000000..fe01ed3 --- /dev/null +++ b/docs/html/design/media/navigation_between_siblings_gmail.png diff --git a/docs/html/design/media/navigation_between_siblings_market1.png b/docs/html/design/media/navigation_between_siblings_market1.png Binary files differnew file mode 100755 index 0000000..8f2b3dc --- /dev/null +++ b/docs/html/design/media/navigation_between_siblings_market1.png diff --git a/docs/html/design/media/navigation_between_siblings_market2.png b/docs/html/design/media/navigation_between_siblings_market2.png Binary files differnew file mode 100755 index 0000000..33b654c --- /dev/null +++ b/docs/html/design/media/navigation_between_siblings_market2.png diff --git a/docs/html/design/media/navigation_from_outside_back.png b/docs/html/design/media/navigation_from_outside_back.png Binary files differnew file mode 100644 index 0000000..971ee57 --- /dev/null +++ b/docs/html/design/media/navigation_from_outside_back.png diff --git a/docs/html/design/media/navigation_indirect_notification.png b/docs/html/design/media/navigation_indirect_notification.png Binary files differnew file mode 100644 index 0000000..6f99267 --- /dev/null +++ b/docs/html/design/media/navigation_indirect_notification.png diff --git a/docs/html/design/media/navigation_popup_notification.png b/docs/html/design/media/navigation_popup_notification.png Binary files differnew file mode 100644 index 0000000..a0a3ee7 --- /dev/null +++ b/docs/html/design/media/navigation_popup_notification.png diff --git a/docs/html/design/media/navigation_up_vs_back_gmail.png b/docs/html/design/media/navigation_up_vs_back_gmail.png Binary files differnew file mode 100644 index 0000000..ff7adfe --- /dev/null +++ b/docs/html/design/media/navigation_up_vs_back_gmail.png diff --git a/docs/html/design/media/navigation_with_back_and_up.png b/docs/html/design/media/navigation_with_back_and_up.png Binary files differnew file mode 100644 index 0000000..5440220 --- /dev/null +++ b/docs/html/design/media/navigation_with_back_and_up.png diff --git a/docs/html/design/media/notifications_dismiss.png b/docs/html/design/media/notifications_dismiss.png Binary files differnew file mode 100644 index 0000000..71bed4f --- /dev/null +++ b/docs/html/design/media/notifications_dismiss.png diff --git a/docs/html/design/media/notifications_pattern_additional_fail.png b/docs/html/design/media/notifications_pattern_additional_fail.png Binary files differnew file mode 100644 index 0000000..3945ffb --- /dev/null +++ b/docs/html/design/media/notifications_pattern_additional_fail.png diff --git a/docs/html/design/media/notifications_pattern_additional_win.png b/docs/html/design/media/notifications_pattern_additional_win.png Binary files differnew file mode 100644 index 0000000..74472c3 --- /dev/null +++ b/docs/html/design/media/notifications_pattern_additional_win.png diff --git a/docs/html/design/media/notifications_pattern_anatomy.png b/docs/html/design/media/notifications_pattern_anatomy.png Binary files differnew file mode 100644 index 0000000..cacc183 --- /dev/null +++ b/docs/html/design/media/notifications_pattern_anatomy.png diff --git a/docs/html/design/media/notifications_pattern_dialog_toast.png b/docs/html/design/media/notifications_pattern_dialog_toast.png Binary files differnew file mode 100644 index 0000000..517d57b --- /dev/null +++ b/docs/html/design/media/notifications_pattern_dialog_toast.png diff --git a/docs/html/design/media/notifications_pattern_ongoing_music.png b/docs/html/design/media/notifications_pattern_ongoing_music.png Binary files differnew file mode 100644 index 0000000..01039bd --- /dev/null +++ b/docs/html/design/media/notifications_pattern_ongoing_music.png diff --git a/docs/html/design/media/notifications_pattern_phone_icons.png b/docs/html/design/media/notifications_pattern_phone_icons.png Binary files differnew file mode 100644 index 0000000..09d8a83 --- /dev/null +++ b/docs/html/design/media/notifications_pattern_phone_icons.png diff --git a/docs/html/design/media/notifications_pattern_phone_ticker.png b/docs/html/design/media/notifications_pattern_phone_ticker.png Binary files differnew file mode 100644 index 0000000..601e310 --- /dev/null +++ b/docs/html/design/media/notifications_pattern_phone_ticker.png diff --git a/docs/html/design/media/notifications_pattern_real_time_people.png b/docs/html/design/media/notifications_pattern_real_time_people.png Binary files differnew file mode 100644 index 0000000..32e62eb --- /dev/null +++ b/docs/html/design/media/notifications_pattern_real_time_people.png diff --git a/docs/html/design/media/notifications_pattern_social_fail.png b/docs/html/design/media/notifications_pattern_social_fail.png Binary files differnew file mode 100644 index 0000000..2c8fddc --- /dev/null +++ b/docs/html/design/media/notifications_pattern_social_fail.png diff --git a/docs/html/design/media/notifications_pattern_tablet.png b/docs/html/design/media/notifications_pattern_tablet.png Binary files differnew file mode 100644 index 0000000..15637d5 --- /dev/null +++ b/docs/html/design/media/notifications_pattern_tablet.png diff --git a/docs/html/design/media/patterns_landing.png b/docs/html/design/media/patterns_landing.png Binary files differnew file mode 100644 index 0000000..d9869a5 --- /dev/null +++ b/docs/html/design/media/patterns_landing.png diff --git a/docs/html/design/media/picker_datetime.png b/docs/html/design/media/picker_datetime.png Binary files differnew file mode 100644 index 0000000..9876ab2 --- /dev/null +++ b/docs/html/design/media/picker_datetime.png diff --git a/docs/html/design/media/picker_space.png b/docs/html/design/media/picker_space.png Binary files differnew file mode 100644 index 0000000..024776f --- /dev/null +++ b/docs/html/design/media/picker_space.png diff --git a/docs/html/design/media/principles_decide_for_me.png b/docs/html/design/media/principles_decide_for_me.png Binary files differnew file mode 100644 index 0000000..2d8b883 --- /dev/null +++ b/docs/html/design/media/principles_decide_for_me.png diff --git a/docs/html/design/media/principles_delight.png b/docs/html/design/media/principles_delight.png Binary files differnew file mode 100644 index 0000000..5d6e909 --- /dev/null +++ b/docs/html/design/media/principles_delight.png diff --git a/docs/html/design/media/principles_error.png b/docs/html/design/media/principles_error.png Binary files differnew file mode 100644 index 0000000..9376766 --- /dev/null +++ b/docs/html/design/media/principles_error.png diff --git a/docs/html/design/media/principles_get_to_know_me.png b/docs/html/design/media/principles_get_to_know_me.png Binary files differnew file mode 100644 index 0000000..954363f --- /dev/null +++ b/docs/html/design/media/principles_get_to_know_me.png diff --git a/docs/html/design/media/principles_heavy_lifting.png b/docs/html/design/media/principles_heavy_lifting.png Binary files differnew file mode 100644 index 0000000..c89c0ff --- /dev/null +++ b/docs/html/design/media/principles_heavy_lifting.png diff --git a/docs/html/design/media/principles_important_interruption.png b/docs/html/design/media/principles_important_interruption.png Binary files differnew file mode 100644 index 0000000..0576efe --- /dev/null +++ b/docs/html/design/media/principles_important_interruption.png diff --git a/docs/html/design/media/principles_information_when_need_it.png b/docs/html/design/media/principles_information_when_need_it.png Binary files differnew file mode 100644 index 0000000..c5ef3ca --- /dev/null +++ b/docs/html/design/media/principles_information_when_need_it.png diff --git a/docs/html/design/media/principles_keep_it_brief.png b/docs/html/design/media/principles_keep_it_brief.png Binary files differnew file mode 100644 index 0000000..9c2813b --- /dev/null +++ b/docs/html/design/media/principles_keep_it_brief.png diff --git a/docs/html/design/media/principles_looks_same.png b/docs/html/design/media/principles_looks_same.png Binary files differnew file mode 100644 index 0000000..3a556ad --- /dev/null +++ b/docs/html/design/media/principles_looks_same.png diff --git a/docs/html/design/media/principles_make_important_fast.png b/docs/html/design/media/principles_make_important_fast.png Binary files differnew file mode 100644 index 0000000..26da655 --- /dev/null +++ b/docs/html/design/media/principles_make_important_fast.png diff --git a/docs/html/design/media/principles_make_it_mine.png b/docs/html/design/media/principles_make_it_mine.png Binary files differnew file mode 100644 index 0000000..683a0b7 --- /dev/null +++ b/docs/html/design/media/principles_make_it_mine.png diff --git a/docs/html/design/media/principles_navigation.png b/docs/html/design/media/principles_navigation.png Binary files differnew file mode 100644 index 0000000..c23dde7 --- /dev/null +++ b/docs/html/design/media/principles_navigation.png diff --git a/docs/html/design/media/principles_never_lose_stuff.png b/docs/html/design/media/principles_never_lose_stuff.png Binary files differnew file mode 100644 index 0000000..acbefea --- /dev/null +++ b/docs/html/design/media/principles_never_lose_stuff.png diff --git a/docs/html/design/media/principles_pictures.png b/docs/html/design/media/principles_pictures.png Binary files differnew file mode 100644 index 0000000..cebd162 --- /dev/null +++ b/docs/html/design/media/principles_pictures.png diff --git a/docs/html/design/media/principles_real_objects.png b/docs/html/design/media/principles_real_objects.png Binary files differnew file mode 100644 index 0000000..3889c9a --- /dev/null +++ b/docs/html/design/media/principles_real_objects.png diff --git a/docs/html/design/media/principles_sprinkle_encouragement.png b/docs/html/design/media/principles_sprinkle_encouragement.png Binary files differnew file mode 100644 index 0000000..8617365 --- /dev/null +++ b/docs/html/design/media/principles_sprinkle_encouragement.png diff --git a/docs/html/design/media/principles_tricks.png b/docs/html/design/media/principles_tricks.png Binary files differnew file mode 100644 index 0000000..f436ce9 --- /dev/null +++ b/docs/html/design/media/principles_tricks.png diff --git a/docs/html/design/media/progress_activity.png b/docs/html/design/media/progress_activity.png Binary files differnew file mode 100644 index 0000000..32cf1f5 --- /dev/null +++ b/docs/html/design/media/progress_activity.png diff --git a/docs/html/design/media/progress_activity2.png b/docs/html/design/media/progress_activity2.png Binary files differnew file mode 100644 index 0000000..ec3df99 --- /dev/null +++ b/docs/html/design/media/progress_activity2.png diff --git a/docs/html/design/media/progress_download.png b/docs/html/design/media/progress_download.png Binary files differnew file mode 100644 index 0000000..ab6bf58 --- /dev/null +++ b/docs/html/design/media/progress_download.png diff --git a/docs/html/design/media/progress_themes.png b/docs/html/design/media/progress_themes.png Binary files differnew file mode 100644 index 0000000..df090e5 --- /dev/null +++ b/docs/html/design/media/progress_themes.png diff --git a/docs/html/design/media/scroll_index.mp4 b/docs/html/design/media/scroll_index.mp4 Binary files differnew file mode 100644 index 0000000..383bbd8 --- /dev/null +++ b/docs/html/design/media/scroll_index.mp4 diff --git a/docs/html/design/media/scroll_index.ogv b/docs/html/design/media/scroll_index.ogv Binary files differnew file mode 100644 index 0000000..2cd61ef --- /dev/null +++ b/docs/html/design/media/scroll_index.ogv diff --git a/docs/html/design/media/scroll_index.webm b/docs/html/design/media/scroll_index.webm Binary files differnew file mode 100644 index 0000000..5a665d1 --- /dev/null +++ b/docs/html/design/media/scroll_index.webm diff --git a/docs/html/design/media/scroll_indicator.mp4 b/docs/html/design/media/scroll_indicator.mp4 Binary files differnew file mode 100644 index 0000000..924852e --- /dev/null +++ b/docs/html/design/media/scroll_indicator.mp4 diff --git a/docs/html/design/media/scroll_indicator.ogv b/docs/html/design/media/scroll_indicator.ogv Binary files differnew file mode 100644 index 0000000..c037bf5 --- /dev/null +++ b/docs/html/design/media/scroll_indicator.ogv diff --git a/docs/html/design/media/scroll_indicator.webm b/docs/html/design/media/scroll_indicator.webm Binary files differnew file mode 100644 index 0000000..000dc0a --- /dev/null +++ b/docs/html/design/media/scroll_indicator.webm diff --git a/docs/html/design/media/seekbar_example.png b/docs/html/design/media/seekbar_example.png Binary files differnew file mode 100644 index 0000000..70b7e5e --- /dev/null +++ b/docs/html/design/media/seekbar_example.png diff --git a/docs/html/design/media/seekbar_style.png b/docs/html/design/media/seekbar_style.png Binary files differnew file mode 100644 index 0000000..e31445d --- /dev/null +++ b/docs/html/design/media/seekbar_style.png diff --git a/docs/html/design/media/selection_adjusting_actions.png b/docs/html/design/media/selection_adjusting_actions.png Binary files differnew file mode 100644 index 0000000..0799b6b --- /dev/null +++ b/docs/html/design/media/selection_adjusting_actions.png diff --git a/docs/html/design/media/selection_cab_big.png b/docs/html/design/media/selection_cab_big.png Binary files differnew file mode 100644 index 0000000..72567cb --- /dev/null +++ b/docs/html/design/media/selection_cab_big.png diff --git a/docs/html/design/media/selection_cab_example.png b/docs/html/design/media/selection_cab_example.png Binary files differnew file mode 100644 index 0000000..c49a2ad --- /dev/null +++ b/docs/html/design/media/selection_cab_example.png diff --git a/docs/html/design/media/selection_context_menu.png b/docs/html/design/media/selection_context_menu.png Binary files differnew file mode 100644 index 0000000..c711546 --- /dev/null +++ b/docs/html/design/media/selection_context_menu.png diff --git a/docs/html/design/media/settings_checkbox.png b/docs/html/design/media/settings_checkbox.png Binary files differnew file mode 100644 index 0000000..6615bfb --- /dev/null +++ b/docs/html/design/media/settings_checkbox.png diff --git a/docs/html/design/media/settings_date_time.png b/docs/html/design/media/settings_date_time.png Binary files differnew file mode 100644 index 0000000..8df92d4 --- /dev/null +++ b/docs/html/design/media/settings_date_time.png diff --git a/docs/html/design/media/settings_dependency.png b/docs/html/design/media/settings_dependency.png Binary files differnew file mode 100644 index 0000000..4821c61 --- /dev/null +++ b/docs/html/design/media/settings_dependency.png diff --git a/docs/html/design/media/settings_flowchart.png b/docs/html/design/media/settings_flowchart.png Binary files differnew file mode 100644 index 0000000..7e8623c --- /dev/null +++ b/docs/html/design/media/settings_flowchart.png diff --git a/docs/html/design/media/settings_grouping.png b/docs/html/design/media/settings_grouping.png Binary files differnew file mode 100644 index 0000000..d271ea8 --- /dev/null +++ b/docs/html/design/media/settings_grouping.png diff --git a/docs/html/design/media/settings_individual_on_off.png b/docs/html/design/media/settings_individual_on_off.png Binary files differnew file mode 100644 index 0000000..03bea0b --- /dev/null +++ b/docs/html/design/media/settings_individual_on_off.png diff --git a/docs/html/design/media/settings_list_subscreen.png b/docs/html/design/media/settings_list_subscreen.png Binary files differnew file mode 100644 index 0000000..385aa6a --- /dev/null +++ b/docs/html/design/media/settings_list_subscreen.png diff --git a/docs/html/design/media/settings_main.png b/docs/html/design/media/settings_main.png Binary files differnew file mode 100644 index 0000000..f42a358 --- /dev/null +++ b/docs/html/design/media/settings_main.png diff --git a/docs/html/design/media/settings_master_on_off.png b/docs/html/design/media/settings_master_on_off.png Binary files differnew file mode 100644 index 0000000..e46bb97 --- /dev/null +++ b/docs/html/design/media/settings_master_on_off.png diff --git a/docs/html/design/media/settings_master_on_off_2.png b/docs/html/design/media/settings_master_on_off_2.png Binary files differnew file mode 100644 index 0000000..ab4e992 --- /dev/null +++ b/docs/html/design/media/settings_master_on_off_2.png diff --git a/docs/html/design/media/settings_multiple_choice.png b/docs/html/design/media/settings_multiple_choice.png Binary files differnew file mode 100644 index 0000000..9b28566 --- /dev/null +++ b/docs/html/design/media/settings_multiple_choice.png diff --git a/docs/html/design/media/settings_overflow.png b/docs/html/design/media/settings_overflow.png Binary files differnew file mode 100644 index 0000000..9000bec --- /dev/null +++ b/docs/html/design/media/settings_overflow.png diff --git a/docs/html/design/media/settings_slider.png b/docs/html/design/media/settings_slider.png Binary files differnew file mode 100644 index 0000000..51545c8 --- /dev/null +++ b/docs/html/design/media/settings_slider.png diff --git a/docs/html/design/media/settings_subscreen_navigation.png b/docs/html/design/media/settings_subscreen_navigation.png Binary files differnew file mode 100644 index 0000000..2ab0b96 --- /dev/null +++ b/docs/html/design/media/settings_subscreen_navigation.png diff --git a/docs/html/design/media/spinners_actionbar.png b/docs/html/design/media/spinners_actionbar.png Binary files differnew file mode 100644 index 0000000..5d07419 --- /dev/null +++ b/docs/html/design/media/spinners_actionbar.png diff --git a/docs/html/design/media/spinners_form.png b/docs/html/design/media/spinners_form.png Binary files differnew file mode 100644 index 0000000..79ee4e4 --- /dev/null +++ b/docs/html/design/media/spinners_form.png diff --git a/docs/html/design/media/spinners_hololightanddark.png b/docs/html/design/media/spinners_hololightanddark.png Binary files differnew file mode 100644 index 0000000..9b0601e --- /dev/null +++ b/docs/html/design/media/spinners_hololightanddark.png diff --git a/docs/html/design/media/swipe_tabs.mp4 b/docs/html/design/media/swipe_tabs.mp4 Binary files differnew file mode 100644 index 0000000..f8a1ab5 --- /dev/null +++ b/docs/html/design/media/swipe_tabs.mp4 diff --git a/docs/html/design/media/swipe_tabs.ogv b/docs/html/design/media/swipe_tabs.ogv Binary files differnew file mode 100644 index 0000000..ae3c86b --- /dev/null +++ b/docs/html/design/media/swipe_tabs.ogv diff --git a/docs/html/design/media/swipe_tabs.png b/docs/html/design/media/swipe_tabs.png Binary files differnew file mode 100644 index 0000000..f25f061 --- /dev/null +++ b/docs/html/design/media/swipe_tabs.png diff --git a/docs/html/design/media/swipe_tabs.webm b/docs/html/design/media/swipe_tabs.webm Binary files differnew file mode 100644 index 0000000..86f403e --- /dev/null +++ b/docs/html/design/media/swipe_tabs.webm diff --git a/docs/html/design/media/swipe_views.png b/docs/html/design/media/swipe_views.png Binary files differnew file mode 100644 index 0000000..3b6ecaf --- /dev/null +++ b/docs/html/design/media/swipe_views.png diff --git a/docs/html/design/media/swipe_views2.png b/docs/html/design/media/swipe_views2.png Binary files differnew file mode 100644 index 0000000..2ed366c --- /dev/null +++ b/docs/html/design/media/swipe_views2.png diff --git a/docs/html/design/media/switches_checkboxes.png b/docs/html/design/media/switches_checkboxes.png Binary files differnew file mode 100644 index 0000000..92b8d5c --- /dev/null +++ b/docs/html/design/media/switches_checkboxes.png diff --git a/docs/html/design/media/switches_radios.png b/docs/html/design/media/switches_radios.png Binary files differnew file mode 100644 index 0000000..f9bf5fc --- /dev/null +++ b/docs/html/design/media/switches_radios.png diff --git a/docs/html/design/media/switches_switches.png b/docs/html/design/media/switches_switches.png Binary files differnew file mode 100644 index 0000000..43e2623 --- /dev/null +++ b/docs/html/design/media/switches_switches.png diff --git a/docs/html/design/media/system_ui_landing.png b/docs/html/design/media/system_ui_landing.png Binary files differnew file mode 100644 index 0000000..1d22920 --- /dev/null +++ b/docs/html/design/media/system_ui_landing.png diff --git a/docs/html/design/media/tabs_overview.png b/docs/html/design/media/tabs_overview.png Binary files differnew file mode 100644 index 0000000..c336982 --- /dev/null +++ b/docs/html/design/media/tabs_overview.png diff --git a/docs/html/design/media/tabs_scrolly.mp4 b/docs/html/design/media/tabs_scrolly.mp4 Binary files differnew file mode 100644 index 0000000..dc9e9c6 --- /dev/null +++ b/docs/html/design/media/tabs_scrolly.mp4 diff --git a/docs/html/design/media/tabs_scrolly.ogv b/docs/html/design/media/tabs_scrolly.ogv Binary files differnew file mode 100644 index 0000000..3e484f9 --- /dev/null +++ b/docs/html/design/media/tabs_scrolly.ogv diff --git a/docs/html/design/media/tabs_scrolly.webm b/docs/html/design/media/tabs_scrolly.webm Binary files differnew file mode 100644 index 0000000..e9d371d --- /dev/null +++ b/docs/html/design/media/tabs_scrolly.webm diff --git a/docs/html/design/media/tabs_stacked.png b/docs/html/design/media/tabs_stacked.png Binary files differnew file mode 100644 index 0000000..09e9958 --- /dev/null +++ b/docs/html/design/media/tabs_stacked.png diff --git a/docs/html/design/media/tabs_standard.png b/docs/html/design/media/tabs_standard.png Binary files differnew file mode 100644 index 0000000..8e3ed66 --- /dev/null +++ b/docs/html/design/media/tabs_standard.png diff --git a/docs/html/design/media/tabs_youtube.png b/docs/html/design/media/tabs_youtube.png Binary files differnew file mode 100644 index 0000000..69e9268 --- /dev/null +++ b/docs/html/design/media/tabs_youtube.png diff --git a/docs/html/design/media/text_input_holodarkandlight.png b/docs/html/design/media/text_input_holodarkandlight.png Binary files differnew file mode 100644 index 0000000..aff61fc --- /dev/null +++ b/docs/html/design/media/text_input_holodarkandlight.png diff --git a/docs/html/design/media/text_input_singlevsmultiline.png b/docs/html/design/media/text_input_singlevsmultiline.png Binary files differnew file mode 100644 index 0000000..7bb9a5c --- /dev/null +++ b/docs/html/design/media/text_input_singlevsmultiline.png diff --git a/docs/html/design/media/text_input_textselection.png b/docs/html/design/media/text_input_textselection.png Binary files differnew file mode 100644 index 0000000..85689cf --- /dev/null +++ b/docs/html/design/media/text_input_textselection.png diff --git a/docs/html/design/media/text_input_typesandtypedown.png b/docs/html/design/media/text_input_typesandtypedown.png Binary files differnew file mode 100644 index 0000000..32f761c --- /dev/null +++ b/docs/html/design/media/text_input_typesandtypedown.png diff --git a/docs/html/design/media/themes_holo_dark.png b/docs/html/design/media/themes_holo_dark.png Binary files differnew file mode 100644 index 0000000..916ad27 --- /dev/null +++ b/docs/html/design/media/themes_holo_dark.png diff --git a/docs/html/design/media/themes_holo_inverse.png b/docs/html/design/media/themes_holo_inverse.png Binary files differnew file mode 100644 index 0000000..72c0244 --- /dev/null +++ b/docs/html/design/media/themes_holo_inverse.png diff --git a/docs/html/design/media/themes_holo_light.png b/docs/html/design/media/themes_holo_light.png Binary files differnew file mode 100644 index 0000000..d4b0861 --- /dev/null +++ b/docs/html/design/media/themes_holo_light.png diff --git a/docs/html/design/media/touch_feedback_communication.png b/docs/html/design/media/touch_feedback_communication.png Binary files differnew file mode 100644 index 0000000..bb27250 --- /dev/null +++ b/docs/html/design/media/touch_feedback_communication.png diff --git a/docs/html/design/media/touch_feedback_manipulation.png b/docs/html/design/media/touch_feedback_manipulation.png Binary files differnew file mode 100644 index 0000000..cb1f268 --- /dev/null +++ b/docs/html/design/media/touch_feedback_manipulation.png diff --git a/docs/html/design/media/touch_feedback_reaction_response.png b/docs/html/design/media/touch_feedback_reaction_response.png Binary files differnew file mode 100644 index 0000000..5a34d7a --- /dev/null +++ b/docs/html/design/media/touch_feedback_reaction_response.png diff --git a/docs/html/design/media/touch_feedback_states.png b/docs/html/design/media/touch_feedback_states.png Binary files differnew file mode 100644 index 0000000..972198c --- /dev/null +++ b/docs/html/design/media/touch_feedback_states.png diff --git a/docs/html/design/media/typography_alphas.png b/docs/html/design/media/typography_alphas.png Binary files differnew file mode 100644 index 0000000..4b53bd0 --- /dev/null +++ b/docs/html/design/media/typography_alphas.png diff --git a/docs/html/design/media/typography_defaults.png b/docs/html/design/media/typography_defaults.png Binary files differnew file mode 100644 index 0000000..87f1c87 --- /dev/null +++ b/docs/html/design/media/typography_defaults.png diff --git a/docs/html/design/media/typography_main.png b/docs/html/design/media/typography_main.png Binary files differnew file mode 100644 index 0000000..8298cf6 --- /dev/null +++ b/docs/html/design/media/typography_main.png diff --git a/docs/html/design/media/typography_sizes.png b/docs/html/design/media/typography_sizes.png Binary files differnew file mode 100644 index 0000000..eda1d99 --- /dev/null +++ b/docs/html/design/media/typography_sizes.png diff --git a/docs/html/design/media/ui_overview_all_apps.png b/docs/html/design/media/ui_overview_all_apps.png Binary files differnew file mode 100644 index 0000000..17e7ece --- /dev/null +++ b/docs/html/design/media/ui_overview_all_apps.png diff --git a/docs/html/design/media/ui_overview_app_ui.png b/docs/html/design/media/ui_overview_app_ui.png Binary files differnew file mode 100644 index 0000000..7fc5dcd --- /dev/null +++ b/docs/html/design/media/ui_overview_app_ui.png diff --git a/docs/html/design/media/ui_overview_home_screen.png b/docs/html/design/media/ui_overview_home_screen.png Binary files differnew file mode 100644 index 0000000..ee0e4d6 --- /dev/null +++ b/docs/html/design/media/ui_overview_home_screen.png diff --git a/docs/html/design/media/ui_overview_notifications.png b/docs/html/design/media/ui_overview_notifications.png Binary files differnew file mode 100644 index 0000000..fd7438a --- /dev/null +++ b/docs/html/design/media/ui_overview_notifications.png diff --git a/docs/html/design/media/ui_overview_recents.png b/docs/html/design/media/ui_overview_recents.png Binary files differnew file mode 100644 index 0000000..4ea0583 --- /dev/null +++ b/docs/html/design/media/ui_overview_recents.png diff --git a/docs/html/design/media/ui_overview_system_ui.png b/docs/html/design/media/ui_overview_system_ui.png Binary files differnew file mode 100644 index 0000000..ecc4b7d --- /dev/null +++ b/docs/html/design/media/ui_overview_system_ui.png diff --git a/docs/html/design/media/whats_new_action_bar.png b/docs/html/design/media/whats_new_action_bar.png Binary files differnew file mode 100644 index 0000000..713187e --- /dev/null +++ b/docs/html/design/media/whats_new_action_bar.png diff --git a/docs/html/design/media/whats_new_multipanel.png b/docs/html/design/media/whats_new_multipanel.png Binary files differnew file mode 100644 index 0000000..8e9c2f0 --- /dev/null +++ b/docs/html/design/media/whats_new_multipanel.png diff --git a/docs/html/design/media/whats_new_multiselect.png b/docs/html/design/media/whats_new_multiselect.png Binary files differnew file mode 100644 index 0000000..ab34b24 --- /dev/null +++ b/docs/html/design/media/whats_new_multiselect.png diff --git a/docs/html/design/media/whats_new_nav_bar.png b/docs/html/design/media/whats_new_nav_bar.png Binary files differnew file mode 100644 index 0000000..46239e5 --- /dev/null +++ b/docs/html/design/media/whats_new_nav_bar.png diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd new file mode 100644 index 0000000..2226fec --- /dev/null +++ b/docs/html/design/patterns/actionbar.jd @@ -0,0 +1,354 @@ +page.title=Action Bar +@jd:body + +<img src="{@docRoot}design/media/action_bar_pattern_overview.png"> + +<p>The <em>action bar</em> is arguably the most important structural element of an Android app. It's a +dedicated piece of real estate at the top of each screen that is generally persistent throughout the +app.</p> +<p><strong>The main purpose of the action bar is to</strong>:</p> +<ul> +<li>Make important actions (such as <em>New</em> or <em>Search</em>, etc) prominent and accessible in a predictable + way.</li> +<li>Support consistent navigation and view switching within apps.</li> +<li>Reduce clutter by providing an action overflow for rarely used actions.</li> +<li>Provide a dedicated space for giving your app an identity.</li> +</ul> +<p>If you're new to writing Android apps, note that the action bar is one of the most important design +elements you can implement. Following the guidelines described here will go a long way toward making +your app's interface consistent with the core Android apps.</p> +<h2 id="organization">General Organization</h2> + +<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"> + + <ol> + <li class="value-1"><h4>App icon</h4> + <p> + +The app icon establishes your app's identity. It can be replaced with a different logo or branding +if you wish. +Important: If the app is currently not displaying the top-level screen, be sure to display the Up +caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of +Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern. + +<div class="figure"> + <img src="{@docRoot}design/media/action_bar_pattern_up_app_icon.png"> + <div class="figure-caption"> + App icon with and without "up" affordance. + </div> +</div> + + </p> + </li> + </ol> + + </div> + <div class="layout-content-col span-6 with-callouts"> + + <ol> + <li class="value-2"><h4>View control</h4> + <p> + +If your app displays data in different views, this segment of the action bar allows users to switch +views. Examples of view-switching controls are drop-down menus or tab controls. + + </p> + <p> + +If your app doesn't support different views, you can also use this space to display non-interactive +content, such as an app title or longer branding information. + + </p> + </li> + <li class="value-3"><h4>Action buttons</h4> + <p> + +Show the most important actions of your app in the actions section. Actions that don't fit in the +action bar are moved automatically to the action overflow. + + </p> + </li> + <li class="value-4"><h4>Action overflow</h4> + <p> + +Move less often used actions to the action overflow. + + </p> + </li> + </ol> + </div> +</div> + +<h2 id="adapting-rotation">Adapting to Rotation and Different Screen Sizes</h2> + +<p>One of the most important UI issues to consider when creating an app is how to adjust to screen +rotation on different screen sizes.</p> +<p>You can adapt to such changes by using <em>split action bars</em>, which allow you to distribute action bar +content across multiple bars located below the main action bar or at the bottom of the screen.</p> + +<img src="{@docRoot}design/media/action_bar_pattern_rotation.png"> +<div class="figure-caption"> + Split action bar showing action buttons at the bottom of the screen in vertical orientation. +</div> + +<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"> + +<p>When splitting up content across multiple action bars, you generally have three possible locations +for action bar content:</p> +<ol> +<li><strong>Main action bar</strong></li> +<li><strong>Top bar</strong></li> +<li><strong>Bottom bar</strong></li> +</ol> +<p>If the user can navigate up the hierarchy from a given screen, the main action bar contains the up +caret, at a minimum.</p> +<p>To allow the user to quickly switch between the views your app provides, use tabs or a spinner in +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-3"> + + <img src="{@docRoot}design/media/action_bar_pattern_considerations.png"> + + </div> +</div> + +<h2 id="contextual">Contextual Action Bars</h2> + +<p>A <em>contextual action bar (CAB)</em> is a temporary action bar that overlays the app's action bar for the +duration of a particular sub-task. CABs are most typically used for tasks that involve acting on +selected data or text.</p> + +<img src="{@docRoot}design/media/action_bar_cab.png"> +<div class="figure-caption"> + Contextual action bar shown in Browser and Gmail +</div> + +<p>The selection CAB appears after a long press on a selectable data item triggers selection mode.</p> +<p><strong>From here the user can</strong>:</p> +<ul> +<li>Select additional elements by touching them.</li> +<li>Trigger an action from the CAB that applies to all selected 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> +<p>Use CABs whenever you allow the user to select data via long press. You can control the action +content of a CAB in order to insert the actions you would like the user to be able to perform.</p> +<p>For more information, refer to the "Selection" pattern.</p> +<h2 id="elements">Action Bar Elements</h2> + +<h4>Tabs</h4> +<p><em>Tabs</em> display app views concurrently and make it easy to explore and switch between them. Use tabs +if you expect your users to switch views frequently.</p> + +<img src="{@docRoot}design/media/tabs_youtube.png"> + +<p>There are two types of tabs: fixed and scrollable.</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<h4>Scrollable tabs</h4> +<p><em>Scrollable tabs</em> always take up the entire width of the bar, with the currently active view item in +the center, and therefore need to live in a dedicated bar. Scrollable tabs can themselves be +scrolled horizontally to bring more tabs into view.</p> +<p>Use scrollable tabs if you have a large number of views or if you're unsure how many views will be +displayed because your app inserts views dynamically (for example, open chats in a messaging app +that the user can navigate between). Scrollable tabs should always allow the user to navigate +between the views by swiping left or right on the content area as well as swiping the tabs +themselves.</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"> </div> + </div> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<h4>Fixed tabs</h4> +<p><em>Fixed tabs</em> are always visible on the screen, and can't be moved out of the way like scrollable +tabs. Fixed tabs in the main action bar can move to the top bar when the screen orientation changes.</p> + + </div> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/action_bar_pattern_default_tabs.png"> + <div class="figure-caption"> + Default fixed tabs shown in Holo Dark & Light. + </div> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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> +<p><strong>Use spinners rather than tabs in the main action bar if</strong>:</p> +<ul> +<li>You don't want to give up the vertical screen real estate for a dedicated tab bar.</li> +<li>You expect your app's users to switch views infrequently.</li> +</ul> + + </div> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/action_bar_pattern_spinner.png"> + <div class="figure-caption"> + Action bar spinner from Calendar application. + </div> + + </div> +</div> + +<h4>Action buttons</h4> +<p><em>Action buttons</em> on the action bar surface your app's most important activities. Think about which +buttons will get used most often, and order them accordingly. Depending on available screen real +estate, the system shows your most important actions as action buttons and moves the rest to the +action overflow. The action bar and the action overflow should only present actions to the user that +are available. If an action is unavailable in the current context, hide it. Do not show it as +disabled.</p> + +<img src="{@docRoot}design/media/action_bar_pattern_action_icons.png"> +<div class="figure-caption"> + A sampling of action buttons used throughout the Gmail application. +</div> + +<p>For guidance on prioritizing actions, use the FIT scheme.</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + +<p><strong>F — Frequent</strong></p> +<ul> +<li>Will people use this action at least 7 out of 10 times they visit the screen?</li> +<li>Will they typically use it several times in a row?</li> +<li>Would taking an extra step every time truly be burdensome?</li> +</ul> + + </div> + <div class="layout-content-col span-4"> + +<p><strong>I — Important</strong></p> +<ul> +<li>Do you want everyone to discover this action because it's especially cool or a selling point?</li> +<li>Is it something that needs to be effortless in the rare cases it's needed?</li> +</ul> + + </div> + <div class="layout-content-col span-4"> + +<p><strong>T — Typical</strong></p> +<ul> +<li>Is it typically presented as a first-class action in similar apps?</li> +<li>Given the context, would people be surprised if it were buried in the action overflow?</li> +</ul> + + </div> +</div> + +<p>If either F, I, or T apply, then it's appropriate for the action bar. Otherwise, it belongs in the +action overflow.</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 href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Download the Action Bar Icon Pack</a> + +</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<h4>Action overflow</h4> +<p>The action overflow in the action bar provides access to your app's less frequently used actions. +The overflow icon only appears on phones that have no menu hardware keys. Phones with menu keys +display the action overflow when the user presses the key.</p> + + </div> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/action_bar_pattern_overflow.png"> + <div class="figure-caption"> + Action overflow is pinned to the right side. + </div> + + </div> +</div> + +<p>How many actions will fit in the main action bar? Action bar capacity is controlled by the following +rules:</p> +<ul> +<li>Action buttons in the main action bar may not occupy more than 50% of the bar's width. Action + buttons on bottom action bars can use the entire width.</li> +<li>The screen width in density-independent pixels + (<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym>) + determine the number of items that will fit in the main action bar:<ul> +<li>smaller than 360 dp = 2 icons</li> +<li>360-499 dp = 3 icons</li> +<li>500-599 dp = 4 icons</li> +<li>600 dp and larger = 5 icons</li> +</ul> +</li> +</ul> + +<img src="{@docRoot}design/media/action_bar_pattern_table.png"> +<div class="figure-caption"> + In the above table "o" denotes an action bar item and "=" an overflow icon. +</div> + +<h4>Sharing data</h4> +<p>Whenever your app permits sharing of data, such as images or movie clips, use a <em>share action +provider</em> in your action bar. The share action provider is designed to speed up sharing by +displaying the most recently used sharing service next to a spinner button that contains other +sharing options.</p> + +<img src="{@docRoot}design/media/action_bar_pattern_share_pack.png"> +<div class="figure-caption"> + The Gallery app's share action provider with extended spinner for additional sharing options. +</div> + +<h2 id="checklist">Action Bar Checklist</h2> + +<p>When planning your split action bars, ask yourself questions like these:</p> +<h4>How important is view navigation to the task?</h4> +<p>If view navigation is very important to your app, use tabs (for fastest view-switching) or spinners.</p> +<h4>Which of the app's actions need to be consistently available directly from the action bar, and which can be moved to the action overflow?</h4> +<p>Use the <acronym title="Frequent, Important or Typical">FIT</acronym> scheme to decide if actions +are displayed at the top-level or can be moved to the action overflow. If the number of top-level +actions exceeds the capacity of the main action bar, display them separately in a bottom action bar.</p> +<h4>What else is important enough to warrant continuous display?</h4> +<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> diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd new file mode 100644 index 0000000..e2398ed --- /dev/null +++ b/docs/html/design/patterns/app-structure.jd @@ -0,0 +1,254 @@ +page.title=Application Structure +@jd:body + +<p>Apps come in many varieties that address very different needs. For example:</p> +<ul> +<li>Apps such as Calculator or Camera that are built around a single focused activity handled from a + single screen</li> +<li>Apps such as Phone whose main purpose is to switch between different activities without deeper + navigation</li> +<li>Apps such as Gmail or the Play Store that combine a broad set of data views with deep navigation</li> +</ul> +<p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p> +<h2 id="general-structure">General Structure</h2> + +<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"> + + <img src="{@docRoot}design/media/app_structure_overview.png"> + + </div> + <div class="layout-content-col span-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 +either show different representations of the same data or expose an altogether different functional +facet of your app.</p> +<div class="vspace size-3"> </div> + +<h4>Category views</h4> +<p>Category views allow you to drill deeper into your data.</p> +<div class="vspace size-11"> </div> + +<h4>Detail/edit view</h4> +<p>The detail/edit view is where you consume or create data.</p> + + </div> +</div> + +<h2 id="top-level">Top Level</h2> + +<p>The layout of your start screen requires special attention. This is the first screen people see +after launching your app, so it should be an equally rewarding experience for new and frequent +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"> + +<h4>Put content forward</h4> +<p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to +the meat of your app right away by making content the centerpiece of your start screen. Choose +layouts that are visually engaging and appropriate for the data type and screen size.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/app_structure_market.png"> + <div class="figure-caption"> + The Play Store app's start screen primarily allows navigation into the stores for Apps, Music, Books, + Movies and Games. It is also enriched with tailored recommendations and promotions that + surface content of interest to the user. Search is readily available from the action bar. + </div> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<h4>Set up action bars for navigation and actions</h4> +<p>All screens in your app should display action bars to provide consistent navigation and surface +important actions.</p> +<p>At the top level, special considerations apply to the action bar:</p> +<ul> +<li>Use the action bar to display your app's icon or title.</li> +<li>If your top level consists of multiple views, or if switching between data from different user + accounts is a significant use case, make sure that it's easy for the user to navigate between them + by adding view controls to your action bar.</li> +<li>If your app allows people to create content, consider making the content accessible right from the + top level.</li> +<li>If your content is searchable, include the Search action in the action bar so people can cut + through the navigation hierarchy.</li> +</ul> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/app_structure_gmail.png"> + <div class="figure-caption"> + Email is about productivity, so an efficient, easy-to-skim list with higher data density works + well. Navigation supports switching between accounts and recent labels. Icons for creating a + new message or searching are prominent in the split action bar at the bottom. + </div> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<h4>Create an identity for your app</h4> +<p>Creating an identity for your app goes beyond the action bar. Your app communicates its identity +through its data, the way that data is arranged, and how people interact with it. Especially for +media-rich applications, try to create unique layouts that showcase your data and go beyond the +monotony of simple list views.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/app_structure_music_lndscp.png"> + <div class="figure-caption"> + The 3D carousel celebrates cover art and establishes a unique identity for the Music app. + Defaulting to the Recent view keeps the focus on music the user has been listening to lately. + </div> + + </div> +</div> + +<h2 id="categories">Categories</h2> + +<p>Generally, the purpose of a deep, data-driven app is to navigate through organizational categories +to the detail level, where data can be viewed and managed. Minimize perceived navigation effort by +keeping your apps shallow.</p> +<p>Even though the number of vertical navigation steps from the top level down to the detail views is +typically dictated by the structure of your app's content, there are several ways you can cut down +on the perception of onerous navigation.</p> +<h4>Use tabs to combine category selection and data display</h4> +<p>This can be successful if the categories are familiar or the number of categories is small. It has +the advantage that a level of hierarchy is removed and data remains at the center of the user's +attention. Navigating laterally between data-rich categories is more akin to a casual browsing +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"> + +<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 +minimize navigational effort. Rule of thumb: no more than 5–7 tabs.</p> + + <img src="{@docRoot}design/media/app_structure_scrolltabs.png"> + <div class="figure-caption"> + The Play Store app uses tabs to simultaneously show category choice and content. To navigate + between categories, users can swipe left/right on the content. + </div> + + </div> + <div class="layout-content-col span-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> + + <img src="{@docRoot}design/media/app_structure_fixedtabs.png"> + <div class="figure-caption"> + YouTube uses fixed tabs to switch between different, relatively unrelated functional areas. + </div> + + + </div> +</div> + +<h4>Allow cutting through hierarchies</h4> +<p>Take advantage of shortcuts that allow people to reach their goals quicker. To allow top-level +invocation of actions for a data item from within list or grid views, display prominent actions +directly on list view items using drop-downs or split list items. This lets people invoke actions on +data without having to navigate all the way down the hierarchy.</p> + +<img src="{@docRoot}design/media/app_structure_shortcut_on_item.png"> +<div class="figure-caption"> + Music allows the user to act upon a data item (song) from within the category view (album), + thereby removing the need to navigate all the way down to the song's detail view. +</div> + +<h4>Acting upon multiple data items</h4> +<p>Even though category views mostly serve to guide people to content detail, keep in mind that there +are often good reasons to act on collections of data as well.</p> +<p>For example, if you allow people to delete an item in a detail view, you should also allow them to +delete multiple items in the category view. Analyze which detail view actions are applicable to +collections of items. Then use multi-select to allow application of those actions to multiple items +in a category view.</p> +<h2 id="details">Details</h2> + +<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"> + +<h4>Layout</h4> +<p>Consider the activities people will perform in the detail view and arrange the layout accordingly. +For immersive content, make use of the lights-out mode to allow for distraction-free viewing of +full-screen content.</p> + + <img src="{@docRoot}design/media/app_structure_people_detail.png"> + + </div> + <div class="layout-content-col span-9"> + + <img src="{@docRoot}design/media/app_structure_book_detail_page_flip.png"> + <div class="figure-caption"> + Google Books' detail view is all about replicating the experience of reading an actual book. + The page-flip animation reinforces that notion. To create an immersive experience the app + enters lights-out mode, which hides all system UI affordances. + </div> + + <div class="figure-caption"> + The purpose of the People app's detail view is to surface communication options. The list view + allows for efficient scanning and quick access of phone numbers, email addresses and other + information items. Split items are used to combine calling and messaging into one compact line + item. + </div> + </div> +</div> + +<h4>Make navigation between detail views efficient</h4> +<p>If your users are likely to want to look at multiple items in sequence, allow them to navigate +between items from within the detail view. Use swipe views or other techniques, such as filmstrips, +to achieve this.</p> + +<img src="{@docRoot}design/media/app_structure_gmail_swipe.png"> +<div class="figure-caption"> + Gmail using swipe views to navigate from detail view to detail view. +</div> + +<img src="{@docRoot}design/media/app_structure_gallery_filmstrip.png"> +<div class="figure-caption"> + In addition to supporting swipe gestures to move left or right through images, Gallery provides a + filmstrip control that lets people quickly jump to specific images. +</div> + +<h2 id="checklist">Checklist</h2> + +<ul> +<li> +<p>Find ways to display useful content on your start screen.</p> +</li> +<li> +<p>Use action bars to provide consistent navigation.</p> +</li> +<li> +<p>Keep your hierarchies shallow by using horizontal navigation and shortcuts.</p> +</li> +<li> +<p>Use multi-select to allow the user to act on collections of data.</p> +</li> +<li> +<p>Allow for quick navigation between detail items with swipe views.</p> +</li> +</ul> diff --git a/docs/html/design/patterns/compatibility.jd b/docs/html/design/patterns/compatibility.jd new file mode 100644 index 0000000..84ae337 --- /dev/null +++ b/docs/html/design/patterns/compatibility.jd @@ -0,0 +1,61 @@ +page.title=Backwards Compatibility +@jd:body + +<p>Significant changes in Android 3.0 included:</p> +<ul> +<li>Deprecation of navigation hardware keys (Back, Menu, Search, Home) in favor of handling navigation + via virtual controls (Back, Home, Recents).</li> +<li>Robust pattern for the use of menus in action bars.</li> +</ul> +<p>Android 4.0 brings these changes for tablets to the phone platform.</p> + +<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"> + +<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 +fit in the action bar or aren't important enough to be displayed at the top level appear in the +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"> + + <img src="{@docRoot}design/media/compatibility_virtual_nav.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<h4>Phones with physical navigation keys</h4> +<p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at +the bottom of the screen. Instead, the action overflow is available from the menu hardware key. The +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"> + + <img src="{@docRoot}design/media/compatibility_physical_buttons.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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 +controls, an action overflow control appears at the right side of the virtual navigation bar. You +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"> + + <img src="{@docRoot}design/media/compatibility_legacy_apps.png"> + + </div> +</div> diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd new file mode 100644 index 0000000..9868df2 --- /dev/null +++ b/docs/html/design/patterns/gestures.jd @@ -0,0 +1,115 @@ +page.title=Gestures +@jd:body + +<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="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</h4> +<p>Scrolls overflowing content, or navigates between views in the same hierarchy.</p> + +<ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>Press, move, lift</p></li> +</ul> + + </div> +</div> + + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/gesture_drag.png"> + +<h4>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>Zooms into content. 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_pinchopen.png"> + +<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> + + +<div class="layout-content-row"> + <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/index.jd b/docs/html/design/patterns/index.jd new file mode 100644 index 0000000..732e4db --- /dev/null +++ b/docs/html/design/patterns/index.jd @@ -0,0 +1,29 @@ +page.title=Patterns +header.justLinks=1 +footer.hide=1 +@jd:body + +<style> +#landing-graphic-container { + position: relative; +} + +#text-overlay { + position: absolute; + left: 10px; + top: 492px; + width: 200px; +} +</style> + +<div id="landing-graphic-container"> + <div id="text-overlay"> + Design apps that behave in a consistent, predictable fashion. + <br><br> + <a href="{@docRoot}design/patterns/new-4-0.html" class="landing-page-link">New in Android 4.0</a> + </div> + + <a href="{@docRoot}design/patterns/new-4-0.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 new file mode 100644 index 0000000..0e63e32 --- /dev/null +++ b/docs/html/design/patterns/multi-pane-layouts.jd @@ -0,0 +1,110 @@ +page.title=Multi-pane Layouts +@jd:body + +<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 have the same functionality regardless of orientation. If you use a compound view in +one orientation, don't 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. +Provide an <em>expand</em> control that allows the user to bring the left pane content back to its original +width and vice versa.</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>After rotating the device, show the right pane in fullscreen view. Use the Up icon in the action bar +to show the left panel and allow navigation to a different email. Hide the left panel by touching +the content in the detail panel.</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 provide functional parity after the screen orientation + changes.</p> +</li> +</ul> diff --git a/docs/html/design/patterns/navigation.jd b/docs/html/design/patterns/navigation.jd new file mode 100644 index 0000000..7e288ae --- /dev/null +++ b/docs/html/design/patterns/navigation.jd @@ -0,0 +1,204 @@ +page.title=Navigation with Back and Up +@jd:body + +<p>Consistent navigation is an essential component of the overall user experience. Few things frustrate +users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0 +introduced significant changes to the global navigation behavior. Thoughtfully following the +guidelines for Back and Up will make your app's navigation predictable and reliable for your users.</p> +<p>Android 2.3 and earlier relied upon the system <em>Back</em> button for supporting navigation within an +app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared: +the <em>Up</em> button, consisting of the app icon and a left-point caret.</p> + +<img src="{@docRoot}design/media/navigation_with_back_and_up.png"> + +<h2 id="up-vs-back">Up vs. Back</h2> + +<p>The Up button is used to navigate within an app based on the hierarchical relationships +between screens. For instance, if screen A displays a list of items, and selecting an item leads to +screen B (which presents that item in more detail), then screen B should offer an Up button that +returns to screen A.</p> +<p>If a screen is the topmost one in an app (that is, the app's home), it should not present an Up +button.</p> + +<p>The system Back button is used to navigate, in reverse chronological order, through the history +of screens the user has recently worked with. It is generally based on the temporal relationships +between screens, rather than the app's hierarchy.</p> + +<p>When the previously viewed screen is also the hierarchical parent of the current screen, pressing +the Back button has the same result as pressing an Up button—this is a common +occurrence. However, unlike the Up button, which ensures the user remains within your app, the Back +button can return the user to the Home screen, or even to a different app.</p> + +<img src="{@docRoot}design/media/navigation_up_vs_back_gmail.png"> + +<p>The Back button also supports a few behaviors not directly tied to screen-to-screen navigation: +</p> +<ul> +<li>Dismisses floating windows (dialogs, popups)</li> +<li>Dismisses contextual action bars, and removes the highlight from the selected items</li> +<li>Hides the onscreen keyboard (IME)</li> +</ul> +<h2 id="within-app">Navigation Within Your App</h2> + +<h4>Navigating to screens with multiple entry points</h4> +<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached +from multiple entry points—such as a settings screen that can be reached from any other screen +in your app. In this case, the Up button should choose to return to the referring screen, behaving +identically to Back.</p> +<h4>Changing view within a screen</h4> +<p>Changing view options for a screen does not change the behavior of Up or Back: the screen is still +in the same place within the app's hierarchy, and no new navigation history is created.</p> +<p>Examples of such view changes are:</p> +<ul> +<li>Switching views using tabs and/or left-and-right swipes</li> +<li>Switching views using a dropdown (aka collapsed tabs)</li> +<li>Filtering a list</li> +<li>Sorting a list</li> +<li>Changing display characteristics (such as zooming)</li> +</ul> +<h4>Navigating between sibling screens</h4> +<p>When your app supports navigation from a list of items to a detail view of one of those items, it's +often desirable to support direction navigation from that item to another one which precedes or +follows it in the list. For example, in Gmail, it's easy to swipe left or right from a conversation +to view a newer or older one in the same Inbox. Just as when changing view within a screen, such +navigation does not change the behavior of Up or Back.</p> + +<img src="{@docRoot}design/media/navigation_between_siblings_gmail.png"> + +<p>However, a notable exception to this occurs when browsing between related detail views not tied +together by the referring list—for example, when browsing in the Play Store between apps from +the same developer, or albums by the same artist. In these cases, following each link does create +history, causing the Back button to step through each previously viewed screen. Up should continue +to bypass these related screens and navigate to the most recently viewed container screen.</p> + +<img src="{@docRoot}design/media/navigation_between_siblings_market1.png"> + +<p>You have the ability to make the Up behavior even smarter based on your knowledge of detail +view. Extending the Play Store example from above, imagine the user has navigated from the last +Book viewed to the details for the Movie adaptation. In that case, Up can return to a container +(Movies) which the user hasn't previously navigated through.</p> + +<img src="{@docRoot}design/media/navigation_between_siblings_market2.png"> + +<h2 id="into-your-app">Navigation into Your App via Home Screen Widgets and Notifications</h2> + +<p>You can use Home screen widgets or notifications to help your users navigate directly to screens +deep within your app's hierarchy. For example, Gmail's Inbox widget and new message notification can +both bypass the Inbox screen, taking the user directly to a conversation view.</p> + +<p>For both of these cases, handle the Up button as follows:</p> + +<ul> +<li><em>If the destination screen is typically reached from one particular screen within your +app</em>, Up should navigate to that screen.</li> +<li><em>Otherwise</em>, Up should navigate to the topmost ("Home") screen of your app.</li> +</ul> + +<p>In the case of the Back button, you should make navigation more predictable by inserting into the +task's back stack the complete upward navigation path to the app's topmost screen. This allows users +who've forgotten how they entered your app to navigate to the app's topmost screen before +exiting.</p> + +<p>As an example, Gmail's Home screen widget has a button for diving directly to its compose +screen. Up or Back from the compose screen would take the user to the Inbox, and from there the +Back button continues to Home.</p> + +<img src="{@docRoot}design/media/navigation_from_outside_back.png"> + +<h4>Indirect notifications</h4> + +<p>When your app needs to present information about multiple events simultaneously, it can use a +single notification that directs the user to an interstitial screen. This screen summarizes these +events, and provides paths for the user to dive deeply into the app. Notifications of this style are +called <em>indirect notifications</em>.</p> + +<p>Unlike standard (direct) notifications, pressing Back from an indirect notification's +interstitial screen returns the user to the point the notification was triggered from—no +additional screens are inserted into the back stack. Once the user proceeds into the app from its +interstitial screen, Up and Back behave as for standard notifications, as described above: +navigating within the app rather than returning to the interstitial.</p> + +<p>For example, suppose a user in Gmail receives an indirect notification from Calendar. Touching +this notification opens the interstitial screen, which displays reminders for several different +events. Touching Back from the interstitial returns the user to Gmail. Touching on a particular +event takes the user away from the interstitial and into the full Calendar app to display details of +the event. From the event details, Up and Back navigate to the top-level view of Calendar.</p> + +<img src="{@docRoot}design/media/navigation_indirect_notification.png"> + +<h4>Pop-up notifications</h4> + +<p><em>Pop-up notifications</em> bypass the notification drawer, instead appearing directly in +front of the user. They are rarely used, and <strong>should be reserved for occasions where a timely +response is required and the interruption of the user's context is necessary</strong>. For example, +Talk uses this style to alert the user of an invitation from a friend to join a video chat, as this +invitation will automatically expire after a few seconds.</p> + +<p>In terms of navigation behavior, pop-up notifications closely follow the behavior of an indirect +notification's interstitial screen. Back dismisses the pop-up notification. If the user navigates +from the pop-up into the notifying app, Up and Back follow the rules for standard notifications, +navigating within the app.</p> + +<img src="{@docRoot}design/media/navigation_popup_notification.png"> + +<h2 id="between-apps">Navigation Between Apps</h2> + +<p>One of the fundamental strengths of the Android system is the ability for apps to activate each +other, giving the user the ability to navigate directly from one app into another. For example, an +app that needs to capture a photo can activate the Camera app, which will return the photo +to the referring app. This is a tremendous benefit to both the developer, who can easily leverage +code from other apps, and the user, who enjoys a consistent experience for commonly performed +actions.</p> + +<p>To understand app-to-app navigation, it's important to understand the Android framework behavior +discussed below.</p> + +<h4>Activities, tasks, and intents</h4> + +<p>In Android, an <strong>activity</strong> is an application component that defines a screen of +information and all of the associated actions the user can perform. Your app is a collection of +activities, consisting of both the activities you create and those you re-use from other apps.</p> + +<p>A <strong>task</strong> is the sequence of activities a user follows to accomplish a goal. A +single task can make use of activities from just one app, or may draw on activities from a number +of different apps.</p> + +<p>An <strong>intent</strong> is a mechanism for one app to signal it would like another +app's assistance in performing an action. An app's activities can indicate which intents +they can respond to. For common intents such as "Share", the user may have many apps installed +that can fulfill that request.</p> + +<h4>Example: navigating between apps to support sharing</h4> + +<p>To understand how activities, tasks, and intents work together, consider how one app allows users +to share content by using another app. For example, launching the Play Store app from Home begins +new Task A (see figure below). After navigating through the Play Store and touching a promoted book +to see its details, the user remains in the same task, extending it by adding activities. Triggering +the Share action prompts the user with a dialog listing each of the activities (from different apps) +which have registered to handle the Share intent.</p> + +<img src="{@docRoot}design/media/navigation_between_apps_inward.png"> + +<p>When the user elects to share via Gmail, Gmail's compose activity is added as a continuation of +Task A—no new task is created. If Gmail had its own task running in the background, it would +be unaffected.</p> + +<p>From the compose activity, sending the message or touching the Back button returns the user to +the book details activity. Subsequent touches of Back continue to navigate back through the Play +Store, ultimately arriving at Home.</p> + +<img src="{@docRoot}design/media/navigation_between_apps_back.png"> + +<p>However, by touching Up from the compose activity, the user indicates a desire to remain within +Gmail. Gmail's conversation list activity appears, and a new Task B is created for it. New tasks are +always rooted to Home, so touching Back from the conversation list returns there.</p> + +<img src="{@docRoot}design/media/navigation_between_apps_up.png"> + +<p>Task A persists in the background, and the user may return to it later (for example, via the +Recents screen). If Gmail already had its own task running in the background, it would be replaced +with Task B—the prior context is abandoned in favor of the user's new goal.</p> + +<p>When your app registers to handle intents with an activity deep within the app's hierarchy, +refer to <a href="#into-your-app">Navigation into Your App via Home Screen Widgets and +Notifications</a> for guidance on how to specify Up navigation.</p> diff --git a/docs/html/design/patterns/new-4-0.jd b/docs/html/design/patterns/new-4-0.jd new file mode 100644 index 0000000..91ebba7 --- /dev/null +++ b/docs/html/design/patterns/new-4-0.jd @@ -0,0 +1,71 @@ +page.title=New in Android 4.0 +@jd:body + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>Navigation bar</h4> +<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 +<a href="{@docRoot}design/patterns/compatibility.html">Compatibility</a> 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"> + + <img src="{@docRoot}design/media/whats_new_nav_bar.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>Action bar</h4> +<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"> + + <img src="{@docRoot}design/media/whats_new_action_bar.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>Multi-pane layouts</h4> +<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"> + + <img src="{@docRoot}design/media/whats_new_multipanel.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>Selection</h4> +<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"> + + <img src="{@docRoot}design/media/whats_new_multiselect.png"> + + </div> +</div> diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd new file mode 100644 index 0000000..ad88a01 --- /dev/null +++ b/docs/html/design/patterns/notifications.jd @@ -0,0 +1,236 @@ +page.title=Notifications +@jd:body + +<p>The notification system allows your app to keep the user informed about important events, such as +new messages in a chat app or a calendar event.</p> +<p>To create an app that feels streamlined, pleasant, and respectful, it is important to design your +notifications carefully. Notifications embody your app's voice, and contribute to your app's +personality. Unwanted or unimportant notifications can annoy the user, so use them judiciously.</p> +<h4>When to display a notification</h4> +<p>To create an application that people love, it's important to recognize that the user's attention and +focus is a resource that must be protected. To use an analogy that might resonate with software +developers, the user is not a method that can be invoked to return a value. The user's focus is a +resource more akin to a thread, and creating a notification momentarily blocks the user thread as +they process and then dismiss the interruptive notification.</p> +<p>Android's notification system has been designed to quickly inform users of events while they focus +on a task, but it is nonetheless still important to be conscientious when deciding to create a +notification.</p> +<p>While well behaved apps generally only speak when spoken to, there are some limited cases where an +app actually should interrupt the user with an unprompted notification.</p> +<p>Notifications should be used primarily for <strong>time sensitive events</strong>, and especially if these +synchronous events <strong>involve other people</strong>. For instance, an incoming chat is a real time and +synchronous form of communication: there is another user actively waiting on you to respond. +Calendar events are another good example of when to use a notification and grab the user's +attention, because the event is imminent, and calendar events often involve other people.</p> + +<img src="{@docRoot}design/media/notifications_pattern_real_time_people.png"> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>When not to display a notification</h4> +<p>There are however many other cases where notifications should not be used:</p> +<ul> +<li> +<p>Don't notify the user of information that is not directed specifically at them, or information +that is not truly time sensitive. For instance the asynchronous and undirected updates flowing +through a social network do not warrant a real time interruption.</p> +</li> +<li> +<p>Don't create a notification if the relevant new information is currently on screen. Instead, use +the UI of the application itself to notify the user of new information directly in context. For +instance, a chat application should not create system notifications while the user is actively +chatting with another user.</p> +</li> +<li> +<p>Don't interrupt the user for low level technical operations, like saving or syncing information, +or updating an application, if it is possible for the system to simply take care of itself without +involving the user.</p> +</li> +<li> +<p>Don't interrupt the user to inform them of an error if it is possible for the application to +quickly recover from the error on its own without the user taking any action.</p> +</li> +<li> +<p>Don't use notifications for services that the user cannot manually start or stop.</p> +</li> +<li> +<p>Don't create superfluous notifications just to get your brand in front of users. Such +notifications will only frustrate and likely alienate your audience. The best way to provide the +user with a small amount of updated information and to keep them engaged with your application is to +develop a widget that they can choose to place on their home screen.</p> +</li> +</ul> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_social_fail.png"> + + </div> +</div> + +<h2 id="design-guidelines">Design Guidelines</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_anatomy.png"> + + </div> + <div class="layout-content-col span-6"> + +<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> +<p>Remember to include the app icon as a secondary icon in the notification, so that the user can +still identify which app posted it.</p> + + </div> +</div> + +<h4>Navigate to the right place</h4> +<p>When the user touches a notification, be open your app to the place where the user can consume and +act upon the data referenced in the notification. In most cases this will be the detail view of a +single data item (e.g. a message), but it might also be a summary view if the notification is +stacked (see <em>Stacked notifications</em> below) and references multiple items. If in any of those cases +the user is taken to a hierarchy level below your app's top-level, insert navigation into your app's +back stack to allow them to navigate to your app's top level using the system back key. For more +information, see the chapter on <em>System-to-app navigation</em> in the +<a href="{@docRoot}design/patterns/navigation.html">Navigation</a> design pattern.</p> +<h4>Timestamps for time sensitive events</h4> +<p>By default, standard Android notifications include a timestamp in the upper right corner. Consider +whether the timestamp is valuable in the context of your notification. If the timestamp is not +valuable, consider if the event is important enough to warrant grabbing the user's attention with a +notification. If the notification is important enough, decide if you would like to opt out of +displaying the timestamp.</p> +<p>Include a timestamp if the user likely needs to know how long ago the notification occurred. Good +candidates for timestamps include communication notifications (email, messaging, chat, voicemail) +where the user may need the timestamp information to understand the context of a message or to +tailor a response.</p> +<h4>Stack your notifications</h4> +<p>If your app creates a notification while another of the same type is still pending, avoid creating +an altogether new notification object. Instead, stack the notification.</p> +<p>A stacked notification builds a summary description and allows the user to understand how many +notifications of a particular kind are pending.</p> +<p><strong>Don't</strong>:</p> + +<img src="{@docRoot}design/media/notifications_pattern_additional_fail.png"> + +<p><strong>Do</strong>:</p> + +<img src="{@docRoot}design/media/notifications_pattern_additional_win.png"> + +<p>If you keep the summary and detail information on different screens, a stacked notification may need +to open to a different place in the app than a single notification.</p> +<p>For example, a single email notification should always open to the content of the email, whereas a +stacked email notification opens to the Inbox view.</p> +<h4>Clean up after yourself</h4> +<p>Just like calendar events, some notifications alert the user to an event that happens at a +particular point in time. After that moment has passed, the notification is likely not important to +the user anymore, and you should consider removing it automatically. The same is true for active +chat conversations or voicemail messages the user has listened to, users should not have to manually +dismiss notifications independently from taking action on them.</p> + +<div class="vspace size-1"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>Provide a peek into your notification</h4> +<p>You can provide a short preview of your notification's content by providing optional ticker text. +The ticker text is shown for a short amount of time when the notification enters the system and then +hides automatically.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_phone_ticker.png"> + + </div> +</div> + +<h4>Make notifications optional</h4> +<p>Users should always be in control of notifications. Allow the user to silence the notifications from +your app by adding a notification settings item to your application settings.</p> +<h4>Use distinct icons</h4> +<p>By glancing at the notification area, the user should be able to discern what notification types are +currently pending.</p> +<p><strong>Do</strong>:</p> +<ul> +<li>Look at the notification icons the Android apps already provide and create notification icons for + your app that are sufficiently distinct in appearance.</li> +</ul> +<p><strong>Don't</strong>:</p> +<ul> +<li>Use color to distinguish your app from others. Notification icons should generally be monochrome.</li> +</ul> + +<h2 id="interacting-with-notifications">Interacting With Notifications</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_phone_icons.png"> + + </div> + <div class="layout-content-col span-6"> + +<p>Notifications are indicated by icons in the notification area and can be accessed by opening the +notification drawer.</p> +<p>Inside the drawer, notifications are chronologically sorted with the latest one on top. Touching a +notification opens the associated app to detailed content matching the notification. Swiping left or +right on a notification removes it from the drawer.</p> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<p>On tablets, the notification area is integrated with the system bar at the bottom of the screen. The +notification drawer is opened by touching anywhere inside the notification area.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_tablet.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png"> + + </div> + <div class="layout-content-col span-6"> + +<h4>Ongoing notifications</h4> +<p>Ongoing notifications keep users informed about an ongoing process in the background. For example, +music players announce the currently playing track in the notification system and continue to do so +until the user stops the playback. They can also be used to show the user feedback for longer tasks +like downloading a file, or encoding a video. Ongoing notifications cannot be manually removed from +the notification drawer.</p> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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 to the user taking an action inside of your app. +For instance, dialogs can be used to confirm that the user understands the severity of an action, +and toasts can echo back that an action has been successfully taken.</p> + + </div> +</div> + +<div class="vspace size-1"> </div> + +<img src="{@docRoot}design/media/notifications_pattern_dialog_toast.png"> diff --git a/docs/html/design/patterns/pure-android.jd b/docs/html/design/patterns/pure-android.jd new file mode 100644 index 0000000..77813c0 --- /dev/null +++ b/docs/html/design/patterns/pure-android.jd @@ -0,0 +1,164 @@ +page.title=Pure Android +@jd:body + +<p>Most developers want to distribute their apps on multiple platforms. As you plan your app for +Android, keep in mind that different platforms play by different rules and conventions. Design +decisions that make perfect sense on one platform will look and feel misplaced in the context of a +different platform. While a "design once, ship anywhere" approach might save you time up-front, you +run the very real risk of creating inconsistent apps that alienate users. Consider the following +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"> + +<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 +distinctive fashion. For example, some platforms advocate rounded corners for their buttons, others +use gradients in their title bars. In some cases, elements may have the same purpose, but are +designed to work a bit differently.</p> +<p>As you build your app for Android, don't carry over themed UI elements from other platforms and +don't mimic their specific behaviors. Review the +<a href="{@docRoot}design/building-blocks/index.html">Building Blocks</a> +section in this styleguide to learn about Android's most important UI elements +and the way they look in the system default themes. Also examine Android's platform apps to get a +sense of how elements are applied in the context of an app. If you want to customize the theme of UI +elements, customize carefully according to your specific branding - and not according to the +conventions of a different platform.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/migrating_ui_elements.png"> + <div class="figure-caption"> + Sampling of UI elements from Android, iOS and Windows Phone 7. + </div> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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 +document or deleting.</p> +<p>As you are migrating your app to Android, please swap out platform-specific icons with their Android +counterparts.</p> +<p>You can find a wide variety of icons for use in your app on the +<a href="{@docRoot}design/downloads/index.html">Downloads</a> page.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/migrating_icons.png"> + <div class="figure-caption"> + Sampling of icons from Android, iOS and Windows Phone 7. + </div> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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, +Android's tabs for view control are shown in action bars at the top of the screen instead. In +addition, Android apps may use a bottom bar to display actions on a split action bar.</p> +<p>You should follow this guideline to create a consistent experience with other apps on the Android +platform and to avoid confusion between actions and view switching on Android.</p> +<p>For more information on how to properly use action bars for view control, see +<a href="{@docRoot}design/patterns/actionbar.html">Action Bars</a>.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/migrating_ios_dialers.png"> + <div class="figure-caption"> + Android dialer with tabs in an action bar vs. bottom tabs in iOS. + </div> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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 +example, you may want to share the content that your app created via a social network or messaging +app, or view the content of a weblink in a browser. Don't use hard-coded, explicit links to +particular apps to achieve this. Instead, use Android's intent API to launch an activity chooser +which lists all applications that are set up to handle the particular request. This lets the user +complete the task with their preferred app. For sharing in particular, consider using the <em>Share +Action Provider</em> in your action bar to provide faster access to the user's most recently used +sharing target.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/migrating_intents.png"> + <div class="figure-caption"> + Link to other apps with the activity chooser or use the <em>Share Action Provider</em> in the + action bar. + </div> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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 +application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical +navigation and the navigation bar's back button for temporal navigation. For more information, +please review the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern.</p> +<p>Follow this guideline to provide a consistent navigation experience across the platform.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/migrating_ios_galleries.png"> + <div class="figure-caption"> + Android action bar with up caret vs. iOS labeled "Back" button. + </div> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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 +the user to drill deeper into additional content.</p> +<p>Android does not use such indicators on drill-down line items. Avoid them to stay consistent with +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"> + + <img src="{@docRoot}design/media/migrating_ios_settings.png"> + <div class="figure-caption"> + Android settings without right-pointing carets in line items vs. iOS settings. + </div> + + </div> +</div> + +<h2 id="device-independence">Device Independence</h2> + +<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets +for different screen sizes and densities and make use of concepts such as multi-pane layouts to +appropriately scale your UI on different device form factors.</p> +<p>For more information, read <a href="{@docRoot}design/style/devices-displays.html">Devices and Displays</a> as +well as <a href="{@docRoot}design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a> in this design guide.</p> diff --git a/docs/html/design/patterns/selection.jd b/docs/html/design/patterns/selection.jd new file mode 100644 index 0000000..e3ee90e --- /dev/null +++ b/docs/html/design/patterns/selection.jd @@ -0,0 +1,100 @@ +page.title=Selection +@jd:body + +<p>Android 3.0 introduced the <em>long press</em> gesture—that is, a touch that's held in the same +position for a moment—as 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 (CAB)</h4> +<p>The selection 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> + +<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 new file mode 100644 index 0000000..3b28b84 --- /dev/null +++ b/docs/html/design/patterns/settings.jd @@ -0,0 +1,689 @@ +page.title=Settings +@jd:body + +<p>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 activity + </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 activity + </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>
\ No newline at end of file diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd new file mode 100644 index 0000000..95d65dd --- /dev/null +++ b/docs/html/design/patterns/swipe-views.jd @@ -0,0 +1,74 @@ +page.title=Swipe Views +@jd:body + +<p>Efficient navigation is one of the cornerstones of a well-designed app. While apps are generally +built in a hierarchical fashion, there are instances where horizontal navigation can flatten +vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views +allow the user to efficiently move from item to item using a simple gesture and thereby make +browsing and consuming data a more fluent experience.</p> +<h2 id="detail-views">Swiping Between Detail Views</h2> + +<p>An app's data is often organized in a master/detail relationship: The user can view a list of +related data items, such as images, chats, or emails, and then pick one of the items to see the +detail contents in a separate screen.</p> + +<img src="{@docRoot}design/media/swipe_views.png"> +<div class="figure-caption"> + Master (left) and detail (right) views. +</div> + +<p>On a phone, since the master and detail are on separate screens, this typically requires the user to +jump back and forth between the list and the detail view, aka "pogo-sticking".</p> +<p>In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by +using the swipe gesture to navigate to the next/previous detail view.</p> + +<img src="{@docRoot}design/media/swipe_views2.png"> +<div class="figure-caption"> + Navigating between consecutive Email messages using the swipe gesture. +</div> + +<h2 id="between-tabs">Swiping Between Tabs</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + + <div class="framed-galaxynexus-port-span-5"> + <video class="play-on-hover" autoplay> + <source src="{@docRoot}design/media/swipe_tabs.mp4" type="video/mp4"> + <source src="{@docRoot}design/media/swipe_tabs.webm" type="video/webm"> + <source src="{@docRoot}design/media/swipe_tabs.ogv" type="video/ogg"> + </video> + </div> + <div class="figure-caption"> + People app with swipe gesture navigation between top-level screens. + <div class="video-instructions"> </div> + </div> + + </div> + <div class="layout-content-col span-8"> + +<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p> +<div class="vspace size-2"> </div> + +<h2 id="checklist">Checklist</h2> + +<ul> +<li> +<p>Use swipe to quickly navigate between detail views or tabs.</p> +</li> +<li> +<p>Transition between the views as the user performs the swipe gesture. Do not wait for the + gesture to complete and then transition between views.</p> +</li> +<li> +<p>If you used buttons in the past for previous/next navigation, replace them with + the swipe gesture.</p> +</li> +<li> +<p>Consider adding contextual information in your detail view that informs the user about the + relative list position of the currently visible item.</p> +</li> +</ul> + + </div> +</div> diff --git a/docs/html/design/style/color.jd b/docs/html/design/style/color.jd new file mode 100644 index 0000000..e25f7c6 --- /dev/null +++ b/docs/html/design/style/color.jd @@ -0,0 +1,134 @@ +page.title=Color +@jd:body + +<style> + .color-row { + width: 740px; + margin-left: 10px !important; + margin-right: 10px !important; + + 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> + +<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 href="https://dl-ssl.google.com/android/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 new file mode 100644 index 0000000..e5fe26d --- /dev/null +++ b/docs/html/design/style/devices-displays.jd @@ -0,0 +1,45 @@ +page.title=Devices and Displays +@jd:body + +<p>Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and +form factors. By taking advantage of Android's flexible layout system, you can create apps that +gracefully scale from large tablets to smaller phones.</p> + +<img src="{@docRoot}design/media/devices_displays_main.png"> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-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"> + +<h4>Optimize layouts</h4> +<p>On larger devices, take advantage of extra screen real estate. Create compound views that combine +multiple views to reveal more content and ease navigation.</p> + + </div> + <div class="layout-content-col span-4"> + +<h4>Assets for all</h4> +<p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to +ensure that your app looks great on any device.</p> + + </div> +</div> + +<div style="text-align:center"> + <img src="{@docRoot}design/media/devices_displays_density.png"> +</div> + +<h4>Strategies</h4> +<p>So where do you begin when designing for multiple screens? One approach is to work in the base +standard (medium size, <acronym title="Medium density (160 dpi)">MDPI</acronym>) and scale it up or +down for the other buckets. Another approach is to start with the device with the largest screen +size, and then scale down and figure out the UI compromises you'll need to make on smaller screens.</p> +<p>For more detailed information on this topic, please visit <a href="http://developer.android.com/guide/practices/screens_support.html">Supporting Multiple +Screens</a>.</p> diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd new file mode 100644 index 0000000..775e45d --- /dev/null +++ b/docs/html/design/style/iconography.jd @@ -0,0 +1,340 @@ +page.title=Iconography +@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> + + + +<h2 id="launcher">Launcher</h2> + +<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> + +<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 href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.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> + +<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> + +<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> diff --git a/docs/html/design/style/index.jd b/docs/html/design/style/index.jd new file mode 100644 index 0000000..d346aea --- /dev/null +++ b/docs/html/design/style/index.jd @@ -0,0 +1,29 @@ +page.title=Style +header.justLinks=1 +footer.hide=1 +@jd:body + +<style> +#landing-graphic-container { + position: relative; +} + +#text-overlay { + position: absolute; + left: 10px; + top: 402px; + width: 220px; +} +</style> + +<div id="landing-graphic-container"> + <div id="text-overlay"> + Build visually compelling apps that look great on any device. + <br><br> + <a href="{@docRoot}design/style/devices-displays.html" class="landing-page-link">Devices and Displays</a> + </div> + + <a href="{@docRoot}design/style/devices-displays.html"> + <img src="{@docRoot}design/media/design_elements_landing.png"> + </a> +</div> diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd new file mode 100644 index 0000000..e2b9ab5 --- /dev/null +++ b/docs/html/design/style/metrics-grids.jd @@ -0,0 +1,61 @@ +page.title=Metrics and Grids +@jd:body + +<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. The size buckets are <em>handset</em> (smaller than +600<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi +screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp). 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>, and <acronym title +="Extra-high density (320 dpi)">XHDPI</acronym>. 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> + +<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 new file mode 100644 index 0000000..d4a6acf --- /dev/null +++ b/docs/html/design/style/themes.jd @@ -0,0 +1,42 @@ +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> + + <img src="{@docRoot}design/media/themes_holo_inverse.png"> + <div class="figure-caption"> + Talk in Holo Light with dark action bar. + </div> + + </div> + <div class="layout-content-col span-7"> + +<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 three system themes that you can choose from when building apps for Ice Cream Sandwich:</p> +<ul> +<li>Holo Light</li> +<li>Holo Dark</li> +<li>Holo Light with dark action bars</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> +</div> diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd new file mode 100644 index 0000000..5fe72a7 --- /dev/null +++ b/docs/html/design/style/touch-feedback.jd @@ -0,0 +1,67 @@ +page.title=Touch Feedback +@jd:body + +<div class="layout-content-row" style="margin-bottom: -100px"> + <div class="layout-content-col span-7"> + +<p>Use color and illumination to respond to touches, reinforce the resulting behaviors of gestures, and +indicate what actions are enabled and disabled.</p> +<p>Whenever a user touches an actionable area in your app, provide a visual response. This lets the +user know which object was touched and that your app is "listening".</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/touch_feedback_reaction_response.png"> + + </div> +</div> + +<h4>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-4"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + +<h4>Communication</h4> +<p>When your objects react to more complex gestures, help users understand what the outcome of the +operation will be. For example, in Recents, when you start swiping a thumbnail left or right, it +starts to dim. This helps the user understand that swiping will cause the item to be removed.</p> + + </div> + <div class="layout-content-col span-9"> + + <img src="{@docRoot}design/media/touch_feedback_manipulation.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/touch_feedback_communication.png"> + + </div> + <div class="layout-content-col span-6"> + +<div class="vspace size-3"> </div> + +<h4>Boundaries</h4> +<p>When users try to scroll past the upper or lower limit of a scrollable area, communicate the +boundary with a visual cue. For example, if a user attempts to scroll past the first home screen +panel, the screen content tilts to the right to indicate that further navigation in this direction +is not possible. Many of Android's scrollable UI widgets (e.g. lists or grid lists) already have +support for boundary feedback built in. If you are building custom, keep boundary feedback in mind +and provide it from within your app.</p> + + </div> +</div> diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd new file mode 100644 index 0000000..db2fb5f --- /dev/null +++ b/docs/html/design/style/typography.jd @@ -0,0 +1,56 @@ +page.title=Typography +@jd:body + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/typography_main.png"> + + </div> + <div class="layout-content-col span-5"> + +<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 Roboto, created specifically for the requirements of UI +and high-resolution screens. The current TextView framework supports regular, bold, italic, and bold +italic weights by default.</p> + + <img src="{@docRoot}design/media/typography_alphas.png"> + +<p><a href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Download Roboto</a></p> +<p><a href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.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 new file mode 100644 index 0000000..919ea7a --- /dev/null +++ b/docs/html/design/style/writing.jd @@ -0,0 +1,278 @@ +page.title=Writing Style +@jd:body + +<p>When choosing words for your app:</p> +<ol> +<li> +<p><strong>Keep it brief.</strong> Be concise, simple and precise. Start with a 30 character limit (including + spaces), and don't use more unless absolutely necessary.</p> +</li> +<li> +<p><strong>Keep it simple.</strong> Pretend you're speaking to someone who's smart and competent, but doesn't + know technical jargon and may not speak English very well. Use short words, active verbs, and + common nouns.</p> +</li> +<li> +<p><strong>Be friendly.</strong> Use contractions. Talk directly to the reader using second person ("you"). If + your text doesn't read the way you'd say it in casual conversation, it's probably not the way + you should write it. Don't be abrupt or annoying and make the user feel safe, happy and + energized.</p> +</li> +<li> +<p><strong>Put the most important thing first.</strong> The first two words (around 11 characters, including + spaces) should include at least a taste of the most important information in the string. If they + don't, start over.</p> +</li> +<li> +<p><strong>Describe only what's necessary, and no more.</strong> Don't try to explain subtle differences. They + will be lost on most users.</p> +</li> +<li> +<p><strong>Avoid repetition.</strong> If a significant term gets repeated within a screen or block of text, find + a way to use it just once.</p> +</li> +</ol> + +<h2 id="examples">Examples</h2> + +<ol><li class="value-1"><strong>Keep it brief.</strong> From the setup wizard:</ol> + +<div class="layout-content-row"> + <div class="layout-content-col span-6 layout-with-list-item-margins"> + + <div class="do-dont-label bad">Too formal</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">Better</div> + + <table class="ui-table good"><tbody><tr><td> + Read the instructions that came with your phone. + </td></tr></tbody></table> + + </div> +</div> + +<div class="vspace size-1"> </div> + +<ol><li class="value-2"><strong>Keep it simple.</strong> From the Location settings screen:</ol> + +<div class="layout-content-row"> + <div class="layout-content-col span-6 layout-with-list-item-margins"> + + <div class="do-dont-label bad">Confusing</div> + + <table class="ui-table bad"> + <thead> + <tr> + <th> + Use GPS satellites + </th> + </tr> + </thead> + <tbody> + <tr> + <td> + When locating, accurate to street level. + </td> + </tr> + </tbody> + </table> + + </div> + <div class="layout-content-col span-6"> + + <div class="do-dont-label good">Better</div> + + <table class="ui-table good"> + <thead> + <tr> + <th> + GPS + </th> + </tr> + </thead> + <tbody> + <tr> + <td> + Let apps use satellites to pinpoint your location. + </td> + </tr> + </tbody> + </table> + + </div> +</div> + +<div class="vspace size-1"> </div> + +<ol><li class="value-3"><strong>Be friendly.</strong> Dialog that appears when an application +crashes:</ol> + +<div class="layout-content-row"> + <div class="layout-content-col span-6 layout-with-list-item-margins"> + + <div class="do-dont-label bad">Confusing and annoying—"Sorry" just rubs salt in the + wound.</div> + + <table class="ui-table bad"> + <thead> + <tr> + <th colspan="3"> + Sorry! + </th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="3"> + Activity MyAppActivity (in application MyApp) + is not responding. + </td> + </tr> + </tbody> + <tfoot> + <tr> + <td width="33%">Force close</td> + <td width="33%">Wait</td> + <td width="33%">Report</td> + </tr> + </tbody> + </table> + + </div> + <div class="layout-content-col span-6"> + + <div class="do-dont-label good">Shorter, more direct, no faux-apologetic title:<br><br></div> + + <table class="ui-table good"> + <thead> + <tr> + <th colspan="3"> + MyApp isn't responding. + </th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="3"> + Do you want to close it? + </td> + </tr> + </tbody> + <tfoot> + <tr> + <td width="33%">Wait</td> + <td width="33%">Report</td> + <td width="33%">Close</td> + </tr> + </tbody> + </table> + + </div> +</div> + +<div class="vspace size-1"> </div> + +<ol><li class="value-4"><strong>Put the most important thing first.</strong></ol> + +<div class="layout-content-row"> + <div class="layout-content-col span-6 layout-with-list-item-margins"> + + <div class="do-dont-label bad">Top news last</div> + + <table class="ui-table bad"><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">Top news first</div> + + <table class="ui-table good"><tbody><tr><td> + Larry Page and 77 others +1'd this. + </td></tr></tbody></table> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6 layout-with-list-item-margins"> + + <div class="do-dont-label bad">Task last</div> + + <table class="ui-table bad"><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">Task first</div> + + <table class="ui-table good"><tbody><tr><td> + To finish setup using Wi-Fi, touch Next. + </td></tr></tbody></table> + + </div> +</div> + +<div class="vspace size-1"> </div> + +<ol><li class="value-5"><strong>Describe only what's necessary, and no more.</strong></ol> + +<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> |
