diff options
189 files changed, 773 insertions, 381 deletions
diff --git a/docs/html/design/building-blocks/progress.jd b/docs/html/design/building-blocks/progress.jd index 60ad2cad346f..90732f49a357 100644 --- a/docs/html/design/building-blocks/progress.jd +++ b/docs/html/design/building-blocks/progress.jd @@ -54,14 +54,8 @@ page.tags="progressbar","download","network" <p>In this example, an activity circle (in Holo Light) is used in the Gmail application when a message is being loaded because it's not possible to determine how long it will take to download the email.</p> <p>When displaying an activity circle, do not include text to communicate what the app is doing. The moving circle alone provides sufficient feedback about the delay, and does so in an understated way that minimizes the impact.</p> <p> - <div class="layout-content-col span-3" style="margin-left:0"> - <div class="do-dont-label bad">Don't</div> - <img src="{@docRoot}design/media/progress_activity_dont.png"> - </div> - - <div class="layout-content-col span-3"> - <div class="do-dont-label good">Do</div> - <img src="{@docRoot}design/media/progress_activity_do.png"> + <div style="margin-left:0;margin-top:1em;"> + <img src="{@docRoot}design/media/progress_activity_do_dont.png"> </div> </p> </li> diff --git a/docs/html/design/building-blocks/scrolling.jd b/docs/html/design/building-blocks/scrolling.jd index 66999f9fc7cc..13b3b09fe28b 100644 --- a/docs/html/design/building-blocks/scrolling.jd +++ b/docs/html/design/building-blocks/scrolling.jd @@ -8,7 +8,7 @@ scrolling speed is proportional to the speed of the gesture.</p> <p>Appears during scrolling to indicate what portion of the content is currently in view.</p> -<div class="framed-galaxynexus-land-span-13"> +<div class="framed-nexus5-land-span-13"> <video class="play-on-hover" autoplay> <source src="{@docRoot}design/media/scroll_indicator.mp4" type="video/mp4"> <source src="{@docRoot}design/media/scroll_indicator.webm" type="video/webm"> @@ -26,7 +26,7 @@ to quickly navigate to the items that begin with a particular letter. With index 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"> +<div class="framed-nexus5-land-span-13"> <video class="play-on-hover" autoplay> <source src="{@docRoot}design/media/scroll_index.mp4" type="video/mp4"> <source src="{@docRoot}design/media/scroll_index.webm" type="video/webm"> diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd index 2bc90ab34d43..5a5da5d8ad97 100644 --- a/docs/html/design/building-blocks/tabs.jd +++ b/docs/html/design/building-blocks/tabs.jd @@ -35,7 +35,7 @@ to the next/previous view, swipe left or right.</p> </video> <div class="figure-caption"> Scrolling tabs in the Play Store app. - <div class="video-instructions"> </div> + <div class="video-instructions-image"> </div> </div> </div> @@ -55,14 +55,3 @@ to the next/previous view, swipe left or right.</p> <div class="figure-caption"> Tabs in the Google Play Movies 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/design_toc.cs b/docs/html/design/design_toc.cs index ff465bfbb520..4c2aab223079 100644 --- a/docs/html/design/design_toc.cs +++ b/docs/html/design/design_toc.cs @@ -19,6 +19,7 @@ <li><a href="<?cs var:toroot ?>design/style/typography.html">Typography</a></li> <li><a href="<?cs var:toroot ?>design/style/color.html">Color</a></li> <li><a href="<?cs var:toroot ?>design/style/iconography.html">Iconography</a></li> + <li><a href="<?cs var:toroot ?>design/style/branding.html">Your Branding</a></li> <li><a href="<?cs var:toroot ?>design/style/writing.html">Writing Style</a></li> </ul> </li> @@ -34,6 +35,7 @@ <li><a href="<?cs var:toroot ?>design/patterns/navigation-drawer.html">Navigation Drawer</a></li> <li><a href="<?cs var:toroot ?>design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> <li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/fullscreen.html">Full Screen</a></li> <li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li> <li><a href="<?cs var:toroot ?>design/patterns/confirming-acknowledging.html">Confirming & Acknowledging</a></li> <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li> diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd index 5d179a679a16..d514c14b923e 100644 --- a/docs/html/design/downloads/index.jd +++ b/docs/html/design/downloads/index.jd @@ -102,9 +102,9 @@ requirements of UI and high-resolution screens.</p> <p> <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto ZIP']);" - href="{@docRoot}downloads/design/roboto-1.100141.zip">Roboto</a> + href="{@docRoot}downloads/design/roboto-1.2.zip">Roboto</a> <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specemin Book']);" - href="{@docRoot}downloads/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a> + href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a> </p> </div> diff --git a/docs/html/design/get-started/ui-overview.jd b/docs/html/design/get-started/ui-overview.jd index bfb9ec9eaec4..5f4c40f51903 100644 --- a/docs/html/design/get-started/ui-overview.jd +++ b/docs/html/design/get-started/ui-overview.jd @@ -75,11 +75,6 @@ to allow the user to enjoy full screen content without distraction.</p> 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> @@ -101,7 +96,9 @@ notification opens the associated app. <a href="{@docRoot}design/patterns/notifi <img src="{@docRoot}design/media/notifications_dismiss.png"> -<p>Notifications can be expanded to uncover more details and relevant actions. When collapsed, 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.</p> +<p>Notifications can be expanded to uncover more details and relevant actions. When collapsed, 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.</p> <p>Swiping a notification right or left removes it from the notification drawer.</p> </div> @@ -114,34 +111,30 @@ notification opens the associated app. <a href="{@docRoot}design/patterns/notifi <div class="layout-content-row"> <div class="layout-content-col span-7"> - <img src="{@docRoot}design/media/ui_overview_app_ui.png"> + <img src="{@docRoot}design/media/app_structure_drawer.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> +<p>A typical Android app uses action bars, and many apps will include a navigation drawer.</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> +<h4>Action Bar</h4> +<p>The command and control center for your app. The action bar surfaces the most important actions + for the current view, and may include simple controls for switching between views.</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> +<h4>Navigation Drawer</h4> +<p>If your app's structure is more complex, the navigation drawer can display the main navigation + options. The navigation drawer expands from the left edge of the screen, overlaying the content + area but not the action bar.</p> +<p><a href="{@docRoot}design/patterns/navigation-drawer.html">More on the Navigation Drawer</a></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> diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd index 1e6b40c5876b..8f73d9ce0e85 100644 --- a/docs/html/design/index.jd +++ b/docs/html/design/index.jd @@ -10,9 +10,13 @@ footer.hide=1 #text-overlay { position: absolute; - left: 0; - top: 472px; - width: 280px; + left: 36px; + top: 42px; + width: 266px; + +} +#hero-image { + padding-left:68px; } </style> @@ -20,10 +24,11 @@ footer.hide=1 <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> + Want to know what <strong>Android 4.4 KitKat</strong> has for designers? See <a href="{@docRoot}design/patterns/new.html">New in Android</a>.<br><br> + <a href="/design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a> </div> - - <a href="{@docRoot}design/get-started/creative-vision.html"> - <img src="{@docRoot}design/media/index_landing_page.png"> + <a id="hero-image" href="/design/get-started/creative-vision.html"> + <img src="/design/media/index_landing_page.png"> </a> </div> + diff --git a/docs/html/design/media/accessibility_contentdesc.png b/docs/html/design/media/accessibility_contentdesc.png Binary files differindex 651571152ba8..c9064efce57f 100644 --- a/docs/html/design/media/accessibility_contentdesc.png +++ b/docs/html/design/media/accessibility_contentdesc.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 differindex 022288c8318a..c3248fc84021 100644 --- a/docs/html/design/media/action_bar_pattern_considerations.png +++ b/docs/html/design/media/action_bar_pattern_considerations.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 differindex 83a986bc3584..64e7b22194e9 100644 --- a/docs/html/design/media/action_bar_pattern_overview.png +++ 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 differindex 5b9a6567ef88..7fa721f298bb 100644 --- a/docs/html/design/media/action_bar_pattern_rotation.png +++ b/docs/html/design/media/action_bar_pattern_rotation.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 differindex 10660944d4c6..81fb5f5728d2 100644 --- a/docs/html/design/media/app_structure_book_detail_page_flip.png +++ b/docs/html/design/media/app_structure_book_detail_page_flip.png diff --git a/docs/html/design/media/app_structure_drawer.png b/docs/html/design/media/app_structure_drawer.png Binary files differindex 560e8341f32d..a0ea62076bb1 100644 --- a/docs/html/design/media/app_structure_drawer.png +++ b/docs/html/design/media/app_structure_drawer.png diff --git a/docs/html/design/media/app_structure_fixedtabs.png b/docs/html/design/media/app_structure_fixedtabs.png Binary files differindex 6d1c63b8217a..0f371970cc9a 100644 --- a/docs/html/design/media/app_structure_fixedtabs.png +++ 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 differindex a937533053c6..6fffb4550b83 100644 --- a/docs/html/design/media/app_structure_gallery_filmstrip.png +++ 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 differindex 33ae0920843b..bc641f760f2e 100644 --- a/docs/html/design/media/app_structure_gmail.png +++ 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 differindex 8f6f71ca523b..7afc2a94eb34 100644 --- a/docs/html/design/media/app_structure_gmail_swipe.png +++ 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 differindex 7ab0189e8855..ef09fee23b1d 100644 --- a/docs/html/design/media/app_structure_market.png +++ b/docs/html/design/media/app_structure_market.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 differindex de54e828612b..5eb145778815 100644 --- a/docs/html/design/media/app_structure_people_detail.png +++ 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 differindex 3c20436124da..16f729ac7dd5 100644 --- a/docs/html/design/media/app_structure_scrolltabs.png +++ 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 differindex 3b10cb98bd69..6a76977bc77b 100644 --- a/docs/html/design/media/app_structure_shortcut_on_item.png +++ b/docs/html/design/media/app_structure_shortcut_on_item.png diff --git a/docs/html/design/media/branding_googlemusic.png b/docs/html/design/media/branding_googlemusic.png Binary files differnew file mode 100644 index 000000000000..1e1df8b0b89a --- /dev/null +++ b/docs/html/design/media/branding_googlemusic.png diff --git a/docs/html/design/media/branding_launcher_icon.png b/docs/html/design/media/branding_launcher_icon.png Binary files differnew file mode 100644 index 000000000000..35ba5d61282a --- /dev/null +++ b/docs/html/design/media/branding_launcher_icon.png diff --git a/docs/html/design/media/branding_logo_icon_action_bar.png b/docs/html/design/media/branding_logo_icon_action_bar.png Binary files differnew file mode 100644 index 000000000000..f6ee89fd2afa --- /dev/null +++ b/docs/html/design/media/branding_logo_icon_action_bar.png diff --git a/docs/html/design/media/branding_wallet.png b/docs/html/design/media/branding_wallet.png Binary files differnew file mode 100644 index 000000000000..e1602b10bc00 --- /dev/null +++ b/docs/html/design/media/branding_wallet.png diff --git a/docs/html/design/media/building_blocks_landing.png b/docs/html/design/media/building_blocks_landing.png Binary files differindex 40ab0da9386a..1844b107b3a8 100644 --- a/docs/html/design/media/building_blocks_landing.png +++ b/docs/html/design/media/building_blocks_landing.png diff --git a/docs/html/design/media/buttons_default_small.png b/docs/html/design/media/buttons_default_small.png Binary files differindex 3e776ed24ea4..fa27ca583296 100644 --- a/docs/html/design/media/buttons_default_small.png +++ b/docs/html/design/media/buttons_default_small.png diff --git a/docs/html/design/media/calendar.mp4 b/docs/html/design/media/calendar.mp4 Binary files differnew file mode 100644 index 000000000000..cdd72d2b6dd9 --- /dev/null +++ b/docs/html/design/media/calendar.mp4 diff --git a/docs/html/design/media/calendar.ogv b/docs/html/design/media/calendar.ogv Binary files differnew file mode 100644 index 000000000000..efb23d21407f --- /dev/null +++ b/docs/html/design/media/calendar.ogv diff --git a/docs/html/design/media/calendar.webm b/docs/html/design/media/calendar.webm Binary files differnew file mode 100644 index 000000000000..9d7d9f266a34 --- /dev/null +++ b/docs/html/design/media/calendar.webm diff --git a/docs/html/design/media/confirm_ack_acknowledge.png b/docs/html/design/media/confirm_ack_acknowledge.png Binary files differindex b78eb14a3621..adf608f7ba2e 100644 --- a/docs/html/design/media/confirm_ack_acknowledge.png +++ b/docs/html/design/media/confirm_ack_acknowledge.png diff --git a/docs/html/design/media/confirm_ack_draft_deleted.png b/docs/html/design/media/confirm_ack_draft_deleted.png Binary files differindex f189db930c94..cf1cd6e7d2d9 100644 --- a/docs/html/design/media/confirm_ack_draft_deleted.png +++ b/docs/html/design/media/confirm_ack_draft_deleted.png diff --git a/docs/html/design/media/confirm_ack_ex_draftsave.png b/docs/html/design/media/confirm_ack_ex_draftsave.png Binary files differindex 473368d8b1be..636edc7d103f 100644 --- a/docs/html/design/media/confirm_ack_ex_draftsave.png +++ b/docs/html/design/media/confirm_ack_ex_draftsave.png diff --git a/docs/html/design/media/confirm_ack_ex_removeapp.png b/docs/html/design/media/confirm_ack_ex_removeapp.png Binary files differindex 0abacce1785e..49f2e5559e54 100644 --- a/docs/html/design/media/confirm_ack_ex_removeapp.png +++ b/docs/html/design/media/confirm_ack_ex_removeapp.png diff --git a/docs/html/design/media/creative_vision_main.png b/docs/html/design/media/creative_vision_main.png Binary files differindex 2b3bb2f80257..4db1fd5e5d29 100644 --- a/docs/html/design/media/creative_vision_main.png +++ 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 differindex d078cef340d4..3a70aea3a0b7 100644 --- a/docs/html/design/media/design_elements_landing.png +++ b/docs/html/design/media/design_elements_landing.png diff --git a/docs/html/design/media/devices_displays_density@2x.png b/docs/html/design/media/devices_displays_density@2x.png Binary files differindex 79a46b08c9d1..cdd45a88e238 100644 --- a/docs/html/design/media/devices_displays_density@2x.png +++ b/docs/html/design/media/devices_displays_density@2x.png diff --git a/docs/html/design/media/dialogs_examples.png b/docs/html/design/media/dialogs_examples.png Binary files differindex 981c5f377560..c136476c6ce0 100644 --- a/docs/html/design/media/dialogs_examples.png +++ 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 differindex b95266adab81..042715104718 100644 --- a/docs/html/design/media/dialogs_main.png +++ 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 differindex c7536f3f1896..6c98b1fc4cc4 100644 --- a/docs/html/design/media/dialogs_popups_example.png +++ 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 differindex cc0b81586bd3..b12778cd83bf 100644 --- a/docs/html/design/media/dialogs_toasts.png +++ b/docs/html/design/media/dialogs_toasts.png diff --git a/docs/html/design/media/documents-export-2013-10-29.zip b/docs/html/design/media/documents-export-2013-10-29.zip Binary files differnew file mode 100644 index 000000000000..d24a798d36c0 --- /dev/null +++ b/docs/html/design/media/documents-export-2013-10-29.zip diff --git a/docs/html/design/media/downloads_color_swatches.png b/docs/html/design/media/downloads_color_swatches.png Binary files differindex af2b24fd9b09..ed9b28d8e195 100644 --- a/docs/html/design/media/downloads_color_swatches.png +++ b/docs/html/design/media/downloads_color_swatches.png diff --git a/docs/html/design/media/downloads_stencils.png b/docs/html/design/media/downloads_stencils.png Binary files differindex 9b1a9feb0a10..71c6b0cfc677 100644 --- a/docs/html/design/media/downloads_stencils.png +++ b/docs/html/design/media/downloads_stencils.png diff --git a/docs/html/design/media/fullscreen_immersive_swipe_bottom.png b/docs/html/design/media/fullscreen_immersive_swipe_bottom.png Binary files differnew file mode 100644 index 000000000000..8dc232c91082 --- /dev/null +++ b/docs/html/design/media/fullscreen_immersive_swipe_bottom.png diff --git a/docs/html/design/media/fullscreen_immersive_swipe_top.png b/docs/html/design/media/fullscreen_immersive_swipe_top.png Binary files differnew file mode 100644 index 000000000000..5fbe2efa89f2 --- /dev/null +++ b/docs/html/design/media/fullscreen_immersive_swipe_top.png diff --git a/docs/html/design/media/fullscreen_landing.png b/docs/html/design/media/fullscreen_landing.png Binary files differnew file mode 100644 index 000000000000..d627936b8f2d --- /dev/null +++ b/docs/html/design/media/fullscreen_landing.png diff --git a/docs/html/design/media/fullscreen_leanback.png b/docs/html/design/media/fullscreen_leanback.png Binary files differnew file mode 100644 index 000000000000..568fe38935d8 --- /dev/null +++ b/docs/html/design/media/fullscreen_leanback.png diff --git a/docs/html/design/media/gesture_doubletouch.png b/docs/html/design/media/gesture_doubletouch.png Binary files differindex 4c68ae654626..7acae262abc3 100644 --- a/docs/html/design/media/gesture_doubletouch.png +++ b/docs/html/design/media/gesture_doubletouch.png diff --git a/docs/html/design/media/gesture_doubletouchdrag.png b/docs/html/design/media/gesture_doubletouchdrag.png Binary files differnew file mode 100644 index 000000000000..d2cef40803d7 --- /dev/null +++ b/docs/html/design/media/gesture_doubletouchdrag.png diff --git a/docs/html/design/media/gesture_drag.png b/docs/html/design/media/gesture_drag.png Binary files differindex cb0d72c0cb55..79549af80470 100644 --- a/docs/html/design/media/gesture_drag.png +++ 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 differindex 30d13d4e310e..983b724d5131 100644 --- a/docs/html/design/media/gesture_longtouch.png +++ 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 differindex daf29058c972..749b44730275 100644 --- a/docs/html/design/media/gesture_pinchclose.png +++ 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 differindex c05b633cbe81..a0869e270707 100644 --- a/docs/html/design/media/gesture_pinchopen.png +++ 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 differindex 6f47df60c910..befaf1aeaa2d 100644 --- a/docs/html/design/media/gesture_swipe.png +++ 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 differindex 365c3523a819..9fa8a75426cf 100644 --- a/docs/html/design/media/gesture_touch.png +++ b/docs/html/design/media/gesture_touch.png diff --git a/docs/html/design/media/help_cling.png b/docs/html/design/media/help_cling.png Binary files differindex c91d18916224..13ea7203d473 100644 --- a/docs/html/design/media/help_cling.png +++ b/docs/html/design/media/help_cling.png diff --git a/docs/html/design/media/iconography_launcher_example.png b/docs/html/design/media/iconography_launcher_example.png Binary files differindex 0cce7ef90e2e..58dbb4e6a3d1 100644 --- a/docs/html/design/media/iconography_launcher_example.png +++ 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 differindex 5a709e2f7fa1..1dcc91b6c864 100644 --- a/docs/html/design/media/iconography_launcher_example2.png +++ b/docs/html/design/media/iconography_launcher_example2.png diff --git a/docs/html/design/media/iconography_overview.png b/docs/html/design/media/iconography_overview.png Binary files differindex 56cd4098072b..b90b7978b6ec 100644 --- a/docs/html/design/media/iconography_overview.png +++ b/docs/html/design/media/iconography_overview.png diff --git a/docs/html/design/media/index_landing_page.png b/docs/html/design/media/index_landing_page.png Binary files differindex 206534443904..078eb4debb40 100644 --- a/docs/html/design/media/index_landing_page.png +++ b/docs/html/design/media/index_landing_page.png diff --git a/docs/html/design/media/metrics_diagram.png b/docs/html/design/media/metrics_diagram.png Binary files differindex 5cbe25200434..888f484fae0f 100644 --- a/docs/html/design/media/metrics_diagram.png +++ b/docs/html/design/media/metrics_diagram.png diff --git a/docs/html/design/media/migrating_ios_dialers.png b/docs/html/design/media/migrating_ios_dialers.png Binary files differindex a9230bcf492f..cf36c18340b7 100644 --- a/docs/html/design/media/migrating_ios_dialers.png +++ 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 differindex 6bc1351a7193..05b511d731bc 100644 --- a/docs/html/design/media/migrating_ios_galleries.png +++ 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 differindex 5b335fecf699..d2412732926f 100644 --- a/docs/html/design/media/migrating_ios_settings.png +++ b/docs/html/design/media/migrating_ios_settings.png diff --git a/docs/html/design/media/multipane_expand.png b/docs/html/design/media/multipane_expand.png Binary files differindex 6014cc83a61d..627de755ff3c 100644 --- a/docs/html/design/media/multipane_expand.png +++ 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 differindex 9993c9b5c658..b2ac57c81e1f 100644 --- a/docs/html/design/media/multipane_show.png +++ 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 differindex 567099e64bd0..d411ad55b79d 100644 --- a/docs/html/design/media/multipane_stack.png +++ 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 differindex b2dca02d7a3c..8d12254338dc 100644 --- a/docs/html/design/media/multipane_stretch.png +++ 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 differindex f116b6f12e04..d59308a97e58 100644 --- a/docs/html/design/media/multipane_view_tablet.png +++ 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 differindex 40b8af65d10d..1f1ad5eee089 100644 --- a/docs/html/design/media/multipane_views.png +++ 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 differindex d5cd979de774..a81737454083 100644 --- a/docs/html/design/media/navigation_between_apps_back.png +++ 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 differindex 7394b1cd9e4c..321d0da3cf89 100644 --- a/docs/html/design/media/navigation_between_apps_inward.png +++ 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 differindex 99c311204e90..42d0d8f24e3d 100644 --- a/docs/html/design/media/navigation_between_apps_up.png +++ 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 differindex 64f06c66a337..f4c7e0feb0eb 100644 --- a/docs/html/design/media/navigation_between_siblings_gmail.png +++ 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 differindex b12a43202ac4..c22a831b3824 100644 --- a/docs/html/design/media/navigation_between_siblings_market1.png +++ 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 differindex a09d9d7a6e08..af483e1fc361 100644 --- a/docs/html/design/media/navigation_between_siblings_market2.png +++ b/docs/html/design/media/navigation_between_siblings_market2.png diff --git a/docs/html/design/media/navigation_drawer_CAB.png b/docs/html/design/media/navigation_drawer_CAB.png Binary files differindex 9d4a5b56d9bf..819812bcdb84 100644 --- a/docs/html/design/media/navigation_drawer_CAB.png +++ b/docs/html/design/media/navigation_drawer_CAB.png diff --git a/docs/html/design/media/navigation_drawer_collapse.png b/docs/html/design/media/navigation_drawer_collapse.png Binary files differindex 7ca56da79119..8417ab9db9db 100644 --- a/docs/html/design/media/navigation_drawer_collapse.png +++ b/docs/html/design/media/navigation_drawer_collapse.png diff --git a/docs/html/design/media/navigation_drawer_cross_nav.png b/docs/html/design/media/navigation_drawer_cross_nav.png Binary files differindex bf8d238d2655..ea8c28411aa3 100644 --- a/docs/html/design/media/navigation_drawer_cross_nav.png +++ b/docs/html/design/media/navigation_drawer_cross_nav.png diff --git a/docs/html/design/media/navigation_drawer_first_run.png b/docs/html/design/media/navigation_drawer_first_run.png Binary files differindex 728f29fc2a6c..8ec6fc40f52e 100644 --- a/docs/html/design/media/navigation_drawer_first_run.png +++ b/docs/html/design/media/navigation_drawer_first_run.png diff --git a/docs/html/design/media/navigation_drawer_holo_dark_light.png b/docs/html/design/media/navigation_drawer_holo_dark_light.png Binary files differindex dcb91ab9b050..17be5fd18d3a 100644 --- a/docs/html/design/media/navigation_drawer_holo_dark_light.png +++ b/docs/html/design/media/navigation_drawer_holo_dark_light.png diff --git a/docs/html/design/media/navigation_drawer_layout.png b/docs/html/design/media/navigation_drawer_layout.png Binary files differindex e59b37c757c4..8d383f9b122c 100644 --- a/docs/html/design/media/navigation_drawer_layout.png +++ b/docs/html/design/media/navigation_drawer_layout.png diff --git a/docs/html/design/media/navigation_drawer_nav_and_actions.png b/docs/html/design/media/navigation_drawer_nav_and_actions.png Binary files differindex 0df04e9199c8..601abd74c201 100644 --- a/docs/html/design/media/navigation_drawer_nav_and_actions.png +++ b/docs/html/design/media/navigation_drawer_nav_and_actions.png diff --git a/docs/html/design/media/navigation_drawer_navigation_hubs.png b/docs/html/design/media/navigation_drawer_navigation_hubs.png Binary files differindex 9f4b244fc138..6a7d3735ea5b 100644 --- a/docs/html/design/media/navigation_drawer_navigation_hubs.png +++ b/docs/html/design/media/navigation_drawer_navigation_hubs.png diff --git a/docs/html/design/media/navigation_drawer_open_from_lower.png b/docs/html/design/media/navigation_drawer_open_from_lower.png Binary files differindex ec5f03dd1cb4..cbde9eece960 100644 --- a/docs/html/design/media/navigation_drawer_open_from_lower.png +++ b/docs/html/design/media/navigation_drawer_open_from_lower.png diff --git a/docs/html/design/media/navigation_drawer_open_overflow.png b/docs/html/design/media/navigation_drawer_open_overflow.png Binary files differindex 112a414d391d..84e4a35cedc1 100644 --- a/docs/html/design/media/navigation_drawer_open_overflow.png +++ b/docs/html/design/media/navigation_drawer_open_overflow.png diff --git a/docs/html/design/media/navigation_drawer_overview.png b/docs/html/design/media/navigation_drawer_overview.png Binary files differindex 42d21fadf772..f561ea78b92f 100644 --- a/docs/html/design/media/navigation_drawer_overview.png +++ b/docs/html/design/media/navigation_drawer_overview.png diff --git a/docs/html/design/media/navigation_drawer_peek.png b/docs/html/design/media/navigation_drawer_peek.png Binary files differindex c59881e13383..f51cb29e71f0 100644 --- a/docs/html/design/media/navigation_drawer_peek.png +++ b/docs/html/design/media/navigation_drawer_peek.png diff --git a/docs/html/design/media/navigation_drawer_quick_to_top.png b/docs/html/design/media/navigation_drawer_quick_to_top.png Binary files differindex 0e44915ce855..3f24d30c1be4 100644 --- a/docs/html/design/media/navigation_drawer_quick_to_top.png +++ b/docs/html/design/media/navigation_drawer_quick_to_top.png diff --git a/docs/html/design/media/navigation_drawer_reset_backstack.png b/docs/html/design/media/navigation_drawer_reset_backstack.png Binary files differindex c0c2f61d79f8..54226c0de289 100644 --- a/docs/html/design/media/navigation_drawer_reset_backstack.png +++ b/docs/html/design/media/navigation_drawer_reset_backstack.png diff --git a/docs/html/design/media/navigation_drawer_settings_help.png b/docs/html/design/media/navigation_drawer_settings_help.png Binary files differindex ed2997176780..f14c284dbc22 100644 --- a/docs/html/design/media/navigation_drawer_settings_help.png +++ b/docs/html/design/media/navigation_drawer_settings_help.png diff --git a/docs/html/design/media/navigation_drawer_titles_icons.png b/docs/html/design/media/navigation_drawer_titles_icons.png Binary files differindex b726c9bb576b..7cf1e0cd70cc 100644 --- a/docs/html/design/media/navigation_drawer_titles_icons.png +++ b/docs/html/design/media/navigation_drawer_titles_icons.png diff --git a/docs/html/design/media/navigation_drawer_top_out.png b/docs/html/design/media/navigation_drawer_top_out.png Binary files differindex ad92b77bd397..4f379de02fbb 100644 --- a/docs/html/design/media/navigation_drawer_top_out.png +++ b/docs/html/design/media/navigation_drawer_top_out.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 differindex a94e9c369895..0e1aa041bbb4 100644 --- a/docs/html/design/media/navigation_from_outside_back.png +++ 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 differindex ca9a1b57bad8..a8b23079a2cd 100644 --- a/docs/html/design/media/navigation_indirect_notification.png +++ 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 differindex 76ed98489e61..4114e3cdbd38 100644 --- a/docs/html/design/media/navigation_popup_notification.png +++ 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 differindex fdeeb904e261..d5eaa18b174e 100644 --- a/docs/html/design/media/navigation_up_vs_back_gmail.png +++ b/docs/html/design/media/navigation_up_vs_back_gmail.png diff --git a/docs/html/design/media/notifications_dismiss.png b/docs/html/design/media/notifications_dismiss.png Binary files differindex 696a97f19df3..efbec682eb91 100644 --- a/docs/html/design/media/notifications_dismiss.png +++ b/docs/html/design/media/notifications_dismiss.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 differindex bee66c92e064..348c9a1f11d2 100644 --- a/docs/html/design/media/notifications_pattern_phone_icons.png +++ b/docs/html/design/media/notifications_pattern_phone_icons.png diff --git a/docs/html/design/media/principles_delight.png b/docs/html/design/media/principles_delight.png Binary files differindex 5d6e909b00a1..705aa7abcd98 100644 --- a/docs/html/design/media/principles_delight.png +++ b/docs/html/design/media/principles_delight.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 differindex 954363f352d0..79026bc0c176 100644 --- a/docs/html/design/media/principles_get_to_know_me.png +++ 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 differindex c89c0ffaec73..57097cbb4bab 100644 --- a/docs/html/design/media/principles_heavy_lifting.png +++ 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 differindex 0576efec7999..df2cd4815267 100644 --- a/docs/html/design/media/principles_important_interruption.png +++ b/docs/html/design/media/principles_important_interruption.png diff --git a/docs/html/design/media/principles_looks_same.png b/docs/html/design/media/principles_looks_same.png Binary files differindex 3a556adf6118..c23bbc39bec0 100644 --- a/docs/html/design/media/principles_looks_same.png +++ 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 differindex 26da65568275..b581872178c2 100644 --- a/docs/html/design/media/principles_make_important_fast.png +++ 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 differindex 683a0b7df81c..a880b22dd7b7 100644 --- a/docs/html/design/media/principles_make_it_mine.png +++ 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 differindex c23dde70bb8d..531f22cd70b5 100644 --- a/docs/html/design/media/principles_navigation.png +++ b/docs/html/design/media/principles_navigation.png diff --git a/docs/html/design/media/principles_real_objects.png b/docs/html/design/media/principles_real_objects.png Binary files differindex 3889c9a38bd7..107c69d0cda4 100644 --- a/docs/html/design/media/principles_real_objects.png +++ 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 differindex 8617365a51d2..5390951cc7d5 100644 --- a/docs/html/design/media/principles_sprinkle_encouragement.png +++ b/docs/html/design/media/principles_sprinkle_encouragement.png diff --git a/docs/html/design/media/progress_activity.png b/docs/html/design/media/progress_activity.png Binary files differindex f4dffab36769..49a6f5024808 100644 --- a/docs/html/design/media/progress_activity.png +++ b/docs/html/design/media/progress_activity.png diff --git a/docs/html/design/media/progress_activity_custom.png b/docs/html/design/media/progress_activity_custom.png Binary files differindex 2bfdd521a8ee..0b45f7639f58 100644 --- a/docs/html/design/media/progress_activity_custom.png +++ b/docs/html/design/media/progress_activity_custom.png diff --git a/docs/html/design/media/progress_activity_do.png b/docs/html/design/media/progress_activity_do.png Binary files differdeleted file mode 100644 index fd224367f09a..000000000000 --- a/docs/html/design/media/progress_activity_do.png +++ /dev/null diff --git a/docs/html/design/media/progress_activity_do_dont.png b/docs/html/design/media/progress_activity_do_dont.png Binary files differnew file mode 100644 index 000000000000..ddc4a3303412 --- /dev/null +++ b/docs/html/design/media/progress_activity_do_dont.png diff --git a/docs/html/design/media/progress_activity_dont.png b/docs/html/design/media/progress_activity_dont.png Binary files differdeleted file mode 100644 index 08c4b5d29a49..000000000000 --- a/docs/html/design/media/progress_activity_dont.png +++ /dev/null diff --git a/docs/html/design/media/progress_download.png b/docs/html/design/media/progress_download.png Binary files differindex ab6bf58b4794..5c9e556569ec 100644 --- a/docs/html/design/media/progress_download.png +++ b/docs/html/design/media/progress_download.png diff --git a/docs/html/design/media/scroll_index.mp4 b/docs/html/design/media/scroll_index.mp4 Binary files differindex 383bbd8604a4..f7afb46c19ec 100644 --- a/docs/html/design/media/scroll_index.mp4 +++ 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 differindex 2cd61efa7247..378281ba4f84 100644 --- a/docs/html/design/media/scroll_index.ogv +++ 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 differindex 5a665d191d04..7e4aa88cfe70 100644 --- a/docs/html/design/media/scroll_index.webm +++ 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 differindex 924852efe74a..206c1f2cffc2 100644 --- a/docs/html/design/media/scroll_indicator.mp4 +++ 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 differindex c037bf5ce045..4cdc76f193c5 100644 --- a/docs/html/design/media/scroll_indicator.ogv +++ 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 differindex 000dc0a7aad0..b848c205a835 100644 --- a/docs/html/design/media/scroll_indicator.webm +++ 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 differindex 4c0790a726f0..cbd2d3482167 100644 --- a/docs/html/design/media/seekbar_example.png +++ b/docs/html/design/media/seekbar_example.png diff --git a/docs/html/design/media/settings_checkbox.png b/docs/html/design/media/settings_checkbox.png Binary files differindex 6615bfbeda25..ccd75a0f2b27 100644 --- a/docs/html/design/media/settings_checkbox.png +++ 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 differindex 8df92d4a13cb..0c7fa10d7417 100644 --- a/docs/html/design/media/settings_date_time.png +++ 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 differindex 4821c61bac6d..ecb31f5ad89d 100644 --- a/docs/html/design/media/settings_dependency.png +++ b/docs/html/design/media/settings_dependency.png diff --git a/docs/html/design/media/settings_grouping.png b/docs/html/design/media/settings_grouping.png Binary files differindex d271ea80884b..899e1c5bde3c 100644 --- a/docs/html/design/media/settings_grouping.png +++ 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 differindex 03bea0b8d442..d38f60ab9ca8 100644 --- a/docs/html/design/media/settings_individual_on_off.png +++ 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 differindex 385aa6abc29b..48d1c51ce0c7 100644 --- a/docs/html/design/media/settings_list_subscreen.png +++ b/docs/html/design/media/settings_list_subscreen.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 differindex e46bb9739771..bf6963f3c869 100644 --- a/docs/html/design/media/settings_master_on_off.png +++ 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 differindex ab4e992da6cc..08f796690c06 100644 --- a/docs/html/design/media/settings_master_on_off_2.png +++ 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 differindex 9b285664ff1e..27a903e746b5 100644 --- a/docs/html/design/media/settings_multiple_choice.png +++ b/docs/html/design/media/settings_multiple_choice.png diff --git a/docs/html/design/media/settings_slider.png b/docs/html/design/media/settings_slider.png Binary files differindex 51545c8d6bd6..ae651565db64 100644 --- a/docs/html/design/media/settings_slider.png +++ 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 differindex 2ab0b96652e8..16bf26f59230 100644 --- a/docs/html/design/media/settings_subscreen_navigation.png +++ b/docs/html/design/media/settings_subscreen_navigation.png diff --git a/docs/html/design/media/spinners_hololightanddark.png b/docs/html/design/media/spinners_hololightanddark.png Binary files differindex cea5ec22f5b8..40104571c8f9 100644 --- a/docs/html/design/media/spinners_hololightanddark.png +++ 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 differindex f8a1ab5845ec..baffc635b723 100644 --- a/docs/html/design/media/swipe_tabs.mp4 +++ 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 differindex ae3c86b768dd..215ff5ab04ea 100644 --- a/docs/html/design/media/swipe_tabs.ogv +++ b/docs/html/design/media/swipe_tabs.ogv diff --git a/docs/html/design/media/swipe_tabs.webm b/docs/html/design/media/swipe_tabs.webm Binary files differindex 86f403ebea9e..8809de115b36 100644 --- a/docs/html/design/media/swipe_tabs.webm +++ 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 differindex ea1e635f6bbd..853800ac663d 100644 --- a/docs/html/design/media/swipe_views.png +++ 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 differindex ee0f2c40e8ed..2ff1f80e10cd 100644 --- a/docs/html/design/media/swipe_views2.png +++ 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 differindex 92b8d5c280f4..91abed8d5772 100644 --- a/docs/html/design/media/switches_checkboxes.png +++ 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 differindex f9bf5fc3257b..94c4df03ced7 100644 --- a/docs/html/design/media/switches_radios.png +++ b/docs/html/design/media/switches_radios.png diff --git a/docs/html/design/media/tabs_overview.png b/docs/html/design/media/tabs_overview.png Binary files differindex c33698285676..95efc3d7d64e 100644 --- a/docs/html/design/media/tabs_overview.png +++ 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 differindex dc9e9c6cf048..df5c5372d23f 100644 --- a/docs/html/design/media/tabs_scrolly.mp4 +++ 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 differindex 3e484f97a3a8..f7cb9c383c0a 100644 --- a/docs/html/design/media/tabs_scrolly.ogv +++ 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 differindex e9d371d2cb77..cc6a0fb2e4c2 100644 --- a/docs/html/design/media/tabs_scrolly.webm +++ 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 differindex 09e995836599..23bef3607cb4 100644 --- a/docs/html/design/media/tabs_stacked.png +++ b/docs/html/design/media/tabs_stacked.png diff --git a/docs/html/design/media/text_input_textselection.png b/docs/html/design/media/text_input_textselection.png Binary files differindex f2ede0dcb488..0585d95756d9 100644 --- a/docs/html/design/media/text_input_textselection.png +++ 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 differindex 1feac284a36b..05da941d7758 100644 --- a/docs/html/design/media/text_input_typesandtypedown.png +++ 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 differindex e1f4477e57cd..035250807ed9 100644 --- a/docs/html/design/media/themes_holo_dark.png +++ 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 differdeleted file mode 100644 index 528d11937e27..000000000000 --- a/docs/html/design/media/themes_holo_inverse.png +++ /dev/null diff --git a/docs/html/design/media/themes_holo_light.png b/docs/html/design/media/themes_holo_light.png Binary files differindex 4f34bb3230f4..77836cbf266a 100644 --- a/docs/html/design/media/themes_holo_light.png +++ 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 differindex 6388b774061e..f8162d0a3f20 100644 --- a/docs/html/design/media/touch_feedback_communication.png +++ 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 differindex cb1f268121f3..185256354bec 100644 --- a/docs/html/design/media/touch_feedback_manipulation.png +++ 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 differindex 5a34d7a230f7..fccfd8ed9316 100644 --- a/docs/html/design/media/touch_feedback_reaction_response.png +++ 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 differindex 9e306bbc4205..46181348bfb5 100644 --- a/docs/html/design/media/touch_feedback_states.png +++ b/docs/html/design/media/touch_feedback_states.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 differindex d44e5a481af9..7fd066c6c709 100644 --- a/docs/html/design/media/ui_overview_all_apps.png +++ 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 differindex 7fc5dcdc3dc4..6ea8139d9ae8 100644 --- a/docs/html/design/media/ui_overview_app_ui.png +++ 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 differindex d1376b5f1819..528a2325cd92 100644 --- a/docs/html/design/media/ui_overview_home_screen.png +++ 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 differindex fe4375e5f363..6043412b100d 100644 --- a/docs/html/design/media/ui_overview_notifications.png +++ 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 differindex aabd7c794218..5663b30413bf 100644 --- a/docs/html/design/media/ui_overview_recents.png +++ 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 differindex 8993fff92132..a4280fa62f97 100644 --- a/docs/html/design/media/ui_overview_system_ui.png +++ b/docs/html/design/media/ui_overview_system_ui.png diff --git a/docs/html/design/media/whats_new_multipanel.png b/docs/html/design/media/whats_new_multipanel.png Binary files differindex fbe2d56b9aac..e5564a770128 100644 --- a/docs/html/design/media/whats_new_multipanel.png +++ b/docs/html/design/media/whats_new_multipanel.png diff --git a/docs/html/design/media/widgets_gestures.png b/docs/html/design/media/widgets_gestures.png Binary files differindex f991609e747c..5e1268daca99 100644 --- a/docs/html/design/media/widgets_gestures.png +++ b/docs/html/design/media/widgets_gestures.png diff --git a/docs/html/design/media/widgets_resizing01.png b/docs/html/design/media/widgets_resizing01.png Binary files differindex 5c85df6d5148..7d411aed95da 100644 --- a/docs/html/design/media/widgets_resizing01.png +++ b/docs/html/design/media/widgets_resizing01.png diff --git a/docs/html/design/media/yourbranding_app.png b/docs/html/design/media/yourbranding_app.png Binary files differnew file mode 100644 index 000000000000..d38dce3e7694 --- /dev/null +++ b/docs/html/design/media/yourbranding_app.png diff --git a/docs/html/design/media/yourbranding_googlemusic.png b/docs/html/design/media/yourbranding_googlemusic.png Binary files differnew file mode 100644 index 000000000000..1e1df8b0b89a --- /dev/null +++ b/docs/html/design/media/yourbranding_googlemusic.png diff --git a/docs/html/design/media/yourbranding_icon.png b/docs/html/design/media/yourbranding_icon.png Binary files differnew file mode 100644 index 000000000000..ca8b3531f13b --- /dev/null +++ b/docs/html/design/media/yourbranding_icon.png diff --git a/docs/html/design/media/yourbranding_in-app-icons.png b/docs/html/design/media/yourbranding_in-app-icons.png Binary files differnew file mode 100644 index 000000000000..80f0ce431ec0 --- /dev/null +++ b/docs/html/design/media/yourbranding_in-app-icons.png diff --git a/docs/html/design/media/yourbranding_logo.png b/docs/html/design/media/yourbranding_logo.png Binary files differnew file mode 100644 index 000000000000..328554dabc6a --- /dev/null +++ b/docs/html/design/media/yourbranding_logo.png diff --git a/docs/html/design/media/yourbranding_sharing.png b/docs/html/design/media/yourbranding_sharing.png Binary files differnew file mode 100644 index 000000000000..b11752c0b1da --- /dev/null +++ b/docs/html/design/media/yourbranding_sharing.png diff --git a/docs/html/design/patterns/accessibility.jd b/docs/html/design/patterns/accessibility.jd index 16a39d68e42f..532900ecd80c 100644 --- a/docs/html/design/patterns/accessibility.jd +++ b/docs/html/design/patterns/accessibility.jd @@ -55,7 +55,6 @@ page.tags="accessibility","navigation","input" <em>when not starred:</em> add to favorties</li> <li class="value-7">action overflow button</li> <li class="value-8">text message</li> - <li class="value-9">video chat</li> </ol> </div> </div> diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index 2c591490a728..939370c29fe5 100644 --- a/docs/html/design/patterns/actionbar.jd +++ b/docs/html/design/patterns/actionbar.jd @@ -93,9 +93,9 @@ rotation on different screen sizes.</p> 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"> +<!-- <div class="figure-caption"> Split action bar showing action buttons at the bottom of the screen in vertical orientation. -</div> +</div> --> <h2 id="considerations-split-action-bars">Layout Considerations for Split Action Bars</h2> diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd index 0dc20e25fdb3..1447d4e62885 100644 --- a/docs/html/design/patterns/app-structure.jd +++ b/docs/html/design/patterns/app-structure.jd @@ -1,4 +1,4 @@ -page.title=Application Structure +page.title=App Structure page.tags="navigation","layout","tablet" @jd:body @@ -61,30 +61,9 @@ layouts that are visually engaging and appropriate for the data type and screen <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>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. + Play Music allows navigation among artists, albums, and playlists through rich content display. + 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> @@ -112,9 +91,8 @@ important actions.</p> <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. + A calendar is about productivity, so an efficient, easy-to-skim view with higher data density works + well. Navigation supports switching views of day, week, month, and agenda views. </div> </div> @@ -185,7 +163,7 @@ important actions.</p> <div class="layout-content-col span-7"> <img src="{@docRoot}design/media/app_structure_drawer.png"> <div class="figure-caption"> - Navigation drawer from the Shopper app. + Navigation drawer from the Keep app. </div> </div> </div> @@ -230,7 +208,7 @@ 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. + People uses fixed tabs to switch between different, relatively unrelated functional areas. </div> @@ -290,21 +268,6 @@ design guide.</p> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - -<h4>Lights-out mode</h4> -<p>Immersive content like media and games is best experienced full screen without distractions. But that doesn't mean you can't also offer actions on the content like sharing, commenting, or searching. If the user hasn't interacted with any of the controls after a short period of time, automatically fade away the action bar and all system UI affordances so the user can lean back and enjoy the content. We call this lights-out mode. Later, if the user wants to take some action, they can touch anywhere on the screen to exit lights-out mode and bring back the controls.</p> - - </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 replicates the immersive experience of reading an actual book through lights-out mode and a page-flip animation. - </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 diff --git a/docs/html/design/patterns/fullscreen.jd b/docs/html/design/patterns/fullscreen.jd new file mode 100644 index 000000000000..191ca40a2027 --- /dev/null +++ b/docs/html/design/patterns/fullscreen.jd @@ -0,0 +1,150 @@ +page.title=Full Screen +page.tags="full screen","immersive", "leanback" +@jd:body + +<p> + Some content is best experienced full screen, like videos, games, image + galleries, books, and slides in a presentation. You can engage users more + deeply with content in full screen by minimizing visual distraction from app + controls and protecting users from escaping the app accidentally. +</p> + + <img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;"> + +<p> + In version 4.4, Android offers two approaches for making your app go full + screen: Lean Back and Immersive. In both approaches, all persistent system + bars are hidden. The difference between them is how the user brings the bars + back into view. +</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <h4>Lean Back</h4> + <p>Touch the screen anywhere to bring back system bars. </p> + <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> + </div> + <div class="layout-content-col span-6"> + <h4>Immersive</h4> + <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p> + <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> + <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> + </div> +</div> + +<h2 id="leanback"> + Lean Back +</h2> + +<p> + The Lean Back approach is for full-screen experiences in which users won't be + interacting heavily with the screen while consuming content, like while + watching a video. +</p> + +<p> + In this type of experience, users are leaning back and watching the screen. + Then, when they need to bring back the bars, they simply touch anywhere. This + gesture is easy and intuitive. +</p> + + <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> + +<h2 id="immersive"> + Immersive +</h2> + +<p> + The Immersive approach is mainly intended for apps in which the user will be + heavily interacting with the full screen as part of the primary experience. + Examples are games, viewing images in a gallery, or reading paginated + content, like a book or slides in a presentation. +</p> + +<p> + In this type of experience, when users need to bring back the system bars, + they swipe from any edge where a system bar is hidden. By requiring this more + deliberate gesture, the user's deep engagement with your app won't be + interrupted by accidental touches and swipes. +</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> + <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> + </div> +</div> + +<p> + The user learns about the gesture to bring back the system bars through a + message that appears the first time the app goes full screen. +</p> + +<p> + If your app has its own controls that aren't needed when a user is immersed + in content, make them disappear and reappear in sync with the system bars. + This rule also applies to any app-specific gestures you might have for hiding + and showing app controls. For example, if touching anywhere on the screen + toggles the appearance of an action bar or a palette, then it must also + toggle the appearance of system bars. +</p> + +<p> + You might be tempted to use this approach just to maximize screen real + estate. But be mindful of how often users jump in and out of apps to check + notifications, do impromptu searches, and more. This approach will cause + users to lose easy access to system navigation, so a little extra space + should not be the only benefit they're getting in return. +</p> + +<h2 id="variation_using_edges"> + Variation: Swiping from edges with bars also affects the app +</h2> + +<p> + In the Immersive approach, any time a user swipes from an edge with a system + bar, the Android framework takes care of revealing the system bars. Your app + won't even be aware that this gesture occurred. +</p> + +<p> + But in some apps, the user might occasionally need to swipe from the edge as + <strong>part of the primary app experience</strong>. Examples are games and + drawing applications. +</p> + +<p> + For apps with this requirement, you can use a variation on the Immersive + approach: when a user swipes from an edge with a system bar, system bars are + shown and the gesture is passed to the app so the app can respond to the + gesture. +</p> + +<p> + For example, in a drawing app that uses this approach, if a user wants to + draw a line that begins at the very edge of the screen, swiping from the edge + would reveal the system bars and also start drawing a line that begins at the + very edge. +</p> + +<p> + In this approach, to minimize disruption while a user is deeply engaged in + the app, the system bars are semi-transparent. The bars automatically + disappear after a few seconds of no interaction or as soon as the user + touches or gestures anywhere outside the system bars. +</p> + +<h2 id="lightsout">What About Lights Out Mode?</h2> + +<p> + Before Android 4.4, the design guideline was to use Lights Out mode, a mode + in which the Action Bar and Status Bar fades away and becomes unavailable + after a few seconds of inactivity. The Navigation Bar is still available and + responds to touches but appears dimmed. +</p> + +<p> + Replace previous implementations of Lights Out mode with the Lean Back or + Immersive approaches. Continue to use Lights Out mode for implementations of + your app targeted for earlier releases. +</p>
\ No newline at end of file diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd index 127a1c8c12cd..837a6ddbe4bb 100644 --- a/docs/html/design/patterns/gestures.jd +++ b/docs/html/design/patterns/gestures.jd @@ -5,112 +5,122 @@ page.tags="gesture","input","touch" <p>Gestures allow users to interact with your app by manipulating the screen objects you provide. The following table shows the core gesture set that is supported in Android.</p> +<div class="vspace size-2"> </div> + <div class="layout-content-row"> - <div class="layout-content-col span-4"> + <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> - + <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"> + <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> - + <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"> + <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> - + <h4>Swipe or drag</h4> + <p>Scrolls overflowing content, or navigates between views in the same hierarchy. Swipes are + quick and affect the screen even after the finger is picked up. Drags are slower and more precise, + and the screen stops responding when the finger is picked up.</p> + <ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>Press, move, lift</p></li> + </ul> </div> + </div> +<div class="vspace size-2"> </div> <div class="layout-content-row"> - <div class="layout-content-col span-4"> + <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> - + <h4>Long press drag</h4> + <p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p> + <ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>Long press, move, lift</p></li> + </ul> </div> - <div class="layout-content-col span-4"> + <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> - + <h4>Double touch </h4> + <p>Scales up the smallest targetable view, if available, or scales a standard amount + around the gesture. 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" style="margin-left:-4px"> - -<h4>Pinch open</h4> -<p>Zooms into content.</p> - -<ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>2-finger press, move outwards, lift</p></li> -</ul> + <div class="layout-content-col span-4"> + <img src="{@docRoot}design/media/gesture_doubletouchdrag.png"> + <h4>Double touch drag</h4> + <p>Scales content by pushing away or pulling closer, centered around gesture.</p> + <ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>A single touch followed in quick succession by a drag up or down:</p> + <ul style="padding-left:1.5em;list-style-type:disc;"> + <li>Dragging up decreases content scale</li> + <li>Dragging down increases content scale</li> + <li>Reversing drag direction reverses scaling.</li> + </ul> + </li> + </ul> </div> + </div> +<div class="vspace size-2"> </div> + <div class="layout-content-row"> + <div class="layout-content-col span-4"> + <img src="{@docRoot}design/media/gesture_pinchopen.png" style="margin-left:-4px"> + <h4>Pinch open</h4> + <p>Zooms into content.</p> + <ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>2-finger press, move outwards, lift</p></li> + </ul> + </div> + <div class="layout-content-col span-4"> <img src="{@docRoot}design/media/gesture_pinchclose.png"> - -<h4>Pinch close</h4> -<p>Zooms out of content.</p> - -<ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>2-finger press, move inwards, lift</p></li> -</ul> - + <h4>Pinch close</h4> + <p>Zooms out of content.</p> + <ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>2-finger press, move inwards, lift</p> + </li> + </ul> </div> + </div> + diff --git a/docs/html/design/patterns/help.jd b/docs/html/design/patterns/help.jd index a32fb255d008..ad5742d78757 100644 --- a/docs/html/design/patterns/help.jd +++ b/docs/html/design/patterns/help.jd @@ -20,7 +20,7 @@ page.tags="settings","preferences" <p>The only reason for showing pure help content to new users unsolicited is:<br> <em>To teach high value functionality that's only available through a gesture.</em></p> -<p>For example, we use help content to teach users how to place apps on their Home Screen. This functionality is:</p> +<p>For example, we use help content to teach users how to place apps on their Home screen. This functionality is:</p> <div class="layout-content-row"> <div class="layout-content-col span-8"> <ul> diff --git a/docs/html/design/patterns/new.jd b/docs/html/design/patterns/new.jd index 23e3e10dbe7e..50cb9503602c 100644 --- a/docs/html/design/patterns/new.jd +++ b/docs/html/design/patterns/new.jd @@ -1,7 +1,97 @@ page.title=New in Android +page.tags="KitKat", "Android 4.4" @jd:body -<h2>Jelly Bean - Android 4.1</h2> + +<p>A quick look at the new patterns and styles you can use to build beautiful Android apps… + +<h2 id="kitkat">Android 4.4 KitKat</h2> + +<img src="{@docRoot}design/media/branding_googlemusic.png" style="float:right;width:260px;padding-left:3em;margin-left: 28px;margin-right:15%;"> + +<h3> + Your branding +</h3> + + +<p> + Consistency has its place in Android, but you also have the flexibility to + customize the look of your app to reinforce your brand. +</p> + +<p> + Use your brand color for accent by overriding the Android framework's default + blue in UI elements like checkboxes, progress bars, radio buttons, sliders, + tabs, and scroll indicators. +</p> + +<p> + Show your app's launcher icon and name in the action bar so that users can + see it in every screen of your app. +</p> +<p> + <a href="{@docRoot}design/style/branding.html">Your Branding</a> highlights + these and other pointers on how to incorporate elements of your brand into your + app's visual language — highly encouraged! +</p> + +<h3> + Touch feedback +</h3> + +<p> + Before Android KitKat, Android's default touch feedback color was a vibrant + blue. Every touch resulted in a jolt of high-contrast color, in a shade that + might not have mixed well with your brand's color(s). +</p> + + +<p> + In Android KitKat and beyond, touch feedback is subtle: when something is + touched, by default its background color slightly darkens or lightens. This + provides two benefits: (1) <a href= + "/design/get-started/principles.html#sprinkle-encouragement">sprinkles + of encouragement</a> are more pleasant than jolts, and (2) incorporating your + branding is much easier because the default touch feedback works with + whatever hue you choose. Check the updated <a href= + "/design/style/touch-feedback.html">Touch Feedback</a> page for more + details. +</p> +<img src="{@docRoot}design/media/touch_feedback_reaction_response.png" style="padding-top:1em;"> + +<h3> + Full screen +</h3> + +<p> + Android KitKat has improved support for letting your app use the entire + screen, with a few different approaches to meet the varying needs of apps and + content. The new <a href="{@docRoot}design/patterns/fullscreen.html">Full + Screen</a> page will guide you in setting the stage for deep user engagement. +</p> + +<img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;"> + +<h3> + Gestures +</h3> +<div class="layout-content-row"> + <div class="layout-content-col span-6"> +<p> + The updated <a href="{@docRoot}design/patterns/gestures.html">Gestures</a> + page covers new and updated gestures introduced in Android KitKat: + <strong>double touch drag</strong> and <strong>double touch</strong>. These + gestures are used for changing the viewing size of content. +</p> + </div> + <div class="layout-content-col span-7"> + <img src="{@docRoot}design/media/gesture_doubletouch.png"> + <img src="{@docRoot}design/media/gesture_doubletouchdrag.png"> + </div> +</div> + + +<h2>Android 4.1 Jelly Bean</h2> <h4>Notifications</h4> <div class="layout-content-row"> @@ -14,7 +104,10 @@ page.title=New in Android <li>Notifications can be collapsed and expanded</li> </ul> - <p>The base notification layout has not changed, so app notifications designed for versions earlier than Jelly Bean still look and work the same. Check the updated <a href="{@docRoot}design/patterns/notifications.html">Notifications</a> page for more details.</p> + <p>The base notification layout has not changed, so app notifications designed for versions + earlier than Jelly Bean still look and work the same. Check the updated <a + href="{@docRoot}design/patterns/notifications.html">Notifications</a> page for + more details.</p> </div> <div class="layout-content-col span-6"> <img src="{@docRoot}design/media/new_notifications.png"> @@ -26,14 +119,21 @@ page.title=New in Android <h4>Resizable Application Widgets</h4> <div class="layout-content-row"> <div class="layout-content-col span-7"> - <p>Widgets are an essential aspect of home screen customization, allowing "at-a-glance" views of an app's most important data and functionality right from the user's home screen. Android 4.1 introduces improved App Widgets that can <strong>automatically resize and load different content</strong> based upon a number of factors including:</p> + <p>Widgets are an essential aspect of home screen customization, allowing + "at-a-glance" views of an app's most important data and functionality right from + the user's home screen. Android 4.1 introduces improved App Widgets that can + <strong>automatically resize and load different content</strong> based upon a + number of factors including:</p> <ul> <li>Where the user drops them on the home screen</li> <li>The size to which the user expands them</li> <li>The amount of room available on the home screen</li> </ul> - <p>You can supply separate landscape and portrait layouts for your widgets, which the system inflates as appropriate when the screen orientation changes. The Application Widgets has useful details about widget types, limitations, and design considerations.</p> + <p>You can supply separate landscape and portrait layouts for your widgets, which + the system inflates as appropriate when the screen orientation changes. The <a + href="{@docRoot}design/patterns/widgets.html">Application Widgets</a> page has useful + details about widget types, limitations, and design considerations.</p> </div> <div class="layout-content-col span-6"> <img src="{@docRoot}design/media/new_widgets.png"> @@ -45,8 +145,12 @@ page.title=New in Android <h4>Accessibility</h4> <div class="layout-content-row"> <div class="layout-content-col span-11"> - <p>One of Android's missions is to organize the world's information and make it universally accessible and useful. Our mission applies to all users-including people with disabilities such as visual impairment, color deficiency, hearing loss, and limited dexterity.</p> - <p>The new <a href="{@docRoot}design/patterns/accessibility.html">Accessibility</a> page provides details on how to design your app to be as accessible as possible by:</p> + <p>One of Android's missions is to organize the world's information and + make it universally accessible and useful. Our mission applies to all + users-including people with disabilities such as visual impairment, color + deficiency, hearing loss, and limited dexterity.</p> + <p>The new <a href="{@docRoot}design/patterns/accessibility.html">Accessibility</a> + page provides details on how to design your app to be as accessible as possible by:</p> <ul> <li>Making navigation intuitive</li> <li>Using recommended touch target sizes</li> @@ -56,20 +160,28 @@ page.title=New in Android <li>Trying it out yourself</li> </ul> - <p>You can supply separate landscape and portrait layouts for your widgets, which the system inflates as appropriate when the screen orientation changes. The <a href="{@docRoot}design/patterns/widgets.html">Widgets</a> page has useful details about widget types, limitations, and design considerations.</p> + <p>You can supply separate landscape and portrait layouts for your + widgets, which the system inflates as appropriate when the screen + orientation changes. The + <a href="{@docRoot}design/patterns/widgets.html">Widgets</a> page has + useful details about widget types, limitations, and design considerations.</p> </div> <div class="layout-content-col span-2"> <img src="{@docRoot}design/media/new_accessibility.png"> </div> </div> -<h2>Ice Cream Sandwich - Android 4.0</h2> +<h2>Android 4.0 Ice Cream Sandwich</h2> <h4>Navigation bar</h4> <div class="layout-content-row"> <div class="layout-content-col span-7"> - <p>Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a - virtual navigation bar that houses the Back, Home and Recents buttons. Read the <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> + <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"> @@ -81,7 +193,9 @@ page.title=New in Android <h4>Action bar</h4> <div class="layout-content-row"> <div class="layout-content-col span-7"> - <p>The action bar is the most important structural element of an Android app. It provides consistent navigation across the platform and allows your app to surface actions.</p> + <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"> @@ -93,7 +207,10 @@ page.title=New in Android <h4>Multi-pane layouts</h4> <div class="layout-content-row"> <div class="layout-content-col span-7"> - <p>Creating apps that scale well across different form factors and screen sizes is important in the Android world. Multi-pane layouts allow you to combine different activities that show separately on smaller devices into richer compound views for tablets.</p> + <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"> @@ -106,7 +223,9 @@ page.title=New in Android <div class="layout-content-row"> <div class="layout-content-col span-7"> - <p>The long press gesture which was traditionally used to show contextual actions for objects is now used for data selection. When selecting data, contextual action bars allow you to surface actions.</p> + <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"> diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd index 018b7b998195..80f1b0e20112 100644 --- a/docs/html/design/patterns/notifications.jd +++ b/docs/html/design/patterns/notifications.jd @@ -233,28 +233,15 @@ develop a widget that they can choose to place on their home screen.</p> <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> +<p><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></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"> diff --git a/docs/html/design/patterns/pure-android.jd b/docs/html/design/patterns/pure-android.jd index 77813c0d9fda..a0f672e4d613 100644 --- a/docs/html/design/patterns/pure-android.jd +++ b/docs/html/design/patterns/pure-android.jd @@ -32,7 +32,7 @@ conventions of a different platform.</p> <img src="{@docRoot}design/media/migrating_ui_elements.png"> <div class="figure-caption"> - Sampling of UI elements from Android, iOS and Windows Phone 7. + Sampling of UI elements from Android, iOS, and Windows Phone. </div> </div> @@ -56,7 +56,7 @@ counterparts.</p> <img src="{@docRoot}design/media/migrating_icons.png"> <div class="figure-caption"> - Sampling of icons from Android, iOS and Windows Phone 7. + Sampling of icons from Android, iOS, and Windows Phone. </div> </div> diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd index 630a4b983eb0..4c9fb880ec71 100644 --- a/docs/html/design/patterns/swipe-views.jd +++ b/docs/html/design/patterns/swipe-views.jd @@ -32,12 +32,12 @@ 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. If a view contains content that exceeds the width of the screen such as a wide Email message, make sure the user's initial swipes will scroll horizontally within the view. Once the end of the content is reached, an additional swipe should navigate to the next view. In addition, support the use of edge swipes to immediately navigate between views when content scrolls horizontally. + Navigating between consecutive email messages using the swipe gesture. If a view contains content that exceeds the width of the screen such as a wide email message, make sure the user's initial swipes will scroll horizontally within the view. Once the end of the content is reached, an additional swipe should navigate to the next view. In addition, support the use of edge swipes to immediately navigate between views when content scrolls horizontally. </div> <img src="{@docRoot}design/media/swipe_views3.png"> <div class="figure-caption"> - Scrolling within a wide Email message using the swipe gesture before navigating to the next message. + Scrolling within a wide email message using the swipe gesture before navigating to the next message. </div> <h2 id="between-tabs">Swiping Between Tabs</h2> @@ -45,7 +45,7 @@ using the swipe gesture to navigate to the next/previous detail view.</p> <div class="layout-content-row"> <div class="layout-content-col span-5"> - <div class="framed-galaxynexus-port-span-5"> + <div class="framed-nexus5-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"> diff --git a/docs/html/design/style/branding.jd b/docs/html/design/style/branding.jd new file mode 100644 index 000000000000..9ef934d391c3 --- /dev/null +++ b/docs/html/design/style/branding.jd @@ -0,0 +1,112 @@ +page.title=Your Branding +page.tags="branding","logo" +@jd:body + +<p>Following Android design patterns doesn't mean that your app has to look the same as +everyone else's. In Android, your app can shine as an extension of your brand. </p> + +<h2 id="color">Color</h2> + +<p>Use your brand color for accent by overriding the Android framework's default blue in UI elements like checkboxes, progress bars, radio buttons, sliders, tabs, and scroll indicators.</p> + +<p>Look for opportunities to use high-contrast color for emphasis, for example, as the background color of the action bar or a primary button. But don't go overboard: not all actions are equal, so use it only for the one or two most important things.</p> +<p>When customizing colors, <a href="{@docRoot}design/style/touch-feedback.html">touch feedback</a> + should be subtle — just slightly lighter or darker than the untouched color.</p> + +<div class="vspace size-1"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <img src="{@docRoot}design/media/branding_wallet.png" style="width:94%"> + <div class="figure-caption"> + The four colors of the Google Wallet logo provide a playful accent to the four dots + that appear as the user enters a PIN. + </div> + </div> + <div class="layout-content-col span-6"> + <img src="{@docRoot}design/media/branding_googlemusic.png" style="width:94%"> + <div class="figure-caption"> + The Google Play Music app has an orange theme color, which is used for emphasis + in the action bar and for accent in the selected tab, scroll indicator, and + hyperlinks. + </div> + </div> +</div> + +<h2 id="logo">Logo</h2> + +<p>Your app's <a href="{@docRoot}design/style/iconography.html#launcher">launcher icon</a> is + a key place to incorporate your logo, because it's what + users will look for and touch to begin using your app. You can carry the launcher + icon through to all the screens in your app by showing it in the + <a href="{@docRoot}design/patterns/actionbar.html">action bar</a> along + with the name of the app.</p> + +<p>Another approach to consider is to have your logo take the place of the launcher icon +and app name in the action bar.</p> + + +<div class="vspace size-1"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <img src="{@docRoot}design/media/yourbranding_icon.png" style="width:60px;float:left;padding-right:1em;"> + <div class="figure-caption" style="widdth:220px;margin-left:20px;"> + The HowzAbout app uses a launcher icon that is a shortened version of its full logo. + </div> + + </div> + <div class="layout-content-col span-6"> + <img src="{@docRoot}design/media/yourbranding_app.png" style="width:94%"> + <div class="figure-caption"> + Example of a the logo in the action bar. This works well in cases where the brand's logo matches the name of the app. + </div> + </div> +</div> + +<h2 id="logo">Icons</h2> + + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <p>If you have icons that you're already using for your app on other platforms + and they have a distinctive look intended to fit your brand, use them on your + Android app as well. <strong>If you take this approach, make sure your brand styling is + applied to every single icon in your app</strong>.</p> + + </div> + + <div class="layout-content-col span-6"> + <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;""> + </div> + </div> +</div> + <p>One exception: For any icon in your existing set where the symbol is different from + Android's, use Android's symbol but give it your brand's styling. That way, users will + understand what the purpose of the icon is based on what they've learned in other + Android apps (Design principle: + <a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that + work everywhere</a>). But the icon will still look like it belongs with all of + your other icons as a part of your brand.</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <p><strong>Example</strong>:<br /> + </p> + <p>The brand's normal icon for sharing on other platforms is a right arrow. + </div> + + <div class="layout-content-col span-6 lasyout-with-list-item-margins"> + + <div style="margin-bottom:1em;"> + <span class="do-dont-label bad" style="margin-left:12px">Don't</span> + <span style="margin-left: 44px;" class="do-dont-label good"><strong>Do</strong></span> + </div> + <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:200px;"> + </div> +</div> + +<p>What if you don't already have your own icons — for example, if you're creating a +brand new app only for Android? In this case, use Android's standard icons and rely +more on color and logo for branding. Get the Action Bar Icon Pack, available for free +in <a href="{@docRoot}design/downloads/index.html">Downloads</a>.</p> diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd index 0ce2faf1b7be..b0a3439ea93e 100644 --- a/docs/html/design/style/iconography.jd +++ b/docs/html/design/style/iconography.jd @@ -23,9 +23,9 @@ units, which are based on the pixel dimensions of a medium-density (MDPI) screen <img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" /> -<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6 scaling -ratio</strong> between the four primary densities (medium, high, x-high, and xx-high, -respectively). For example, consider that the size for a launcher icon is specified to be +<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6:8 +scaling ratio</strong> between the five primary densities (medium, high, x-high, xx-high, and +xxx-high respectively). For example, consider that the size for a launcher icon is specified to be 48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.</p> diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd index 0a99a2f5d2ca..c375631514d3 100644 --- a/docs/html/design/style/metrics-grids.jd +++ b/docs/html/design/style/metrics-grids.jd @@ -12,8 +12,9 @@ screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp).</li> <li>The density buckets are <acronym title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160 dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, <acronym title -="Extra-high density (320 dpi)">XHDPI</acronym>, and <acronym title -="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>.</li> +="Extra-high density (320 dpi)">XHDPI</acronym>, <acronym title +="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>, and <acronym title +="Extra-extra-extra!-high density (640 dpi)">XXXHDPI</acronym>.</li> </ul> <p>Optimize your application's UI by designing diff --git a/docs/html/design/style/themes.jd b/docs/html/design/style/themes.jd index e1899e3b4210..2dc8eadc633d 100644 --- a/docs/html/design/style/themes.jd +++ b/docs/html/design/style/themes.jd @@ -14,22 +14,16 @@ page.title=Themes 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> +<p>Themes are Android's mechanism for applying a consistent style to an app or activity. +The style specifies the visual properties of the elements that make up your user interface, +such as color, height, padding and font size. To promote greater cohesion between all apps +on the platform, Android provides two system themes that you can choose from when building apps:</p> <ul> <li>Holo Light</li> <li>Holo Dark</li> -<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> diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd index 340a3a4918e5..a5bf7b37e592 100644 --- a/docs/html/design/style/touch-feedback.jd +++ b/docs/html/design/style/touch-feedback.jd @@ -2,15 +2,43 @@ page.title=Touch Feedback page.tags="input","button" @jd:body -<div class="layout-content-row" style="margin-bottom: -100px"> + <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> +<p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors +of gestures, and indicate what actions are enabled and disabled.</p> +<p>Whenever a user touches an actionable area in your app, provide a subtle visual response. +This lets the user know which object was touched and that your app is "listening".</p> + +<p><strong>Be responsive to touches in a gentle way</strong>. Whenever a user touches an +actionable area in your app, let them know the app is "listening" by providing a visual +response. Make it subtle —just slightly lighter or darker than the untouched color. This +provides two benefits:</p> + +<ul> +<li><a href="{@docRoot}design/get-started/principles.html#sprinkle-encouragement">Sprinkles +of encouragement</a> are more pleasant than jolts.</li> +<li>Incorporating <a href="{@docRoot}design/style/branding.html">your branding</a> is much +easier because the default touch feedback works with whatever hue you choose.</li> +</ul> </div> + + <div class="layout-content-col span-6" style="float:right;"> + + <!-- <div class="framed-nexus5-port-span-5"> + <video class="play-on-hover" autoplay> + <source src="{@docRoot}design/media/calendar.mp4" type="video/mp4"> + <source src="{@docRoot}design/media/calendar.webm" type="video/webm"> + <source src="{@docRoot}design/media/calendar.ogv" type="video/ogg"> + </video> + </div> + <div class="figure-caption" style="margin-top:0"> + <div class="video-instructions"> </div> + </div> + </div> --> + + <div class="layout-content-col span-6"> <img src="{@docRoot}design/media/touch_feedback_reaction_response.png"> @@ -18,51 +46,54 @@ user know which object was touched and that your app is "listening".</p> </div> </div> -<h4>States</h4> +<h4 style="clear:both;">States</h4> + <div class="vspace size-1"> </div> <img src="{@docRoot}design/media/touch_feedback_states.png"> <div class="figure-caption"> - Most of Android's UI elements have touch-feedback built in, including states that indicate - whether touching the element will have any effect. + 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="vspace size-3"> </div> <div class="layout-content-row"> - <div class="layout-content-col span-4"> + <div class="layout-content-col span-6"> -<h4>Communication</h4> -<p>When your objects react to more complex gestures, help users understand what the outcome 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> + <h4>Communication</h4> +<p>When your objects react to more complex gestures, help users +understand what the outcome will be.</p> +<p>In Recents, when a user starts swiping a thumbnail left or right, it +begins to dim. This helps the user understand that swiping will cause the +item to be removed.</p> </div> - <div class="layout-content-col span-9"> + <div class="layout-content-col span-7"> <img src="{@docRoot}design/media/touch_feedback_manipulation.png"> </div> </div> +<div class="vspace size-3"> </div> <div class="layout-content-row"> <div class="layout-content-col span-6"> <img src="{@docRoot}design/media/touch_feedback_communication.png"> + <p><em>If a user attempts to scroll past the last home screen panel, the screen + content tilts to the right to indicate that further navigation in this direction + isn’t possible.</em></p> </div> <div class="layout-content-col span-6"> -<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> +<p> + When users try to scroll past the beginning or end of a scrollable area, + communicate the boundary with a visual cue. Many of Android's scrollable UI + widgets, like lists and grid lists, have support for boundary feedback built + in. If you’re building custom widgets, keep boundary feedback in mind and + provide it from within your app. +</p>
\ No newline at end of file diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd index 818af4c24b83..3c201f76cd88 100644 --- a/docs/html/design/style/typography.jd +++ b/docs/html/design/style/typography.jd @@ -12,7 +12,7 @@ page.tags="textview","font" <p> <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto ZIP']);" - href="{@docRoot}downloads/design/roboto-1.100141.zip">Download Roboto</a> + href="{@docRoot}downloads/design/roboto-1.2.zip">Download Roboto</a> </p> <p>The Android design language relies on traditional typographic tools such as scale, space, rhythm, @@ -30,7 +30,7 @@ variant in regular and bold weights, along with an italic style for each weight. <img src="{@docRoot}design/media/typography_variants@2x.png" width="220"> <p><a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specimen Booke (@typography page)']);" - href="{@docRoot}downloads/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a></p> + href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a></p> </div> </div> diff --git a/docs/html/design/style/writing.jd b/docs/html/design/style/writing.jd index 5358847afdf7..cda17eb9f35b 100644 --- a/docs/html/design/style/writing.jd +++ b/docs/html/design/style/writing.jd @@ -2,46 +2,24 @@ page.title=Writing Style page.tags="dialog","toast","notification" @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="voa">Android's Voice</h2> -<h2 id="examples">Examples</h2> +<p>When writing text that appears in your app, keep it concise, simple, and friendly.</p> -<ol><li class="value-1"><strong>Keep it brief.</strong> From the setup wizard:</ol> +<h4 id="concise">Concise</h4> + +<ul> + <li>Describe only what the user needs to know.</li> + <li>Eliminate redundancy, such as titles that restate the body of an information box.</li> + <li>Keep text as short as possible.</li> +</ul> + +<p><em>Avoid wordy, stilted text</em></p> <div class="layout-content-row"> <div class="layout-content-col span-6 layout-with-list-item-margins"> - <div class="do-dont-label bad">Too formal</div> + <div class="do-dont-label bad">Don't</div> <table class="ui-table good"><tbody><tr><td> Consult the documentation that came with your phone for further instructions. @@ -50,7 +28,7 @@ page.tags="dialog","toast","notification" </div> <div class="layout-content-col span-6"> - <div class="do-dont-label good">Better</div> + <div class="do-dont-label good">Do</div> <table class="ui-table good"><tbody><tr><td> Read the instructions that came with your phone. @@ -59,27 +37,27 @@ page.tags="dialog","toast","notification" </div> </div> -<div class="vspace size-1"> </div> - -<ol><li class="value-2"><strong>Keep it simple.</strong> From the Location settings screen:</ol> +<p><em>Don't provide unnecessary information</em></p> <div class="layout-content-row"> <div class="layout-content-col span-6 layout-with-list-item-margins"> - <div class="do-dont-label bad">Confusing</div> + <div class="do-dont-label bad">From a Setup Wizard screen</div> <table class="ui-table bad"> <thead> <tr> <th> - Use GPS satellites + Signing in... </th> </tr> </thead> <tbody> <tr> <td> - When locating, accurate to street level. + 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> @@ -88,20 +66,21 @@ page.tags="dialog","toast","notification" </div> <div class="layout-content-col span-6"> - <div class="do-dont-label good">Better</div> + <div class="do-dont-label good">From a Setup Wizard screen</div> <table class="ui-table good"> <thead> <tr> <th> - GPS + Signing in... </th> </tr> </thead> <tbody> <tr> <td> - Let apps use satellites to pinpoint your location. + Your phone is contacting Google.<br> + This can take up to 5 minutes. </td> </tr> </tbody> @@ -110,143 +89,111 @@ page.tags="dialog","toast","notification" </div> </div> -<div class="vspace size-1"> </div> +<h4 id="simple">Simple</h4> + +<ul> + <li>Use short words, active verbs, and common nouns.</li> + <li>Put the most important thing first. “Front-load” the first 11 characters + with the most salient information in the string.</li> + <li>Don’t try to explain subtle differences. They are lost on most users.</li> +</ul> -<ol><li class="value-3"><strong>Be friendly.</strong> Dialog that appears when an application -crashes:</ol> +<p><em>Focus on the user's concern, not technical details</em></p> <div class="layout-content-row"> <div class="layout-content-col span-6 layout-with-list-item-margins"> - <div class="do-dont-label bad">Confusing and annoying—"Sorry" just rubs salt in the - wound.</div> + <div class="do-dont-label bad">Don't</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> + <table class="ui-table good"><tbody><tr><td> + Manually control GPS to prevent other apps from using it + </td></tr></tbody></table> </div> <div class="layout-content-col span-6"> - <div class="do-dont-label good">Shorter, more direct, no faux-apologetic title:<br><br></div> + <div class="do-dont-label good">Do</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> + <table class="ui-table good"><tbody><tr><td> + To save power, switch Location mode to Battery saving + </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> +<p><em>Put top news first</em></p> <div class="layout-content-row"> <div class="layout-content-col span-6 layout-with-list-item-margins"> - <div class="do-dont-label bad">Top news last</div> + <div class="do-dont-label bad">Don't</div> - <table class="ui-table bad"><tbody><tr><td> - 77 other people +1'd this, including Larry Page. + <table class="ui-table good"><tbody><tr><td> + 77 other people +1’d this, including Larry Page </td></tr></tbody></table> </div> <div class="layout-content-col span-6"> - <div class="do-dont-label good">Top news first</div> + <div class="do-dont-label good">Do</div> <table class="ui-table good"><tbody><tr><td> - Larry Page and 77 others +1'd this. + Larry Page and 76 others +1’d this </td></tr></tbody></table> </div> </div> +<p><em>Put the user's goal first</em></p> + <div class="layout-content-row"> <div class="layout-content-col span-6 layout-with-list-item-margins"> - <div class="do-dont-label bad">Task last</div> + <div class="do-dont-label bad">Don't</div> - <table class="ui-table bad"><tbody><tr><td> - Touch Next to complete setup using a Wi-Fi connection. + <table class="ui-table good"><tbody><tr><td> + Touch Next to complete setup using a Wi-Fi connection </td></tr></tbody></table> </div> <div class="layout-content-col span-6"> - <div class="do-dont-label good">Task first</div> + <div class="do-dont-label good">Do</div> <table class="ui-table good"><tbody><tr><td> - To finish setup using Wi-Fi, touch Next. + 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> +<h4 id="friendly">Friendly</h4> +<ul> + <li>Use contractions.</li> + <li>Talk directly to the reader. Use “you” to refer to the reader.</li> + <li>Keep your tone casual and conversational, but avoid slang.</li> +</li> +</ul> + +<p><em>Avoid being confusing or annoying</em></p> <div class="layout-content-row"> <div class="layout-content-col span-6 layout-with-list-item-margins"> - - <div class="do-dont-label bad">From a Setup Wizard screen</div> - + <div class="do-dont-label bad">Don't</div> <table class="ui-table bad"> <thead> <tr> <th> - Signing in... + Sorry! </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. + Activity MyAppActivity (in application<br /> + MyApp) is not responding </td> </tr> </tbody> @@ -254,26 +201,122 @@ crashes:</ol> </div> <div class="layout-content-col span-6"> - - <div class="do-dont-label good">From a Setup Wizard screen</div> - + <div class="do-dont-label good">Do</div> <table class="ui-table good"> <thead> <tr> <th> - Signing in... + MyApp isn’t responding </th> </tr> </thead> <tbody> <tr> <td> - Your phone is contacting Google.<br> - This can take up to 5 minutes. + Do you want to close it? </td> </tr> </tbody> </table> - </div> </div> + + +<h4>Words to avoid</h4> + +<div style="padding:5px 2.1em;"> +<table> + <tr> + <td class="do-dont-label bad" style="width:40%">Don't use</td> + <td class="do-dont-label good" style="width:40%">Use</td> + </tr> + <tr> + <td>one, two, three, four, ...</td> + <td>1, 2, 3, 4, ...</td> + </tr> + <tr> + <td>application</td> + <td>app</td> + </tr> + <tr> + <td>cannot, could not, do not, did not +will not, you will</td> + <td><em>Contractions:</em> can’t, couldn’t, don’t, didn’t won’t, you’ll, and so on</td> + </tr> + <tr> + <td>okay, ok</td> + <td>OK</td> + </tr> + <tr> + <td>please, sorry, thank you</td> + <td><em>Attempts at politeness can annoy the user, especially in messages that say + something has gone wrong.<br /> + Exception: In Japanese, “please” is mandatory and imperative verbs should + be localized accordingly (turn on -> please turn on). + </em></td> + </tr> + <tr> + <td>there is, there are, it is<br /> + <em>and other “disappeared” subjects (grammatical expletives)</em></td> + <td><em>Use a noun as the subject</em></td> + </tr> + <tr> + <td>abort, kill, terminate</td> + <td>stop, cancel, end, exit</td> + </tr> + <tr> + <td>fail, failed, <em>negative language</em></td> + <td><em>In general, use positive phrasing<br /> + (for example, “do” rather than “don’t,” except in cases such as “Don’t show + again,” “Can’t connect,” and so on.)</em></td> + </tr> + <tr> + <td>me, I, my, mine</td> + <td>you, your, yours</td> + </tr> + <tr> + <td>Are you sure? Warning!</td> + <td><em>Tell user the consequence instead, for example, “You’ll lose all photos + and media”</em></td> + </tr> +</table> + +</div> + +<h2 id="formatting_text">Formatting text</h2> + +<h4 id="capitalization">Capitalization</h4> + +<ul> + <li>Use sentence-style capitalization for all UI strings: “Words to live by.”</li> + <li>Capitalize all important words in: + <ul> + <li>App names (Calendar, Google Drive)</li> + <li>Named features (Android Beam, Face Unlock)</li> + <li>Proper nouns (Statue of Liberty, San Francisco Giants)</li> + </ul> + </li> + <li>Be conservative. Don't capitalize words that aren't part of a formal feature name: + <ul> + <li>Sim card lock, Home screen, not Sim Card Lock, Home Screen.</li> + </ul> + </li> +</ul> + + +<h4 id="punctuation">Punctuation</h4> +<ul> + <li><strong>Period.</strong> Don't use a period after a single sentence or + phrase used in isolation, such as in a toast, label, or notification. Wherever two or + more sentences run together, use a period for each sentence. </li> + <li><strong>Ellipsis.</strong> Use the ellipsis character (…) (Option-; on MacOS and &hellip; + in HTML) to indicate + <ul> + <li>Incompleteness, such as an action in progress (“Downloading...”) or truncated text.</li> + <li>That a menu item (such as Print… or Share…) leads to further UI involving significant + choices. Exception: Commands whose wording already implies further (but limited) UI, such + as <strong>Find in page</strong> or <strong>Pick a date</strong>, do not require an + ellipsis. </li> + </ul> + </li> +</ul>
\ No newline at end of file diff --git a/docs/html/design/videos/index.jd b/docs/html/design/videos/index.jd index 91a784a0b31e..976767d263d4 100644 --- a/docs/html/design/videos/index.jd +++ b/docs/html/design/videos/index.jd @@ -46,7 +46,7 @@ page.title=Videos <div class="layout-content-row"> <div class="layout-content-col span-7"> <h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326483138">Agile UX Research Practice in Android</a></h3> - <p>In the Android UX team, it is critical to get user feedback frequently and consistently so that we are able to iterate and develop the best-in-class designs for our users. We will discuss how the team applied ""Pulse Studies"" (iterative research sessions) in order to put new ideas, designs, and concepts in front of users on a regular basis; it requires minimal advance planning, it can have an immediate product impact, and it can meet urgent needs. </p> + <p>In the Android UX team, it is critical to get user feedback frequently and consistently so that we are able to iterate and develop the best-in-class designs for our users. We will discuss how the team applied "Pulse Studies" (iterative research sessions) in order to put new ideas, designs, and concepts in front of users on a regular basis; it requires minimal advance planning, it can have an immediate product impact, and it can meet urgent needs. </p> </div> <div class="layout-content-col span-6"> <iframe width="355" height="200" src="//www.youtube.com/embed/6MOeVNbh9cY" frameborder="0" allowfullscreen=""></iframe> |
