diff --git a/docs/html/design/building-blocks/progress.jd b/docs/html/design/building-blocks/progress.jd index 60ad2cad346f7..90732f49a3572 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"

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.

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.

-

-
Don't
- -
- -
-
Do
- +
+

diff --git a/docs/html/design/building-blocks/scrolling.jd b/docs/html/design/building-blocks/scrolling.jd index 66999f9fc7ccd..13b3b09fe28be 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.

Appears during scrolling to indicate what portion of the content is currently in view.

-
+
@@ -101,7 +96,9 @@ notification opens the associated app. -

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.

+

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.

Swiping a notification right or left removes it from the notification drawer.

@@ -114,34 +111,30 @@ notification opens the associated app.
- +
-

A typical Android app consists of action bars and the app content area.

+

A typical Android app uses action bars, and many apps will include a navigation drawer.

  1. -

    Main Action Bar

    -

    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.

    +

    Action Bar

    +

    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.

    More on the Action Bar

  2. -

    View Control

    -

    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.

    +

    Navigation Drawer

    +

    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.

    +

    More on the Navigation Drawer

  3. Content Area

    The space where the content of your app is displayed.

    4. -
  4. -

    Split Action Bar

    -

    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.

    -
diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd index 1e6b40c5876bf..8f73d9ce0e853 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; } @@ -20,10 +24,11 @@ footer.hide=1
Welcome to Android Design, your place for learning how to design exceptional Android apps.

- Creative Vision + Want to know what Android 4.4 KitKat has for designers? See New in Android.

+ Creative Vision
- - - + +
+ diff --git a/docs/html/design/media/accessibility_contentdesc.png b/docs/html/design/media/accessibility_contentdesc.png index 651571152ba84..c9064efce57fb 100644 Binary files a/docs/html/design/media/accessibility_contentdesc.png and b/docs/html/design/media/accessibility_contentdesc.png differ diff --git a/docs/html/design/media/action_bar_pattern_considerations.png b/docs/html/design/media/action_bar_pattern_considerations.png index 022288c8318aa..c3248fc84021d 100644 Binary files a/docs/html/design/media/action_bar_pattern_considerations.png and b/docs/html/design/media/action_bar_pattern_considerations.png differ diff --git a/docs/html/design/media/action_bar_pattern_overview.png b/docs/html/design/media/action_bar_pattern_overview.png index 83a986bc35845..64e7b22194e95 100644 Binary files a/docs/html/design/media/action_bar_pattern_overview.png and b/docs/html/design/media/action_bar_pattern_overview.png differ diff --git a/docs/html/design/media/action_bar_pattern_rotation.png b/docs/html/design/media/action_bar_pattern_rotation.png index 5b9a6567ef885..7fa721f298bbc 100644 Binary files a/docs/html/design/media/action_bar_pattern_rotation.png and b/docs/html/design/media/action_bar_pattern_rotation.png differ 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 index 10660944d4c6f..81fb5f5728d2c 100644 Binary files a/docs/html/design/media/app_structure_book_detail_page_flip.png and b/docs/html/design/media/app_structure_book_detail_page_flip.png differ diff --git a/docs/html/design/media/app_structure_drawer.png b/docs/html/design/media/app_structure_drawer.png index 560e8341f32d6..a0ea62076bb15 100644 Binary files a/docs/html/design/media/app_structure_drawer.png and b/docs/html/design/media/app_structure_drawer.png differ diff --git a/docs/html/design/media/app_structure_fixedtabs.png b/docs/html/design/media/app_structure_fixedtabs.png index 6d1c63b8217a7..0f371970cc9a3 100644 Binary files a/docs/html/design/media/app_structure_fixedtabs.png and b/docs/html/design/media/app_structure_fixedtabs.png differ diff --git a/docs/html/design/media/app_structure_gallery_filmstrip.png b/docs/html/design/media/app_structure_gallery_filmstrip.png index a937533053c6b..6fffb4550b83e 100644 Binary files a/docs/html/design/media/app_structure_gallery_filmstrip.png and b/docs/html/design/media/app_structure_gallery_filmstrip.png differ diff --git a/docs/html/design/media/app_structure_gmail.png b/docs/html/design/media/app_structure_gmail.png index 33ae0920843b5..bc641f760f2ee 100644 Binary files a/docs/html/design/media/app_structure_gmail.png and b/docs/html/design/media/app_structure_gmail.png differ diff --git a/docs/html/design/media/app_structure_gmail_swipe.png b/docs/html/design/media/app_structure_gmail_swipe.png index 8f6f71ca523bf..7afc2a94eb346 100644 Binary files a/docs/html/design/media/app_structure_gmail_swipe.png and b/docs/html/design/media/app_structure_gmail_swipe.png differ diff --git a/docs/html/design/media/app_structure_market.png b/docs/html/design/media/app_structure_market.png index 7ab0189e88557..ef09fee23b1d9 100644 Binary files a/docs/html/design/media/app_structure_market.png and b/docs/html/design/media/app_structure_market.png differ diff --git a/docs/html/design/media/app_structure_people_detail.png b/docs/html/design/media/app_structure_people_detail.png index de54e828612b9..5eb145778815c 100644 Binary files a/docs/html/design/media/app_structure_people_detail.png and b/docs/html/design/media/app_structure_people_detail.png differ diff --git a/docs/html/design/media/app_structure_scrolltabs.png b/docs/html/design/media/app_structure_scrolltabs.png index 3c20436124da3..16f729ac7dd56 100644 Binary files a/docs/html/design/media/app_structure_scrolltabs.png and b/docs/html/design/media/app_structure_scrolltabs.png differ diff --git a/docs/html/design/media/app_structure_shortcut_on_item.png b/docs/html/design/media/app_structure_shortcut_on_item.png index 3b10cb98bd690..6a76977bc77b6 100644 Binary files a/docs/html/design/media/app_structure_shortcut_on_item.png and b/docs/html/design/media/app_structure_shortcut_on_item.png differ diff --git a/docs/html/design/media/branding_googlemusic.png b/docs/html/design/media/branding_googlemusic.png new file mode 100644 index 0000000000000..1e1df8b0b89a0 Binary files /dev/null and b/docs/html/design/media/branding_googlemusic.png differ diff --git a/docs/html/design/media/branding_launcher_icon.png b/docs/html/design/media/branding_launcher_icon.png new file mode 100644 index 0000000000000..35ba5d61282a5 Binary files /dev/null and b/docs/html/design/media/branding_launcher_icon.png differ diff --git a/docs/html/design/media/branding_logo_icon_action_bar.png b/docs/html/design/media/branding_logo_icon_action_bar.png new file mode 100644 index 0000000000000..f6ee89fd2afac Binary files /dev/null and b/docs/html/design/media/branding_logo_icon_action_bar.png differ diff --git a/docs/html/design/media/branding_wallet.png b/docs/html/design/media/branding_wallet.png new file mode 100644 index 0000000000000..e1602b10bc00f Binary files /dev/null and b/docs/html/design/media/branding_wallet.png differ diff --git a/docs/html/design/media/building_blocks_landing.png b/docs/html/design/media/building_blocks_landing.png index 40ab0da9386a8..1844b107b3a88 100644 Binary files a/docs/html/design/media/building_blocks_landing.png and b/docs/html/design/media/building_blocks_landing.png differ diff --git a/docs/html/design/media/buttons_default_small.png b/docs/html/design/media/buttons_default_small.png index 3e776ed24ea42..fa27ca5832965 100644 Binary files a/docs/html/design/media/buttons_default_small.png and b/docs/html/design/media/buttons_default_small.png differ diff --git a/docs/html/design/media/calendar.mp4 b/docs/html/design/media/calendar.mp4 new file mode 100644 index 0000000000000..cdd72d2b6dd95 Binary files /dev/null and b/docs/html/design/media/calendar.mp4 differ diff --git a/docs/html/design/media/calendar.ogv b/docs/html/design/media/calendar.ogv new file mode 100644 index 0000000000000..efb23d21407f6 Binary files /dev/null and b/docs/html/design/media/calendar.ogv differ diff --git a/docs/html/design/media/calendar.webm b/docs/html/design/media/calendar.webm new file mode 100644 index 0000000000000..9d7d9f266a349 Binary files /dev/null and b/docs/html/design/media/calendar.webm differ diff --git a/docs/html/design/media/confirm_ack_acknowledge.png b/docs/html/design/media/confirm_ack_acknowledge.png index b78eb14a36214..adf608f7ba2e9 100644 Binary files a/docs/html/design/media/confirm_ack_acknowledge.png and b/docs/html/design/media/confirm_ack_acknowledge.png differ diff --git a/docs/html/design/media/confirm_ack_draft_deleted.png b/docs/html/design/media/confirm_ack_draft_deleted.png index f189db930c94a..cf1cd6e7d2d91 100644 Binary files a/docs/html/design/media/confirm_ack_draft_deleted.png and b/docs/html/design/media/confirm_ack_draft_deleted.png differ diff --git a/docs/html/design/media/confirm_ack_ex_draftsave.png b/docs/html/design/media/confirm_ack_ex_draftsave.png index 473368d8b1be8..636edc7d103f1 100644 Binary files a/docs/html/design/media/confirm_ack_ex_draftsave.png and b/docs/html/design/media/confirm_ack_ex_draftsave.png differ diff --git a/docs/html/design/media/confirm_ack_ex_removeapp.png b/docs/html/design/media/confirm_ack_ex_removeapp.png index 0abacce1785e7..49f2e5559e54a 100644 Binary files a/docs/html/design/media/confirm_ack_ex_removeapp.png and b/docs/html/design/media/confirm_ack_ex_removeapp.png differ diff --git a/docs/html/design/media/creative_vision_main.png b/docs/html/design/media/creative_vision_main.png index 2b3bb2f80257d..4db1fd5e5d291 100644 Binary files a/docs/html/design/media/creative_vision_main.png and b/docs/html/design/media/creative_vision_main.png differ diff --git a/docs/html/design/media/design_elements_landing.png b/docs/html/design/media/design_elements_landing.png index d078cef340d40..3a70aea3a0b7c 100644 Binary files a/docs/html/design/media/design_elements_landing.png and b/docs/html/design/media/design_elements_landing.png differ diff --git a/docs/html/design/media/devices_displays_density@2x.png b/docs/html/design/media/devices_displays_density@2x.png index 79a46b08c9d11..cdd45a88e2383 100644 Binary files a/docs/html/design/media/devices_displays_density@2x.png and b/docs/html/design/media/devices_displays_density@2x.png differ diff --git a/docs/html/design/media/dialogs_examples.png b/docs/html/design/media/dialogs_examples.png index 981c5f3775601..c136476c6ce06 100644 Binary files a/docs/html/design/media/dialogs_examples.png and b/docs/html/design/media/dialogs_examples.png differ diff --git a/docs/html/design/media/dialogs_main.png b/docs/html/design/media/dialogs_main.png index b95266adab81a..042715104718e 100644 Binary files a/docs/html/design/media/dialogs_main.png and b/docs/html/design/media/dialogs_main.png differ diff --git a/docs/html/design/media/dialogs_popups_example.png b/docs/html/design/media/dialogs_popups_example.png index c7536f3f1896f..6c98b1fc4cc49 100644 Binary files a/docs/html/design/media/dialogs_popups_example.png and b/docs/html/design/media/dialogs_popups_example.png differ diff --git a/docs/html/design/media/dialogs_toasts.png b/docs/html/design/media/dialogs_toasts.png index cc0b81586bd30..b12778cd83bf1 100644 Binary files a/docs/html/design/media/dialogs_toasts.png and b/docs/html/design/media/dialogs_toasts.png differ diff --git a/docs/html/design/media/documents-export-2013-10-29.zip b/docs/html/design/media/documents-export-2013-10-29.zip new file mode 100644 index 0000000000000..d24a798d36c05 Binary files /dev/null and b/docs/html/design/media/documents-export-2013-10-29.zip differ diff --git a/docs/html/design/media/downloads_color_swatches.png b/docs/html/design/media/downloads_color_swatches.png index af2b24fd9b099..ed9b28d8e1954 100644 Binary files a/docs/html/design/media/downloads_color_swatches.png and b/docs/html/design/media/downloads_color_swatches.png differ diff --git a/docs/html/design/media/downloads_stencils.png b/docs/html/design/media/downloads_stencils.png index 9b1a9feb0a101..71c6b0cfc677a 100644 Binary files a/docs/html/design/media/downloads_stencils.png and b/docs/html/design/media/downloads_stencils.png differ diff --git a/docs/html/design/media/fullscreen_immersive_swipe_bottom.png b/docs/html/design/media/fullscreen_immersive_swipe_bottom.png new file mode 100644 index 0000000000000..8dc232c910821 Binary files /dev/null and b/docs/html/design/media/fullscreen_immersive_swipe_bottom.png differ diff --git a/docs/html/design/media/fullscreen_immersive_swipe_top.png b/docs/html/design/media/fullscreen_immersive_swipe_top.png new file mode 100644 index 0000000000000..5fbe2efa89f2d Binary files /dev/null and b/docs/html/design/media/fullscreen_immersive_swipe_top.png differ diff --git a/docs/html/design/media/fullscreen_landing.png b/docs/html/design/media/fullscreen_landing.png new file mode 100644 index 0000000000000..d627936b8f2d1 Binary files /dev/null and b/docs/html/design/media/fullscreen_landing.png differ diff --git a/docs/html/design/media/fullscreen_leanback.png b/docs/html/design/media/fullscreen_leanback.png new file mode 100644 index 0000000000000..568fe38935d86 Binary files /dev/null and b/docs/html/design/media/fullscreen_leanback.png differ diff --git a/docs/html/design/media/gesture_doubletouch.png b/docs/html/design/media/gesture_doubletouch.png index 4c68ae6546263..7acae262abc36 100644 Binary files a/docs/html/design/media/gesture_doubletouch.png and b/docs/html/design/media/gesture_doubletouch.png differ diff --git a/docs/html/design/media/gesture_doubletouchdrag.png b/docs/html/design/media/gesture_doubletouchdrag.png new file mode 100644 index 0000000000000..d2cef40803d79 Binary files /dev/null and b/docs/html/design/media/gesture_doubletouchdrag.png differ diff --git a/docs/html/design/media/gesture_drag.png b/docs/html/design/media/gesture_drag.png index cb0d72c0cb55f..79549af804700 100644 Binary files a/docs/html/design/media/gesture_drag.png and b/docs/html/design/media/gesture_drag.png differ diff --git a/docs/html/design/media/gesture_longtouch.png b/docs/html/design/media/gesture_longtouch.png index 30d13d4e310ee..983b724d51317 100644 Binary files a/docs/html/design/media/gesture_longtouch.png and b/docs/html/design/media/gesture_longtouch.png differ diff --git a/docs/html/design/media/gesture_pinchclose.png b/docs/html/design/media/gesture_pinchclose.png index daf29058c9725..749b447302757 100644 Binary files a/docs/html/design/media/gesture_pinchclose.png and b/docs/html/design/media/gesture_pinchclose.png differ diff --git a/docs/html/design/media/gesture_pinchopen.png b/docs/html/design/media/gesture_pinchopen.png index c05b633cbe818..a0869e2707072 100644 Binary files a/docs/html/design/media/gesture_pinchopen.png and b/docs/html/design/media/gesture_pinchopen.png differ diff --git a/docs/html/design/media/gesture_swipe.png b/docs/html/design/media/gesture_swipe.png index 6f47df60c9103..befaf1aeaa2d9 100644 Binary files a/docs/html/design/media/gesture_swipe.png and b/docs/html/design/media/gesture_swipe.png differ diff --git a/docs/html/design/media/gesture_touch.png b/docs/html/design/media/gesture_touch.png index 365c3523a8196..9fa8a75426cf9 100644 Binary files a/docs/html/design/media/gesture_touch.png and b/docs/html/design/media/gesture_touch.png differ diff --git a/docs/html/design/media/help_cling.png b/docs/html/design/media/help_cling.png index c91d18916224f..13ea7203d4737 100644 Binary files a/docs/html/design/media/help_cling.png and b/docs/html/design/media/help_cling.png differ diff --git a/docs/html/design/media/iconography_launcher_example.png b/docs/html/design/media/iconography_launcher_example.png index 0cce7ef90e2ea..58dbb4e6a3d12 100644 Binary files a/docs/html/design/media/iconography_launcher_example.png and b/docs/html/design/media/iconography_launcher_example.png differ diff --git a/docs/html/design/media/iconography_launcher_example2.png b/docs/html/design/media/iconography_launcher_example2.png index 5a709e2f7fa10..1dcc91b6c8649 100644 Binary files a/docs/html/design/media/iconography_launcher_example2.png and b/docs/html/design/media/iconography_launcher_example2.png differ diff --git a/docs/html/design/media/iconography_overview.png b/docs/html/design/media/iconography_overview.png index 56cd4098072b8..b90b7978b6ec1 100644 Binary files a/docs/html/design/media/iconography_overview.png and b/docs/html/design/media/iconography_overview.png differ diff --git a/docs/html/design/media/index_landing_page.png b/docs/html/design/media/index_landing_page.png index 2065344439042..078eb4debb401 100644 Binary files a/docs/html/design/media/index_landing_page.png and b/docs/html/design/media/index_landing_page.png differ diff --git a/docs/html/design/media/metrics_diagram.png b/docs/html/design/media/metrics_diagram.png index 5cbe252004344..888f484fae0f3 100644 Binary files a/docs/html/design/media/metrics_diagram.png and b/docs/html/design/media/metrics_diagram.png differ diff --git a/docs/html/design/media/migrating_ios_dialers.png b/docs/html/design/media/migrating_ios_dialers.png index a9230bcf492f0..cf36c18340b76 100644 Binary files a/docs/html/design/media/migrating_ios_dialers.png and b/docs/html/design/media/migrating_ios_dialers.png differ diff --git a/docs/html/design/media/migrating_ios_galleries.png b/docs/html/design/media/migrating_ios_galleries.png index 6bc1351a71939..05b511d731bcd 100644 Binary files a/docs/html/design/media/migrating_ios_galleries.png and b/docs/html/design/media/migrating_ios_galleries.png differ diff --git a/docs/html/design/media/migrating_ios_settings.png b/docs/html/design/media/migrating_ios_settings.png index 5b335fecf6996..d2412732926f3 100644 Binary files a/docs/html/design/media/migrating_ios_settings.png and b/docs/html/design/media/migrating_ios_settings.png differ diff --git a/docs/html/design/media/multipane_expand.png b/docs/html/design/media/multipane_expand.png index 6014cc83a61d3..627de755ff3c3 100644 Binary files a/docs/html/design/media/multipane_expand.png and b/docs/html/design/media/multipane_expand.png differ diff --git a/docs/html/design/media/multipane_show.png b/docs/html/design/media/multipane_show.png index 9993c9b5c6582..b2ac57c81e1f0 100644 Binary files a/docs/html/design/media/multipane_show.png and b/docs/html/design/media/multipane_show.png differ diff --git a/docs/html/design/media/multipane_stack.png b/docs/html/design/media/multipane_stack.png index 567099e64bd0d..d411ad55b79da 100644 Binary files a/docs/html/design/media/multipane_stack.png and b/docs/html/design/media/multipane_stack.png differ diff --git a/docs/html/design/media/multipane_stretch.png b/docs/html/design/media/multipane_stretch.png index b2dca02d7a3c7..8d12254338dc5 100644 Binary files a/docs/html/design/media/multipane_stretch.png and b/docs/html/design/media/multipane_stretch.png differ diff --git a/docs/html/design/media/multipane_view_tablet.png b/docs/html/design/media/multipane_view_tablet.png index f116b6f12e04e..d59308a97e586 100644 Binary files a/docs/html/design/media/multipane_view_tablet.png and b/docs/html/design/media/multipane_view_tablet.png differ diff --git a/docs/html/design/media/multipane_views.png b/docs/html/design/media/multipane_views.png index 40b8af65d10dc..1f1ad5eee0895 100644 Binary files a/docs/html/design/media/multipane_views.png and b/docs/html/design/media/multipane_views.png differ diff --git a/docs/html/design/media/navigation_between_apps_back.png b/docs/html/design/media/navigation_between_apps_back.png index d5cd979de7742..a81737454083f 100644 Binary files a/docs/html/design/media/navigation_between_apps_back.png and b/docs/html/design/media/navigation_between_apps_back.png differ diff --git a/docs/html/design/media/navigation_between_apps_inward.png b/docs/html/design/media/navigation_between_apps_inward.png index 7394b1cd9e4cb..321d0da3cf892 100644 Binary files a/docs/html/design/media/navigation_between_apps_inward.png and b/docs/html/design/media/navigation_between_apps_inward.png differ diff --git a/docs/html/design/media/navigation_between_apps_up.png b/docs/html/design/media/navigation_between_apps_up.png index 99c311204e90d..42d0d8f24e3dd 100644 Binary files a/docs/html/design/media/navigation_between_apps_up.png and b/docs/html/design/media/navigation_between_apps_up.png differ diff --git a/docs/html/design/media/navigation_between_siblings_gmail.png b/docs/html/design/media/navigation_between_siblings_gmail.png index 64f06c66a3379..f4c7e0feb0eb9 100644 Binary files a/docs/html/design/media/navigation_between_siblings_gmail.png and b/docs/html/design/media/navigation_between_siblings_gmail.png differ diff --git a/docs/html/design/media/navigation_between_siblings_market1.png b/docs/html/design/media/navigation_between_siblings_market1.png index b12a43202ac47..c22a831b3824e 100644 Binary files a/docs/html/design/media/navigation_between_siblings_market1.png and b/docs/html/design/media/navigation_between_siblings_market1.png differ diff --git a/docs/html/design/media/navigation_between_siblings_market2.png b/docs/html/design/media/navigation_between_siblings_market2.png index a09d9d7a6e085..af483e1fc361b 100644 Binary files a/docs/html/design/media/navigation_between_siblings_market2.png and b/docs/html/design/media/navigation_between_siblings_market2.png differ diff --git a/docs/html/design/media/navigation_drawer_CAB.png b/docs/html/design/media/navigation_drawer_CAB.png index 9d4a5b56d9bf2..819812bcdb843 100644 Binary files a/docs/html/design/media/navigation_drawer_CAB.png and b/docs/html/design/media/navigation_drawer_CAB.png differ diff --git a/docs/html/design/media/navigation_drawer_collapse.png b/docs/html/design/media/navigation_drawer_collapse.png index 7ca56da79119e..8417ab9db9db1 100644 Binary files a/docs/html/design/media/navigation_drawer_collapse.png and b/docs/html/design/media/navigation_drawer_collapse.png differ diff --git a/docs/html/design/media/navigation_drawer_cross_nav.png b/docs/html/design/media/navigation_drawer_cross_nav.png index bf8d238d26557..ea8c28411aa35 100644 Binary files a/docs/html/design/media/navigation_drawer_cross_nav.png and b/docs/html/design/media/navigation_drawer_cross_nav.png differ diff --git a/docs/html/design/media/navigation_drawer_first_run.png b/docs/html/design/media/navigation_drawer_first_run.png index 728f29fc2a6cc..8ec6fc40f52ea 100644 Binary files a/docs/html/design/media/navigation_drawer_first_run.png and b/docs/html/design/media/navigation_drawer_first_run.png differ diff --git a/docs/html/design/media/navigation_drawer_holo_dark_light.png b/docs/html/design/media/navigation_drawer_holo_dark_light.png index dcb91ab9b0505..17be5fd18d3af 100644 Binary files a/docs/html/design/media/navigation_drawer_holo_dark_light.png and b/docs/html/design/media/navigation_drawer_holo_dark_light.png differ diff --git a/docs/html/design/media/navigation_drawer_layout.png b/docs/html/design/media/navigation_drawer_layout.png index e59b37c757c43..8d383f9b122c3 100644 Binary files a/docs/html/design/media/navigation_drawer_layout.png and b/docs/html/design/media/navigation_drawer_layout.png differ diff --git a/docs/html/design/media/navigation_drawer_nav_and_actions.png b/docs/html/design/media/navigation_drawer_nav_and_actions.png index 0df04e9199c80..601abd74c201f 100644 Binary files a/docs/html/design/media/navigation_drawer_nav_and_actions.png and b/docs/html/design/media/navigation_drawer_nav_and_actions.png differ diff --git a/docs/html/design/media/navigation_drawer_navigation_hubs.png b/docs/html/design/media/navigation_drawer_navigation_hubs.png index 9f4b244fc138b..6a7d3735ea5b4 100644 Binary files a/docs/html/design/media/navigation_drawer_navigation_hubs.png and b/docs/html/design/media/navigation_drawer_navigation_hubs.png differ diff --git a/docs/html/design/media/navigation_drawer_open_from_lower.png b/docs/html/design/media/navigation_drawer_open_from_lower.png index ec5f03dd1cb42..cbde9eece9606 100644 Binary files a/docs/html/design/media/navigation_drawer_open_from_lower.png and b/docs/html/design/media/navigation_drawer_open_from_lower.png differ diff --git a/docs/html/design/media/navigation_drawer_open_overflow.png b/docs/html/design/media/navigation_drawer_open_overflow.png index 112a414d391d1..84e4a35cedc14 100644 Binary files a/docs/html/design/media/navigation_drawer_open_overflow.png and b/docs/html/design/media/navigation_drawer_open_overflow.png differ diff --git a/docs/html/design/media/navigation_drawer_overview.png b/docs/html/design/media/navigation_drawer_overview.png index 42d21fadf772d..f561ea78b92f5 100644 Binary files a/docs/html/design/media/navigation_drawer_overview.png and b/docs/html/design/media/navigation_drawer_overview.png differ diff --git a/docs/html/design/media/navigation_drawer_peek.png b/docs/html/design/media/navigation_drawer_peek.png index c59881e133835..f51cb29e71f0f 100644 Binary files a/docs/html/design/media/navigation_drawer_peek.png and b/docs/html/design/media/navigation_drawer_peek.png differ diff --git a/docs/html/design/media/navigation_drawer_quick_to_top.png b/docs/html/design/media/navigation_drawer_quick_to_top.png index 0e44915ce8553..3f24d30c1be45 100644 Binary files a/docs/html/design/media/navigation_drawer_quick_to_top.png and b/docs/html/design/media/navigation_drawer_quick_to_top.png differ diff --git a/docs/html/design/media/navigation_drawer_reset_backstack.png b/docs/html/design/media/navigation_drawer_reset_backstack.png index c0c2f61d79f8b..54226c0de289e 100644 Binary files a/docs/html/design/media/navigation_drawer_reset_backstack.png and b/docs/html/design/media/navigation_drawer_reset_backstack.png differ diff --git a/docs/html/design/media/navigation_drawer_settings_help.png b/docs/html/design/media/navigation_drawer_settings_help.png index ed29971767805..f14c284dbc229 100644 Binary files a/docs/html/design/media/navigation_drawer_settings_help.png and b/docs/html/design/media/navigation_drawer_settings_help.png differ diff --git a/docs/html/design/media/navigation_drawer_titles_icons.png b/docs/html/design/media/navigation_drawer_titles_icons.png index b726c9bb576b9..7cf1e0cd70ccd 100644 Binary files a/docs/html/design/media/navigation_drawer_titles_icons.png and b/docs/html/design/media/navigation_drawer_titles_icons.png differ diff --git a/docs/html/design/media/navigation_drawer_top_out.png b/docs/html/design/media/navigation_drawer_top_out.png index ad92b77bd3976..4f379de02fbb2 100644 Binary files a/docs/html/design/media/navigation_drawer_top_out.png and b/docs/html/design/media/navigation_drawer_top_out.png differ diff --git a/docs/html/design/media/navigation_from_outside_back.png b/docs/html/design/media/navigation_from_outside_back.png index a94e9c3698950..0e1aa041bbb40 100644 Binary files a/docs/html/design/media/navigation_from_outside_back.png and b/docs/html/design/media/navigation_from_outside_back.png differ diff --git a/docs/html/design/media/navigation_indirect_notification.png b/docs/html/design/media/navigation_indirect_notification.png index ca9a1b57bad86..a8b23079a2cdd 100644 Binary files a/docs/html/design/media/navigation_indirect_notification.png and b/docs/html/design/media/navigation_indirect_notification.png differ diff --git a/docs/html/design/media/navigation_popup_notification.png b/docs/html/design/media/navigation_popup_notification.png index 76ed98489e611..4114e3cdbd38d 100644 Binary files a/docs/html/design/media/navigation_popup_notification.png and b/docs/html/design/media/navigation_popup_notification.png differ diff --git a/docs/html/design/media/navigation_up_vs_back_gmail.png b/docs/html/design/media/navigation_up_vs_back_gmail.png index fdeeb904e2615..d5eaa18b174ea 100644 Binary files a/docs/html/design/media/navigation_up_vs_back_gmail.png and b/docs/html/design/media/navigation_up_vs_back_gmail.png differ diff --git a/docs/html/design/media/notifications_dismiss.png b/docs/html/design/media/notifications_dismiss.png index 696a97f19df34..efbec682eb919 100644 Binary files a/docs/html/design/media/notifications_dismiss.png and b/docs/html/design/media/notifications_dismiss.png differ diff --git a/docs/html/design/media/notifications_pattern_phone_icons.png b/docs/html/design/media/notifications_pattern_phone_icons.png index bee66c92e0644..348c9a1f11d2a 100644 Binary files a/docs/html/design/media/notifications_pattern_phone_icons.png and b/docs/html/design/media/notifications_pattern_phone_icons.png differ diff --git a/docs/html/design/media/principles_delight.png b/docs/html/design/media/principles_delight.png index 5d6e909b00a1a..705aa7abcd98b 100644 Binary files a/docs/html/design/media/principles_delight.png and b/docs/html/design/media/principles_delight.png differ diff --git a/docs/html/design/media/principles_get_to_know_me.png b/docs/html/design/media/principles_get_to_know_me.png index 954363f352d01..79026bc0c1766 100644 Binary files a/docs/html/design/media/principles_get_to_know_me.png and b/docs/html/design/media/principles_get_to_know_me.png differ diff --git a/docs/html/design/media/principles_heavy_lifting.png b/docs/html/design/media/principles_heavy_lifting.png index c89c0ffaec731..57097cbb4bab3 100644 Binary files a/docs/html/design/media/principles_heavy_lifting.png and b/docs/html/design/media/principles_heavy_lifting.png differ diff --git a/docs/html/design/media/principles_important_interruption.png b/docs/html/design/media/principles_important_interruption.png index 0576efec79990..df2cd48152673 100644 Binary files a/docs/html/design/media/principles_important_interruption.png and b/docs/html/design/media/principles_important_interruption.png differ diff --git a/docs/html/design/media/principles_looks_same.png b/docs/html/design/media/principles_looks_same.png index 3a556adf6118c..c23bbc39bec04 100644 Binary files a/docs/html/design/media/principles_looks_same.png and b/docs/html/design/media/principles_looks_same.png differ diff --git a/docs/html/design/media/principles_make_important_fast.png b/docs/html/design/media/principles_make_important_fast.png index 26da655682750..b581872178c26 100644 Binary files a/docs/html/design/media/principles_make_important_fast.png and b/docs/html/design/media/principles_make_important_fast.png differ diff --git a/docs/html/design/media/principles_make_it_mine.png b/docs/html/design/media/principles_make_it_mine.png index 683a0b7df81cc..a880b22dd7b76 100644 Binary files a/docs/html/design/media/principles_make_it_mine.png and b/docs/html/design/media/principles_make_it_mine.png differ diff --git a/docs/html/design/media/principles_navigation.png b/docs/html/design/media/principles_navigation.png index c23dde70bb8d1..531f22cd70b5b 100644 Binary files a/docs/html/design/media/principles_navigation.png and b/docs/html/design/media/principles_navigation.png differ diff --git a/docs/html/design/media/principles_real_objects.png b/docs/html/design/media/principles_real_objects.png index 3889c9a38bd70..107c69d0cda40 100644 Binary files a/docs/html/design/media/principles_real_objects.png and b/docs/html/design/media/principles_real_objects.png differ diff --git a/docs/html/design/media/principles_sprinkle_encouragement.png b/docs/html/design/media/principles_sprinkle_encouragement.png index 8617365a51d26..5390951cc7d50 100644 Binary files a/docs/html/design/media/principles_sprinkle_encouragement.png and b/docs/html/design/media/principles_sprinkle_encouragement.png differ diff --git a/docs/html/design/media/progress_activity.png b/docs/html/design/media/progress_activity.png index f4dffab367691..49a6f50248088 100644 Binary files a/docs/html/design/media/progress_activity.png and b/docs/html/design/media/progress_activity.png differ diff --git a/docs/html/design/media/progress_activity_custom.png b/docs/html/design/media/progress_activity_custom.png index 2bfdd521a8ee5..0b45f7639f58f 100644 Binary files a/docs/html/design/media/progress_activity_custom.png and b/docs/html/design/media/progress_activity_custom.png differ diff --git a/docs/html/design/media/progress_activity_do.png b/docs/html/design/media/progress_activity_do.png deleted file mode 100644 index fd224367f09a7..0000000000000 Binary files a/docs/html/design/media/progress_activity_do.png and /dev/null differ diff --git a/docs/html/design/media/progress_activity_do_dont.png b/docs/html/design/media/progress_activity_do_dont.png new file mode 100644 index 0000000000000..ddc4a3303412a Binary files /dev/null and b/docs/html/design/media/progress_activity_do_dont.png differ diff --git a/docs/html/design/media/progress_activity_dont.png b/docs/html/design/media/progress_activity_dont.png deleted file mode 100644 index 08c4b5d29a49d..0000000000000 Binary files a/docs/html/design/media/progress_activity_dont.png and /dev/null differ diff --git a/docs/html/design/media/progress_download.png b/docs/html/design/media/progress_download.png index ab6bf58b4794d..5c9e556569ecc 100644 Binary files a/docs/html/design/media/progress_download.png and b/docs/html/design/media/progress_download.png differ diff --git a/docs/html/design/media/scroll_index.mp4 b/docs/html/design/media/scroll_index.mp4 index 383bbd8604a4d..f7afb46c19ec5 100644 Binary files a/docs/html/design/media/scroll_index.mp4 and b/docs/html/design/media/scroll_index.mp4 differ diff --git a/docs/html/design/media/scroll_index.ogv b/docs/html/design/media/scroll_index.ogv index 2cd61efa72479..378281ba4f849 100644 Binary files a/docs/html/design/media/scroll_index.ogv and b/docs/html/design/media/scroll_index.ogv differ diff --git a/docs/html/design/media/scroll_index.webm b/docs/html/design/media/scroll_index.webm index 5a665d191d043..7e4aa88cfe705 100644 Binary files a/docs/html/design/media/scroll_index.webm and b/docs/html/design/media/scroll_index.webm differ diff --git a/docs/html/design/media/scroll_indicator.mp4 b/docs/html/design/media/scroll_indicator.mp4 index 924852efe74ad..206c1f2cffc25 100644 Binary files a/docs/html/design/media/scroll_indicator.mp4 and b/docs/html/design/media/scroll_indicator.mp4 differ diff --git a/docs/html/design/media/scroll_indicator.ogv b/docs/html/design/media/scroll_indicator.ogv index c037bf5ce045f..4cdc76f193c5d 100644 Binary files a/docs/html/design/media/scroll_indicator.ogv and b/docs/html/design/media/scroll_indicator.ogv differ diff --git a/docs/html/design/media/scroll_indicator.webm b/docs/html/design/media/scroll_indicator.webm index 000dc0a7aad04..b848c205a835a 100644 Binary files a/docs/html/design/media/scroll_indicator.webm and b/docs/html/design/media/scroll_indicator.webm differ diff --git a/docs/html/design/media/seekbar_example.png b/docs/html/design/media/seekbar_example.png index 4c0790a726f08..cbd2d3482167d 100644 Binary files a/docs/html/design/media/seekbar_example.png and b/docs/html/design/media/seekbar_example.png differ diff --git a/docs/html/design/media/settings_checkbox.png b/docs/html/design/media/settings_checkbox.png index 6615bfbeda251..ccd75a0f2b270 100644 Binary files a/docs/html/design/media/settings_checkbox.png and b/docs/html/design/media/settings_checkbox.png differ diff --git a/docs/html/design/media/settings_date_time.png b/docs/html/design/media/settings_date_time.png index 8df92d4a13cb9..0c7fa10d7417e 100644 Binary files a/docs/html/design/media/settings_date_time.png and b/docs/html/design/media/settings_date_time.png differ diff --git a/docs/html/design/media/settings_dependency.png b/docs/html/design/media/settings_dependency.png index 4821c61bac6da..ecb31f5ad89d6 100644 Binary files a/docs/html/design/media/settings_dependency.png and b/docs/html/design/media/settings_dependency.png differ diff --git a/docs/html/design/media/settings_grouping.png b/docs/html/design/media/settings_grouping.png index d271ea80884b1..899e1c5bde3cc 100644 Binary files a/docs/html/design/media/settings_grouping.png and b/docs/html/design/media/settings_grouping.png differ diff --git a/docs/html/design/media/settings_individual_on_off.png b/docs/html/design/media/settings_individual_on_off.png index 03bea0b8d4425..d38f60ab9ca89 100644 Binary files a/docs/html/design/media/settings_individual_on_off.png and b/docs/html/design/media/settings_individual_on_off.png differ diff --git a/docs/html/design/media/settings_list_subscreen.png b/docs/html/design/media/settings_list_subscreen.png index 385aa6abc29b6..48d1c51ce0c75 100644 Binary files a/docs/html/design/media/settings_list_subscreen.png and b/docs/html/design/media/settings_list_subscreen.png differ diff --git a/docs/html/design/media/settings_master_on_off.png b/docs/html/design/media/settings_master_on_off.png index e46bb97397713..bf6963f3c8692 100644 Binary files a/docs/html/design/media/settings_master_on_off.png and b/docs/html/design/media/settings_master_on_off.png differ diff --git a/docs/html/design/media/settings_master_on_off_2.png b/docs/html/design/media/settings_master_on_off_2.png index ab4e992da6ccd..08f796690c060 100644 Binary files a/docs/html/design/media/settings_master_on_off_2.png and b/docs/html/design/media/settings_master_on_off_2.png differ diff --git a/docs/html/design/media/settings_multiple_choice.png b/docs/html/design/media/settings_multiple_choice.png index 9b285664ff1ef..27a903e746b54 100644 Binary files a/docs/html/design/media/settings_multiple_choice.png and b/docs/html/design/media/settings_multiple_choice.png differ diff --git a/docs/html/design/media/settings_slider.png b/docs/html/design/media/settings_slider.png index 51545c8d6bd6b..ae651565db64c 100644 Binary files a/docs/html/design/media/settings_slider.png and b/docs/html/design/media/settings_slider.png differ diff --git a/docs/html/design/media/settings_subscreen_navigation.png b/docs/html/design/media/settings_subscreen_navigation.png index 2ab0b96652e8e..16bf26f59230b 100644 Binary files a/docs/html/design/media/settings_subscreen_navigation.png and b/docs/html/design/media/settings_subscreen_navigation.png differ diff --git a/docs/html/design/media/spinners_hololightanddark.png b/docs/html/design/media/spinners_hololightanddark.png index cea5ec22f5b87..40104571c8f9c 100644 Binary files a/docs/html/design/media/spinners_hololightanddark.png and b/docs/html/design/media/spinners_hololightanddark.png differ diff --git a/docs/html/design/media/swipe_tabs.mp4 b/docs/html/design/media/swipe_tabs.mp4 index f8a1ab5845ec1..baffc635b723b 100644 Binary files a/docs/html/design/media/swipe_tabs.mp4 and b/docs/html/design/media/swipe_tabs.mp4 differ diff --git a/docs/html/design/media/swipe_tabs.ogv b/docs/html/design/media/swipe_tabs.ogv index ae3c86b768dd7..215ff5ab04ea4 100644 Binary files a/docs/html/design/media/swipe_tabs.ogv and b/docs/html/design/media/swipe_tabs.ogv differ diff --git a/docs/html/design/media/swipe_tabs.webm b/docs/html/design/media/swipe_tabs.webm index 86f403ebea9ec..8809de115b36b 100644 Binary files a/docs/html/design/media/swipe_tabs.webm and b/docs/html/design/media/swipe_tabs.webm differ diff --git a/docs/html/design/media/swipe_views.png b/docs/html/design/media/swipe_views.png index ea1e635f6bbda..853800ac663d4 100644 Binary files a/docs/html/design/media/swipe_views.png and b/docs/html/design/media/swipe_views.png differ diff --git a/docs/html/design/media/swipe_views2.png b/docs/html/design/media/swipe_views2.png index ee0f2c40e8eda..2ff1f80e10cdc 100644 Binary files a/docs/html/design/media/swipe_views2.png and b/docs/html/design/media/swipe_views2.png differ diff --git a/docs/html/design/media/switches_checkboxes.png b/docs/html/design/media/switches_checkboxes.png index 92b8d5c280f47..91abed8d57729 100644 Binary files a/docs/html/design/media/switches_checkboxes.png and b/docs/html/design/media/switches_checkboxes.png differ diff --git a/docs/html/design/media/switches_radios.png b/docs/html/design/media/switches_radios.png index f9bf5fc3257bc..94c4df03ced7f 100644 Binary files a/docs/html/design/media/switches_radios.png and b/docs/html/design/media/switches_radios.png differ diff --git a/docs/html/design/media/tabs_overview.png b/docs/html/design/media/tabs_overview.png index c33698285676f..95efc3d7d64e8 100644 Binary files a/docs/html/design/media/tabs_overview.png and b/docs/html/design/media/tabs_overview.png differ diff --git a/docs/html/design/media/tabs_scrolly.mp4 b/docs/html/design/media/tabs_scrolly.mp4 index dc9e9c6cf0488..df5c5372d23fc 100644 Binary files a/docs/html/design/media/tabs_scrolly.mp4 and b/docs/html/design/media/tabs_scrolly.mp4 differ diff --git a/docs/html/design/media/tabs_scrolly.ogv b/docs/html/design/media/tabs_scrolly.ogv index 3e484f97a3a82..f7cb9c383c0a8 100644 Binary files a/docs/html/design/media/tabs_scrolly.ogv and b/docs/html/design/media/tabs_scrolly.ogv differ diff --git a/docs/html/design/media/tabs_scrolly.webm b/docs/html/design/media/tabs_scrolly.webm index e9d371d2cb777..cc6a0fb2e4c2d 100644 Binary files a/docs/html/design/media/tabs_scrolly.webm and b/docs/html/design/media/tabs_scrolly.webm differ diff --git a/docs/html/design/media/tabs_stacked.png b/docs/html/design/media/tabs_stacked.png index 09e995836599a..23bef3607cb40 100644 Binary files a/docs/html/design/media/tabs_stacked.png and b/docs/html/design/media/tabs_stacked.png differ diff --git a/docs/html/design/media/text_input_textselection.png b/docs/html/design/media/text_input_textselection.png index f2ede0dcb4880..0585d95756d9a 100644 Binary files a/docs/html/design/media/text_input_textselection.png and b/docs/html/design/media/text_input_textselection.png differ diff --git a/docs/html/design/media/text_input_typesandtypedown.png b/docs/html/design/media/text_input_typesandtypedown.png index 1feac284a36b0..05da941d77581 100644 Binary files a/docs/html/design/media/text_input_typesandtypedown.png and b/docs/html/design/media/text_input_typesandtypedown.png differ diff --git a/docs/html/design/media/themes_holo_dark.png b/docs/html/design/media/themes_holo_dark.png index e1f4477e57cd2..035250807ed90 100644 Binary files a/docs/html/design/media/themes_holo_dark.png and b/docs/html/design/media/themes_holo_dark.png differ diff --git a/docs/html/design/media/themes_holo_inverse.png b/docs/html/design/media/themes_holo_inverse.png deleted file mode 100644 index 528d11937e277..0000000000000 Binary files a/docs/html/design/media/themes_holo_inverse.png and /dev/null differ diff --git a/docs/html/design/media/themes_holo_light.png b/docs/html/design/media/themes_holo_light.png index 4f34bb3230f49..77836cbf266af 100644 Binary files a/docs/html/design/media/themes_holo_light.png and b/docs/html/design/media/themes_holo_light.png differ diff --git a/docs/html/design/media/touch_feedback_communication.png b/docs/html/design/media/touch_feedback_communication.png index 6388b774061ef..f8162d0a3f202 100644 Binary files a/docs/html/design/media/touch_feedback_communication.png and b/docs/html/design/media/touch_feedback_communication.png differ diff --git a/docs/html/design/media/touch_feedback_manipulation.png b/docs/html/design/media/touch_feedback_manipulation.png index cb1f268121f35..185256354becc 100644 Binary files a/docs/html/design/media/touch_feedback_manipulation.png and b/docs/html/design/media/touch_feedback_manipulation.png differ diff --git a/docs/html/design/media/touch_feedback_reaction_response.png b/docs/html/design/media/touch_feedback_reaction_response.png index 5a34d7a230f73..fccfd8ed93163 100644 Binary files a/docs/html/design/media/touch_feedback_reaction_response.png and b/docs/html/design/media/touch_feedback_reaction_response.png differ diff --git a/docs/html/design/media/touch_feedback_states.png b/docs/html/design/media/touch_feedback_states.png index 9e306bbc4205a..46181348bfb59 100644 Binary files a/docs/html/design/media/touch_feedback_states.png and b/docs/html/design/media/touch_feedback_states.png differ diff --git a/docs/html/design/media/ui_overview_all_apps.png b/docs/html/design/media/ui_overview_all_apps.png index d44e5a481af96..7fd066c6c709a 100644 Binary files a/docs/html/design/media/ui_overview_all_apps.png and b/docs/html/design/media/ui_overview_all_apps.png differ diff --git a/docs/html/design/media/ui_overview_app_ui.png b/docs/html/design/media/ui_overview_app_ui.png index 7fc5dcdc3dc4f..6ea8139d9ae8a 100644 Binary files a/docs/html/design/media/ui_overview_app_ui.png and b/docs/html/design/media/ui_overview_app_ui.png differ diff --git a/docs/html/design/media/ui_overview_home_screen.png b/docs/html/design/media/ui_overview_home_screen.png index d1376b5f1819c..528a2325cd92a 100644 Binary files a/docs/html/design/media/ui_overview_home_screen.png and b/docs/html/design/media/ui_overview_home_screen.png differ diff --git a/docs/html/design/media/ui_overview_notifications.png b/docs/html/design/media/ui_overview_notifications.png index fe4375e5f363a..6043412b100df 100644 Binary files a/docs/html/design/media/ui_overview_notifications.png and b/docs/html/design/media/ui_overview_notifications.png differ diff --git a/docs/html/design/media/ui_overview_recents.png b/docs/html/design/media/ui_overview_recents.png index aabd7c794218d..5663b30413bf0 100644 Binary files a/docs/html/design/media/ui_overview_recents.png and b/docs/html/design/media/ui_overview_recents.png differ diff --git a/docs/html/design/media/ui_overview_system_ui.png b/docs/html/design/media/ui_overview_system_ui.png index 8993fff921321..a4280fa62f970 100644 Binary files a/docs/html/design/media/ui_overview_system_ui.png and b/docs/html/design/media/ui_overview_system_ui.png differ diff --git a/docs/html/design/media/whats_new_multipanel.png b/docs/html/design/media/whats_new_multipanel.png index fbe2d56b9aacb..e5564a770128b 100644 Binary files a/docs/html/design/media/whats_new_multipanel.png and b/docs/html/design/media/whats_new_multipanel.png differ diff --git a/docs/html/design/media/widgets_gestures.png b/docs/html/design/media/widgets_gestures.png index f991609e747cb..5e1268daca99e 100644 Binary files a/docs/html/design/media/widgets_gestures.png and b/docs/html/design/media/widgets_gestures.png differ diff --git a/docs/html/design/media/widgets_resizing01.png b/docs/html/design/media/widgets_resizing01.png index 5c85df6d51480..7d411aed95dad 100644 Binary files a/docs/html/design/media/widgets_resizing01.png and b/docs/html/design/media/widgets_resizing01.png differ diff --git a/docs/html/design/media/yourbranding_app.png b/docs/html/design/media/yourbranding_app.png new file mode 100644 index 0000000000000..d38dce3e76946 Binary files /dev/null and b/docs/html/design/media/yourbranding_app.png differ diff --git a/docs/html/design/media/yourbranding_googlemusic.png b/docs/html/design/media/yourbranding_googlemusic.png new file mode 100644 index 0000000000000..1e1df8b0b89a0 Binary files /dev/null and b/docs/html/design/media/yourbranding_googlemusic.png differ diff --git a/docs/html/design/media/yourbranding_icon.png b/docs/html/design/media/yourbranding_icon.png new file mode 100644 index 0000000000000..ca8b3531f13b5 Binary files /dev/null and b/docs/html/design/media/yourbranding_icon.png differ diff --git a/docs/html/design/media/yourbranding_in-app-icons.png b/docs/html/design/media/yourbranding_in-app-icons.png new file mode 100644 index 0000000000000..80f0ce431ec0a Binary files /dev/null and b/docs/html/design/media/yourbranding_in-app-icons.png differ diff --git a/docs/html/design/media/yourbranding_logo.png b/docs/html/design/media/yourbranding_logo.png new file mode 100644 index 0000000000000..328554dabc6ac Binary files /dev/null and b/docs/html/design/media/yourbranding_logo.png differ diff --git a/docs/html/design/media/yourbranding_sharing.png b/docs/html/design/media/yourbranding_sharing.png new file mode 100644 index 0000000000000..b11752c0b1dab Binary files /dev/null and b/docs/html/design/media/yourbranding_sharing.png differ diff --git a/docs/html/design/patterns/accessibility.jd b/docs/html/design/patterns/accessibility.jd index 16a39d68e42ff..532900ecd80c5 100644 --- a/docs/html/design/patterns/accessibility.jd +++ b/docs/html/design/patterns/accessibility.jd @@ -55,7 +55,6 @@ page.tags="accessibility","navigation","input" when not starred: add to favorties
  • action overflow button
  • text message
    • -
  • video chat
    • diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index 2c591490a728a..939370c29fe5c 100644 --- a/docs/html/design/patterns/actionbar.jd +++ b/docs/html/design/patterns/actionbar.jd @@ -93,9 +93,9 @@ rotation on different screen sizes.

    content across multiple bars located below the main action bar or at the bottom of the screen.

    -
    +

    Layout Considerations for Split Action Bars

    diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd index 0dc20e25fdb34..1447d4e62885d 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
    - 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. -
    - -
    - - -
    -
    - -

    Create an identity for your app

    -

    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.

    - -
    -
    - - -
    - 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.
    @@ -112,9 +91,8 @@ important actions.

    - 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.
    @@ -185,7 +163,7 @@ important actions.

    - Navigation drawer from the Shopper app. + Navigation drawer from the Keep app.
    @@ -230,7 +208,7 @@ in view at the same time.

    - YouTube uses fixed tabs to switch between different, relatively unrelated functional areas. + People uses fixed tabs to switch between different, relatively unrelated functional areas.
    @@ -290,21 +268,6 @@ design guide.

    -
    -
    - -

    Lights-out mode

    -

    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.

    - -
    -
    - - -
    - Google Books' detail view replicates the immersive experience of reading an actual book through lights-out mode and a page-flip animation. -
    -
    -

    Make navigation between detail views efficient

    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 0000000000000..191ca40a2027d --- /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 + +

    + 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. +

    + + + +

    + 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. +

    + +
    +
    +

    Lean Back

    +

    Touch the screen anywhere to bring back system bars.

    + +
    +
    +

    Immersive

    +

    Swipe from the any edge of the screen with a hidden bar to bring back system bars.

    + + +
    +
    + +

    + Lean Back +

    + +

    + 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. +

    + +

    + 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. +

    + + + +

    + Immersive +

    + +

    + 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. +

    + +

    + 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. +

    + +
    +
    + + +
    +
    + +

    + 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. +

    + +

    + 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. +

    + +

    + 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. +

    + +

    + Variation: Swiping from edges with bars also affects the app +

    + +

    + 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. +

    + +

    + But in some apps, the user might occasionally need to swipe from the edge as + part of the primary app experience. Examples are games and + drawing applications. +

    + +

    + 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. +

    + +

    + 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. +

    + +

    + 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. +

    + +

    What About Lights Out Mode?

    + +

    + 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. +

    + +

    + 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. +

    \ No newline at end of file diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd index 127a1c8c12cdd..837a6ddbe4bb8 100644 --- a/docs/html/design/patterns/gestures.jd +++ b/docs/html/design/patterns/gestures.jd @@ -5,112 +5,122 @@ page.tags="gesture","input","touch"

    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.

    -
    -
    +
     
    +
    + +
    - -

    Touch

    -

    Triggers the default functionality for a given item.

    - -
      -
    • -

      Action

      -

      Press, lift

      • -
    - +

    Touch

    +

    Triggers the default functionality for a given item.

    +
      +
    • +

      Action

      +

      Press, lift

      • +
    -
    +
    - -

    Long press

    -

    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.

    - -
      -
    • -

      Action

      -

      Press, wait, lift

      • -
    - +

    Long press

    +

    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.

    +
      +
    • +

      Action

      +

      Press, wait, lift

      • +
    -
    +
    - -

    Swipe

    -

    Scrolls overflowing content, or navigates between views in the same hierarchy.

    - -
      -
    • -

      Action

      -

      Press, move, lift

      • -
    - +

    Swipe or drag

    +

    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.

    +
      +
    • +

      Action

      +

      Press, move, lift

      • +
    +
    +
     
    -
    +
    - -

    Drag

    -

    Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).

    - -
      -
    • -

      Action

      -

      Long press, move, lift

      • -
    - +

    Long press drag

    +

    Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).

    +
      +
    • +

      Action

      +

      Long press, move, lift

      • +
    -
    +
    - -

    Double touch

    -

    Zooms into content. Also used as a secondary gesture for text selection.

    - -
      -
    • -

      Action

      -

      Two touches in quick succession

      • -
    - +

    Double touch

    +

    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.

    +
      +
    • +

      Action

      +

      Two touches in quick succession

      +
      • +
    +
    - - - -

    Pinch open

    -

    Zooms into content.

    - -
      -
    • -

      Action

      -

      2-finger press, move outwards, lift

      • -
    - + +

    Double touch drag

    +

    Scales content by pushing away or pulling closer, centered around gesture.

    +
      +
    • +

      Action

      +

      A single touch followed in quick succession by a drag up or down:

      +
        +
      • Dragging up decreases content scale
        • +
      • Dragging down increases content scale
        • +
      • Reversing drag direction reverses scaling.
        • +
      +
      • +
    +
    +
     
    +
    +
    - - - -

    Pinch close

    -

    Zooms out of content.

    - -
      -
    • -

      Action

      -

      2-finger press, move inwards, lift

      • -
    - + +

    Pinch open

    +

    Zooms into content.

    +
      +
    • +

      Action

      +

      2-finger press, move outwards, lift

      • +
    + +
    + +

    Pinch close

    +

    Zooms out of content.

    +
      +
    • +

      Action

      +

      2-finger press, move inwards, lift

      +
      • +
    +
    +
    + diff --git a/docs/html/design/patterns/help.jd b/docs/html/design/patterns/help.jd index a32fb255d0082..ad5742d78757f 100644 --- a/docs/html/design/patterns/help.jd +++ b/docs/html/design/patterns/help.jd @@ -20,7 +20,7 @@ page.tags="settings","preferences"

    The only reason for showing pure help content to new users unsolicited is:
    To teach high value functionality that's only available through a gesture.

    -

    For example, we use help content to teach users how to place apps on their Home Screen. This functionality is:

    +

    For example, we use help content to teach users how to place apps on their Home screen. This functionality is:

      diff --git a/docs/html/design/patterns/new.jd b/docs/html/design/patterns/new.jd index 23e3e10dbe7e0..50cb9503602cc 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 -

      Jelly Bean - Android 4.1

      + +

      A quick look at the new patterns and styles you can use to build beautiful Android apps… + +

      Android 4.4 KitKat

      + + + +

      + Your branding +

      + + +

      + Consistency has its place in Android, but you also have the flexibility to + customize the look of your app to reinforce your brand. +

      + +

      + 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. +

      + +

      + Show your app's launcher icon and name in the action bar so that users can + see it in every screen of your app. +

      +

      + Your Branding highlights + these and other pointers on how to incorporate elements of your brand into your + app's visual language — highly encouraged! +

      + +

      + Touch feedback +

      + +

      + 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). +

      + + +

      + 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) sprinkles + of encouragement 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 Touch Feedback page for more + details. +

      + + +

      + Full screen +

      + +

      + 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 Full + Screen page will guide you in setting the stage for deep user engagement. +

      + + + +

      + Gestures +

      +
      +
      +

      + The updated Gestures + page covers new and updated gestures introduced in Android KitKat: + double touch drag and double touch. These + gestures are used for changing the viewing size of content. +

      +
      +
      + + +
      +
      + + +

      Android 4.1 Jelly Bean

      Notifications

      @@ -14,7 +104,10 @@ page.title=New in Android
    • Notifications can be collapsed and expanded
    -

    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 Notifications page for more details.

    +

    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 Notifications page for + more details.

    @@ -26,14 +119,21 @@ page.title=New in Android

    Resizable Application Widgets

    -

    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 automatically resize and load different content based upon a number of factors including:

    +

    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 + automatically resize and load different content based upon a + number of factors including:

    • Where the user drops them on the home screen
    • The size to which the user expands them
    • The amount of room available on the home screen
    -

    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.

    +

    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 page has useful + details about widget types, limitations, and design considerations.

    @@ -45,8 +145,12 @@ page.title=New in Android

    Accessibility

    -

    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.

    -

    The new Accessibility page provides details on how to design your app to be as accessible as possible by:

    +

    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.

    +

    The new Accessibility + page provides details on how to design your app to be as accessible as possible by:

    • Making navigation intuitive
    • Using recommended touch target sizes
      • @@ -56,20 +160,28 @@ page.title=New in Android
    • Trying it out yourself
    -

    You can supply separate landscape and portrait layouts for your widgets, which the system inflates as appropriate when the screen orientation changes. The Widgets page has useful details about widget types, limitations, and design considerations.

    +

    You can supply separate landscape and portrait layouts for your + widgets, which the system inflates as appropriate when the screen + orientation changes. The + Widgets page has + useful details about widget types, limitations, and design considerations.

    -

    Ice Cream Sandwich - Android 4.0

    +

    Android 4.0 Ice Cream Sandwich

    Navigation bar

    -

    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 Compatibility 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.

    +

    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 + Compatibility + 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.

    @@ -81,7 +193,9 @@ page.title=New in Android

    Action bar

    -

    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.

    +

    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.

    @@ -93,7 +207,10 @@ page.title=New in Android

    Multi-pane layouts

    -

    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.

    +

    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.

    @@ -106,7 +223,9 @@ page.title=New in Android
    -

    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.

    +

    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.

    diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd index 018b7b998195e..80f1b0e201128 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.

    -

    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.

    +

    Ongoing notifications

    +

    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.

    -
    - - - -
    -
    - -
    -
    - -

    Ongoing notifications

    -

    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.

    - -
    diff --git a/docs/html/design/patterns/pure-android.jd b/docs/html/design/patterns/pure-android.jd index 77813c0d9fda7..a0f672e4d6136 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.

    - Sampling of UI elements from Android, iOS and Windows Phone 7. + Sampling of UI elements from Android, iOS, and Windows Phone.
    @@ -56,7 +56,7 @@ counterparts.

    - Sampling of icons from Android, iOS and Windows Phone 7. + Sampling of icons from Android, iOS, and Windows Phone.
    diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd index 630a4b983eb0e..4c9fb880ec713 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.

    - 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.
    - 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.

    Swiping Between Tabs

    @@ -45,7 +45,7 @@ using the swipe gesture to navigate to the next/previous detail view.

    -
    +
    +

    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: + Give me tricks that + work everywhere). But the icon will still look like it belongs with all of + your other icons as a part of your brand.

    + +
    +
    +

    Example:
    +

    +

    The brand's normal icon for sharing on other platforms is a right arrow. +

    + +
    + +
    + Don't + Do +
    + +
    +
    + +

    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 Downloads.

    diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd index 0ce2faf1b7be7..b0a3439ea93e6 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 -

    So, to create an icon for different densities, you should follow the 2:3:4:6 scaling -ratio 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 +

    So, to create an icon for different densities, you should follow the 2:3:4:6:8 +scaling ratio 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.

    diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd index 0a99a2f5d2caa..c375631514d37 100644 --- a/docs/html/design/style/metrics-grids.jd +++ b/docs/html/design/style/metrics-grids.jd @@ -12,8 +12,9 @@ screen.">dp) and tablet (larger than or equal 600dp).
  • The density buckets are LDPI, MDPI, HDPI, XHDPI, and XXHDPI.
    • +="Extra-high density (320 dpi)">XHDPI, XXHDPI, and XXXHDPI.

    Optimize your application's UI by designing diff --git a/docs/html/design/style/themes.jd b/docs/html/design/style/themes.jd index e1899e3b42109..2dc8eadc633d5 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.

    - -
    - Talk in Holo Light with dark action bar. -
    -
    -

    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:

    +

    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:

    • Holo Light
    • Holo Dark
      • -
    • Holo Light with dark action bars

    Applying these themes will go a long way in helping you to build apps that fit right into the general visual language of Android.

    diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd index 340a3a4918e5b..a5bf7b37e592b 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 -
    +
    -

    Use color and illumination to respond to touches, reinforce the resulting behaviors of gestures, and -indicate what actions are enabled and disabled.

    -

    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".

    +

    Use illumination and dimming to respond to touches, reinforce the resulting behaviors +of gestures, and indicate what actions are enabled and disabled.

    +

    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".

    + +

    Be responsive to touches in a gentle way. 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:

    + +
    + +
    + + + +
    @@ -18,51 +46,54 @@ user know which object was touched and that your app is "listening".

    -

    States

    +

    States

    +
     
    - 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.
    -
     
    +
     
    -
    +
    -

    Communication

    -

    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.

    +

    Communication

    +

    When your objects react to more complex gestures, help users +understand what the outcome will be.

    +

    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.

    -
    +
    +
     
    +

    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.

    -
     
    -

    Boundaries

    -

    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.

    - -
    -
    +

    + 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. +

    \ No newline at end of file diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd index 818af4c24b839..3c201f76cd88d 100644 --- a/docs/html/design/style/typography.jd +++ b/docs/html/design/style/typography.jd @@ -12,7 +12,7 @@ page.tags="textview","font"

    Download Roboto + href="{@docRoot}downloads/design/roboto-1.2.zip">Download Roboto

    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.

    Specimen Book

    + href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book

    diff --git a/docs/html/design/style/writing.jd b/docs/html/design/style/writing.jd index 5358847afdf75..cda17eb9f35b4 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 -

    When choosing words for your app:

    -
      -
    1. -

      Keep it brief. Be concise, simple and precise. Start with a 30 character limit (including - spaces), and don't use more unless absolutely necessary.

      -
      2. -
    2. -

      Keep it simple. 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.

      -
      3. -
    3. -

      Be friendly. 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.

      -
      4. -
    4. -

      Put the most important thing first. 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.

      -
      5. -
    5. -

      Describe only what's necessary, and no more. Don't try to explain subtle differences. They - will be lost on most users.

      -
      6. -
    6. -

      Avoid repetition. If a significant term gets repeated within a screen or block of text, find - a way to use it just once.

      -
      7. -
    +

    Android's Voice

    -

    Examples

    +

    When writing text that appears in your app, keep it concise, simple, and friendly.

    -
    1. Keep it brief. From the setup wizard:
    +

    Concise

    + +
      +
    • Describe only what the user needs to know.
      • +
    • Eliminate redundancy, such as titles that restate the body of an information box.
      • +
    • Keep text as short as possible.
      • +
    + +

    Avoid wordy, stilted text

    -
    Too formal
    +
    Don't
    Consult the documentation that came with your phone for further instructions. @@ -50,7 +28,7 @@ page.tags="dialog","toast","notification"
    -
    Better
    +
    Do
    Read the instructions that came with your phone. @@ -59,174 +37,7 @@ page.tags="dialog","toast","notification" -
     
    - -
    1. Keep it simple. From the Location settings screen:
    - -
    -
    - -
    Confusing
    - - - - - - - - - - - - -
    - Use GPS satellites -
    - When locating, accurate to street level. -
    - -
    -
    - -
    Better
    - - - - - - - - - - - - -
    - GPS -
    - Let apps use satellites to pinpoint your location. -
    - -
    -
    - -
     
    - -
    1. Be friendly. Dialog that appears when an application -crashes:
    - -
    -
    - -
    Confusing and annoying—"Sorry" just rubs salt in the - wound.
    - - - - - - - - - - - - - - - - - - - -
    - Sorry! -
    - Activity MyAppActivity (in application MyApp) - is not responding. -
    Force closeWaitReport
    - -
    -
    - -
    Shorter, more direct, no faux-apologetic title:

    - - - - - - - - - - - - - - - - - - - -
    - MyApp isn't responding. -
    - Do you want to close it? -
    WaitReportClose
    - -
    -
    - -
     
    - -
    1. Put the most important thing first.
    - -
    -
    - -
    Top news last
    - -
    - 77 other people +1'd this, including Larry Page. -
    - -
    -
    - -
    Top news first
    - -
    - Larry Page and 77 others +1'd this. -
    - -
    -
    - -
    -
    - -
    Task last
    - -
    - Touch Next to complete setup using a Wi-Fi connection. -
    - -
    -
    - -
    Task first
    - -
    - To finish setup using Wi-Fi, touch Next. -
    - -
    -
    - -
     
    - -
    1. Describe only what's necessary, and no more.
    +

    Don't provide unnecessary information

    @@ -277,3 +88,235 @@ crashes:
    + +

    Simple

    + +
      +
    • Use short words, active verbs, and common nouns.
      • +
    • Put the most important thing first. “Front-load” the first 11 characters + with the most salient information in the string.
      • +
    • Don’t try to explain subtle differences. They are lost on most users.
      • +
    + +

    Focus on the user's concern, not technical details

    + +
    +
    + +
    Don't
    + +
    + Manually control GPS to prevent other apps from using it +
    + +
    +
    + +
    Do
    + +
    + To save power, switch Location mode to Battery saving +
    + +
    +
    + +

    Put top news first

    + +
    +
    + +
    Don't
    + +
    + 77 other people +1’d this, including Larry Page +
    + +
    +
    + +
    Do
    + +
    + Larry Page and 76 others +1’d this +
    + +
    +
    + +

    Put the user's goal first

    + +
    +
    + +
    Don't
    + +
    + Touch Next to complete setup using a Wi-Fi connection +
    + +
    +
    + +
    Do
    + +
    + To finish setup using Wi-Fi, touch Next +
    + +
    +
    + + +

    Friendly

    + +
      +
    • Use contractions.
      • +
    • Talk directly to the reader. Use “you” to refer to the reader.
      • +
    • Keep your tone casual and conversational, but avoid slang.
      • + +
    + +

    Avoid being confusing or annoying

    +
    +
    +
    Don't
    + + + + + + + + + + + +
    + Sorry! +
    + Activity MyAppActivity (in application
    + MyApp) is not responding +
    + +
    +
    +
    Do
    + + + + + + + + + + + +
    + MyApp isn’t responding +
    + Do you want to close it? +
    +
    +
    + + +

    Words to avoid

    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Don't useUse
    one, two, three, four, ...1, 2, 3, 4, ...
    applicationapp
    cannot, could not, do not, did not +will not, you willContractions: can’t, couldn’t, don’t, didn’t won’t, you’ll, and so on
    okay, okOK
    please, sorry, thank youAttempts at politeness can annoy the user, especially in messages that say + something has gone wrong.
    + Exception: In Japanese, “please” is mandatory and imperative verbs should + be localized accordingly (turn on -> please turn on). +
    there is, there are, it is
    + and other “disappeared” subjects (grammatical expletives)    		Use a noun as the subject
    abort, kill, terminatestop, cancel, end, exit
    fail, failed, negative languageIn general, use positive phrasing
    + (for example, “do” rather than “don’t,” except in cases such as “Don’t show + again,” “Can’t connect,” and so on.)
    me, I, my, mineyou, your, yours
    Are you sure? Warning!Tell user the consequence instead, for example, “You’ll lose all photos + and media”
    + +
    + +

    Formatting text

    + +

    Capitalization

    + +
      +
    • Use sentence-style capitalization for all UI strings: “Words to live by.”
      • +
    • Capitalize all important words in: +
        +
      • App names (Calendar, Google Drive)
        • +
      • Named features (Android Beam, Face Unlock)
        • +
      • Proper nouns (Statue of Liberty, San Francisco Giants)
        • +
      +
      • +
    • Be conservative. Don't capitalize words that aren't part of a formal feature name: +
        +
      • Sim card lock, Home screen, not Sim Card Lock, Home Screen.
        • +
      +
      • +
    + + +

    Punctuation

    +
      +
    • Period. 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.
      • +
    • Ellipsis. Use the ellipsis character (…) (Option-; on MacOS and … + in HTML) to indicate +
        +
      • Incompleteness, such as an action in progress (“Downloading...”) or truncated text.
        • +
      • 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 Find in page or Pick a date, do not require an + ellipsis.
        • +
      +
      • +
    \ No newline at end of file diff --git a/docs/html/design/videos/index.jd b/docs/html/design/videos/index.jd index 91a784a0b31ea..976767d263d4f 100644 --- a/docs/html/design/videos/index.jd +++ b/docs/html/design/videos/index.jd @@ -46,7 +46,7 @@ page.title=Videos

    Agile UX Research Practice in Android

    -

    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.

    +

    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.