Doc change: Design guidelines update.
Change-Id: Id37c0bfc1fe7e2c7156aab0ec85df123534c8c96
Bug-id: 11252971 11256762 11256765 11257156 11257769 11276296 11293924 11324992
diff --git a/docs/html/design/building-blocks/progress.jd b/docs/html/design/building-blocks/progress.jd
index 60ad2ca..90732f4 100644
--- a/docs/html/design/building-blocks/progress.jd
+++ b/docs/html/design/building-blocks/progress.jd
@@ -54,14 +54,8 @@
<p>In this example, an activity circle (in Holo Light) is used in the Gmail application when a message is being loaded because it's not possible to determine how long it will take to download the email.</p>
<p>When displaying an activity circle, do not include text to communicate what the app is doing. The moving circle alone provides sufficient feedback about the delay, and does so in an understated way that minimizes the impact.</p>
<p>
- <div class="layout-content-col span-3" style="margin-left:0">
- <div class="do-dont-label bad">Don't</div>
- <img src="{@docRoot}design/media/progress_activity_dont.png">
- </div>
-
- <div class="layout-content-col span-3">
- <div class="do-dont-label good">Do</div>
- <img src="{@docRoot}design/media/progress_activity_do.png">
+ <div style="margin-left:0;margin-top:1em;">
+ <img src="{@docRoot}design/media/progress_activity_do_dont.png">
</div>
</p>
</li>
diff --git a/docs/html/design/building-blocks/scrolling.jd b/docs/html/design/building-blocks/scrolling.jd
index 66999f9..13b3b09 100644
--- a/docs/html/design/building-blocks/scrolling.jd
+++ b/docs/html/design/building-blocks/scrolling.jd
@@ -8,7 +8,7 @@
<p>Appears during scrolling to indicate what portion of the content is currently in view.</p>
-<div class="framed-galaxynexus-land-span-13">
+<div class="framed-nexus5-land-span-13">
<video class="play-on-hover" autoplay>
<source src="{@docRoot}design/media/scroll_indicator.mp4" type="video/mp4">
<source src="{@docRoot}design/media/scroll_indicator.webm" type="video/webm">
@@ -26,7 +26,7 @@
indicator appears even when the user isn't scrolling. Touching or dragging it causes the current
letter to pop up in a prominent way.</p>
-<div class="framed-galaxynexus-land-span-13">
+<div class="framed-nexus5-land-span-13">
<video class="play-on-hover" autoplay>
<source src="{@docRoot}design/media/scroll_index.mp4" type="video/mp4">
<source src="{@docRoot}design/media/scroll_index.webm" type="video/webm">
diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd
index 2bc90ab..5a5da5d8 100644
--- a/docs/html/design/building-blocks/tabs.jd
+++ b/docs/html/design/building-blocks/tabs.jd
@@ -35,7 +35,7 @@
</video>
<div class="figure-caption">
Scrolling tabs in the Play Store app.
- <div class="video-instructions"> </div>
+ <div class="video-instructions-image"> </div>
</div>
</div>
@@ -55,14 +55,3 @@
<div class="figure-caption">
Tabs in the Google Play Movies app.
</div>
-
-
-
-<h2 id="stacked">Stacked Tabs</h2>
-
-
-<p>If view navigation is essential to your app, you can break out tabs into a separate action bar. This
-permits fast view switching even on narrower screens.</p>
-
-<img src="{@docRoot}design/media/tabs_stacked.png">
-
diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs
index ff465bf..4c2aab2 100644
--- a/docs/html/design/design_toc.cs
+++ b/docs/html/design/design_toc.cs
@@ -19,6 +19,7 @@
<li><a href="<?cs var:toroot ?>design/style/typography.html">Typography</a></li>
<li><a href="<?cs var:toroot ?>design/style/color.html">Color</a></li>
<li><a href="<?cs var:toroot ?>design/style/iconography.html">Iconography</a></li>
+ <li><a href="<?cs var:toroot ?>design/style/branding.html">Your Branding</a></li>
<li><a href="<?cs var:toroot ?>design/style/writing.html">Writing Style</a></li>
</ul>
</li>
@@ -34,6 +35,7 @@
<li><a href="<?cs var:toroot ?>design/patterns/navigation-drawer.html">Navigation Drawer</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li>
+ <li><a href="<?cs var:toroot ?>design/patterns/fullscreen.html">Full Screen</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/confirming-acknowledging.html">Confirming & Acknowledging</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li>
diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd
index 5d179a6..d514c14 100644
--- a/docs/html/design/downloads/index.jd
+++ b/docs/html/design/downloads/index.jd
@@ -102,9 +102,9 @@
<p>
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto ZIP']);"
- href="{@docRoot}downloads/design/roboto-1.100141.zip">Roboto</a>
+ href="{@docRoot}downloads/design/roboto-1.2.zip">Roboto</a>
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specemin Book']);"
- href="{@docRoot}downloads/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a>
+ href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a>
</p>
</div>
diff --git a/docs/html/design/get-started/ui-overview.jd b/docs/html/design/get-started/ui-overview.jd
index bfb9ec9..5f4c40f 100644
--- a/docs/html/design/get-started/ui-overview.jd
+++ b/docs/html/design/get-started/ui-overview.jd
@@ -75,11 +75,6 @@
the traditional hardware keys. It houses the device navigation controls Back, Home, and
Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p>
</li>
-<li>
-<h4>Combined Bar</h4>
-<p>On tablet form factors the status and navigation bars are combined into a single bar at the
- bottom of the screen.</p>
-</li>
</ol>
</div>
@@ -101,7 +96,9 @@
<img src="{@docRoot}design/media/notifications_dismiss.png">
-<p>Notifications can be expanded to uncover more details and relevant actions. When collapsed, notifications have a one-line title and a one-line message.The recommended layout for a notification includes two lines. If necessary, you can add a third line.</p>
+<p>Notifications can be expanded to uncover more details and relevant actions. When collapsed, notifications
+ have a one-line title and a one-line message.The recommended layout for a notification includes two lines.
+ If necessary, you can add a third line.</p>
<p>Swiping a notification right or left removes it from the notification drawer.</p>
</div>
@@ -114,34 +111,30 @@
<div class="layout-content-row">
<div class="layout-content-col span-7">
- <img src="{@docRoot}design/media/ui_overview_app_ui.png">
+ <img src="{@docRoot}design/media/app_structure_drawer.png">
</div>
<div class="layout-content-col span-6 with-callouts">
-<p>A typical Android app consists of action bars and the app content area.</p>
+<p>A typical Android app uses action bars, and many apps will include a navigation drawer.</p>
<ol>
<li>
-<h4>Main Action Bar</h4>
-<p>The command and control center for your app. The main action bar includes elements for
- navigating your app's hierarchy and views, and also surfaces the most important actions.</p>
+<h4>Action Bar</h4>
+<p>The command and control center for your app. The action bar surfaces the most important actions
+ for the current view, and may include simple controls for switching between views.</p>
<p><a href="{@docRoot}design/patterns/actionbar.html">More on the Action Bar</a></p>
</li>
<li>
-<h4>View Control</h4>
-<p>Allows users to switch between the different views that your app provides. Views typically
- consist of different arrangements of your data or different functional aspects of your app.</p>
+<h4>Navigation Drawer</h4>
+<p>If your app's structure is more complex, the navigation drawer can display the main navigation
+ options. The navigation drawer expands from the left edge of the screen, overlaying the content
+ area but not the action bar.</p>
+<p><a href="{@docRoot}design/patterns/navigation-drawer.html">More on the Navigation Drawer</a></p>
</li>
<li>
<h4>Content Area</h4>
<p>The space where the content of your app is displayed.</p>
</li>
-<li>
-<h4>Split Action Bar</h4>
-<p>Split action bars provide a way to distribute actions across additional bars located below
- the main action bar or at the bottom of the screen. In this example, a split action bar moves
- important actions that won't fit in the main bar to the bottom.</p>
-</li>
</ol>
</div>
diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd
index 1e6b40c..8f73d9c 100644
--- a/docs/html/design/index.jd
+++ b/docs/html/design/index.jd
@@ -10,9 +10,13 @@
#text-overlay {
position: absolute;
- left: 0;
- top: 472px;
- width: 280px;
+ left: 36px;
+ top: 42px;
+ width: 266px;
+
+}
+#hero-image {
+ padding-left:68px;
}
</style>
@@ -20,10 +24,11 @@
<div id="text-overlay">
Welcome to <strong>Android Design</strong>, your place for learning how to design exceptional Android apps.
<br><br>
- <a href="{@docRoot}design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
+ Want to know what <strong>Android 4.4 KitKat</strong> has for designers? See <a href="{@docRoot}design/patterns/new.html">New in Android</a>.<br><br>
+ <a href="/design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
</div>
-
- <a href="{@docRoot}design/get-started/creative-vision.html">
- <img src="{@docRoot}design/media/index_landing_page.png">
+ <a id="hero-image" href="/design/get-started/creative-vision.html">
+ <img src="/design/media/index_landing_page.png">
</a>
</div>
+
diff --git a/docs/html/design/media/accessibility_contentdesc.png b/docs/html/design/media/accessibility_contentdesc.png
index 6515711..c9064ef 100644
--- a/docs/html/design/media/accessibility_contentdesc.png
+++ b/docs/html/design/media/accessibility_contentdesc.png
Binary files differ
diff --git a/docs/html/design/media/action_bar_pattern_considerations.png b/docs/html/design/media/action_bar_pattern_considerations.png
index 022288c..c3248fc 100644
--- a/docs/html/design/media/action_bar_pattern_considerations.png
+++ b/docs/html/design/media/action_bar_pattern_considerations.png
Binary files differ
diff --git a/docs/html/design/media/action_bar_pattern_overview.png b/docs/html/design/media/action_bar_pattern_overview.png
index 83a986b..64e7b22 100644
--- a/docs/html/design/media/action_bar_pattern_overview.png
+++ b/docs/html/design/media/action_bar_pattern_overview.png
Binary files differ
diff --git a/docs/html/design/media/action_bar_pattern_rotation.png b/docs/html/design/media/action_bar_pattern_rotation.png
index 5b9a656..7fa721f 100644
--- a/docs/html/design/media/action_bar_pattern_rotation.png
+++ b/docs/html/design/media/action_bar_pattern_rotation.png
Binary files 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 1066094..81fb5f5 100644
--- a/docs/html/design/media/app_structure_book_detail_page_flip.png
+++ b/docs/html/design/media/app_structure_book_detail_page_flip.png
Binary files differ
diff --git a/docs/html/design/media/app_structure_drawer.png b/docs/html/design/media/app_structure_drawer.png
index 560e834..a0ea620 100644
--- a/docs/html/design/media/app_structure_drawer.png
+++ b/docs/html/design/media/app_structure_drawer.png
Binary files differ
diff --git a/docs/html/design/media/app_structure_fixedtabs.png b/docs/html/design/media/app_structure_fixedtabs.png
index 6d1c63b..0f37197 100644
--- a/docs/html/design/media/app_structure_fixedtabs.png
+++ b/docs/html/design/media/app_structure_fixedtabs.png
Binary files differ
diff --git a/docs/html/design/media/app_structure_gallery_filmstrip.png b/docs/html/design/media/app_structure_gallery_filmstrip.png
index a937533..6fffb45 100644
--- a/docs/html/design/media/app_structure_gallery_filmstrip.png
+++ b/docs/html/design/media/app_structure_gallery_filmstrip.png
Binary files differ
diff --git a/docs/html/design/media/app_structure_gmail.png b/docs/html/design/media/app_structure_gmail.png
index 33ae092..bc641f7 100644
--- a/docs/html/design/media/app_structure_gmail.png
+++ b/docs/html/design/media/app_structure_gmail.png
Binary files differ
diff --git a/docs/html/design/media/app_structure_gmail_swipe.png b/docs/html/design/media/app_structure_gmail_swipe.png
index 8f6f71c..7afc2a9 100644
--- a/docs/html/design/media/app_structure_gmail_swipe.png
+++ b/docs/html/design/media/app_structure_gmail_swipe.png
Binary files differ
diff --git a/docs/html/design/media/app_structure_market.png b/docs/html/design/media/app_structure_market.png
index 7ab0189..ef09fee 100644
--- a/docs/html/design/media/app_structure_market.png
+++ b/docs/html/design/media/app_structure_market.png
Binary files differ
diff --git a/docs/html/design/media/app_structure_people_detail.png b/docs/html/design/media/app_structure_people_detail.png
index de54e82..5eb1457 100644
--- a/docs/html/design/media/app_structure_people_detail.png
+++ b/docs/html/design/media/app_structure_people_detail.png
Binary files differ
diff --git a/docs/html/design/media/app_structure_scrolltabs.png b/docs/html/design/media/app_structure_scrolltabs.png
index 3c20436..16f729a 100644
--- a/docs/html/design/media/app_structure_scrolltabs.png
+++ b/docs/html/design/media/app_structure_scrolltabs.png
Binary files 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 3b10cb9..6a76977 100644
--- a/docs/html/design/media/app_structure_shortcut_on_item.png
+++ b/docs/html/design/media/app_structure_shortcut_on_item.png
Binary files differ
diff --git a/docs/html/design/media/branding_googlemusic.png b/docs/html/design/media/branding_googlemusic.png
new file mode 100644
index 0000000..1e1df8b
--- /dev/null
+++ b/docs/html/design/media/branding_googlemusic.png
Binary files 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 0000000..35ba5d6
--- /dev/null
+++ b/docs/html/design/media/branding_launcher_icon.png
Binary files 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 0000000..f6ee89f
--- /dev/null
+++ b/docs/html/design/media/branding_logo_icon_action_bar.png
Binary files differ
diff --git a/docs/html/design/media/branding_wallet.png b/docs/html/design/media/branding_wallet.png
new file mode 100644
index 0000000..e1602b1
--- /dev/null
+++ b/docs/html/design/media/branding_wallet.png
Binary files differ
diff --git a/docs/html/design/media/building_blocks_landing.png b/docs/html/design/media/building_blocks_landing.png
index 40ab0da..1844b10 100644
--- a/docs/html/design/media/building_blocks_landing.png
+++ b/docs/html/design/media/building_blocks_landing.png
Binary files differ
diff --git a/docs/html/design/media/buttons_default_small.png b/docs/html/design/media/buttons_default_small.png
index 3e776ed..fa27ca5 100644
--- a/docs/html/design/media/buttons_default_small.png
+++ b/docs/html/design/media/buttons_default_small.png
Binary files differ
diff --git a/docs/html/design/media/calendar.mp4 b/docs/html/design/media/calendar.mp4
new file mode 100644
index 0000000..cdd72d2
--- /dev/null
+++ b/docs/html/design/media/calendar.mp4
Binary files differ
diff --git a/docs/html/design/media/calendar.ogv b/docs/html/design/media/calendar.ogv
new file mode 100644
index 0000000..efb23d2
--- /dev/null
+++ b/docs/html/design/media/calendar.ogv
Binary files differ
diff --git a/docs/html/design/media/calendar.webm b/docs/html/design/media/calendar.webm
new file mode 100644
index 0000000..9d7d9f2
--- /dev/null
+++ b/docs/html/design/media/calendar.webm
Binary files differ
diff --git a/docs/html/design/media/confirm_ack_acknowledge.png b/docs/html/design/media/confirm_ack_acknowledge.png
index b78eb14..adf608f 100644
--- a/docs/html/design/media/confirm_ack_acknowledge.png
+++ b/docs/html/design/media/confirm_ack_acknowledge.png
Binary files differ
diff --git a/docs/html/design/media/confirm_ack_draft_deleted.png b/docs/html/design/media/confirm_ack_draft_deleted.png
index f189db9..cf1cd6e 100644
--- a/docs/html/design/media/confirm_ack_draft_deleted.png
+++ b/docs/html/design/media/confirm_ack_draft_deleted.png
Binary files differ
diff --git a/docs/html/design/media/confirm_ack_ex_draftsave.png b/docs/html/design/media/confirm_ack_ex_draftsave.png
index 473368d8..636edc7 100644
--- a/docs/html/design/media/confirm_ack_ex_draftsave.png
+++ b/docs/html/design/media/confirm_ack_ex_draftsave.png
Binary files differ
diff --git a/docs/html/design/media/confirm_ack_ex_removeapp.png b/docs/html/design/media/confirm_ack_ex_removeapp.png
index 0abacce..49f2e55 100644
--- a/docs/html/design/media/confirm_ack_ex_removeapp.png
+++ b/docs/html/design/media/confirm_ack_ex_removeapp.png
Binary files differ
diff --git a/docs/html/design/media/creative_vision_main.png b/docs/html/design/media/creative_vision_main.png
index 2b3bb2f..4db1fd5 100644
--- a/docs/html/design/media/creative_vision_main.png
+++ b/docs/html/design/media/creative_vision_main.png
Binary files differ
diff --git a/docs/html/design/media/design_elements_landing.png b/docs/html/design/media/design_elements_landing.png
index d078cef..3a70aea 100644
--- a/docs/html/design/media/design_elements_landing.png
+++ b/docs/html/design/media/design_elements_landing.png
Binary files differ
diff --git a/docs/html/design/media/devices_displays_density@2x.png b/docs/html/design/media/devices_displays_density@2x.png
index 79a46b0..cdd45a8 100644
--- a/docs/html/design/media/devices_displays_density@2x.png
+++ b/docs/html/design/media/devices_displays_density@2x.png
Binary files differ
diff --git a/docs/html/design/media/dialogs_examples.png b/docs/html/design/media/dialogs_examples.png
index 981c5f3..c136476 100644
--- a/docs/html/design/media/dialogs_examples.png
+++ b/docs/html/design/media/dialogs_examples.png
Binary files differ
diff --git a/docs/html/design/media/dialogs_main.png b/docs/html/design/media/dialogs_main.png
index b95266a..0427151 100644
--- a/docs/html/design/media/dialogs_main.png
+++ b/docs/html/design/media/dialogs_main.png
Binary files differ
diff --git a/docs/html/design/media/dialogs_popups_example.png b/docs/html/design/media/dialogs_popups_example.png
index c7536f3..6c98b1fc 100644
--- a/docs/html/design/media/dialogs_popups_example.png
+++ b/docs/html/design/media/dialogs_popups_example.png
Binary files differ
diff --git a/docs/html/design/media/dialogs_toasts.png b/docs/html/design/media/dialogs_toasts.png
index cc0b815..b12778c 100644
--- a/docs/html/design/media/dialogs_toasts.png
+++ b/docs/html/design/media/dialogs_toasts.png
Binary files 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 0000000..d24a798
--- /dev/null
+++ b/docs/html/design/media/documents-export-2013-10-29.zip
Binary files differ
diff --git a/docs/html/design/media/downloads_color_swatches.png b/docs/html/design/media/downloads_color_swatches.png
index af2b24f..ed9b28d 100644
--- a/docs/html/design/media/downloads_color_swatches.png
+++ b/docs/html/design/media/downloads_color_swatches.png
Binary files differ
diff --git a/docs/html/design/media/downloads_stencils.png b/docs/html/design/media/downloads_stencils.png
index 9b1a9fe..71c6b0c 100644
--- a/docs/html/design/media/downloads_stencils.png
+++ b/docs/html/design/media/downloads_stencils.png
Binary files 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 0000000..8dc232c
--- /dev/null
+++ b/docs/html/design/media/fullscreen_immersive_swipe_bottom.png
Binary files 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 0000000..5fbe2ef
--- /dev/null
+++ b/docs/html/design/media/fullscreen_immersive_swipe_top.png
Binary files differ
diff --git a/docs/html/design/media/fullscreen_landing.png b/docs/html/design/media/fullscreen_landing.png
new file mode 100644
index 0000000..d627936
--- /dev/null
+++ b/docs/html/design/media/fullscreen_landing.png
Binary files differ
diff --git a/docs/html/design/media/fullscreen_leanback.png b/docs/html/design/media/fullscreen_leanback.png
new file mode 100644
index 0000000..568fe38
--- /dev/null
+++ b/docs/html/design/media/fullscreen_leanback.png
Binary files differ
diff --git a/docs/html/design/media/gesture_doubletouch.png b/docs/html/design/media/gesture_doubletouch.png
index 4c68ae6..7acae26 100644
--- a/docs/html/design/media/gesture_doubletouch.png
+++ b/docs/html/design/media/gesture_doubletouch.png
Binary files differ
diff --git a/docs/html/design/media/gesture_doubletouchdrag.png b/docs/html/design/media/gesture_doubletouchdrag.png
new file mode 100644
index 0000000..d2cef40
--- /dev/null
+++ b/docs/html/design/media/gesture_doubletouchdrag.png
Binary files differ
diff --git a/docs/html/design/media/gesture_drag.png b/docs/html/design/media/gesture_drag.png
index cb0d72c..79549af 100644
--- a/docs/html/design/media/gesture_drag.png
+++ b/docs/html/design/media/gesture_drag.png
Binary files differ
diff --git a/docs/html/design/media/gesture_longtouch.png b/docs/html/design/media/gesture_longtouch.png
index 30d13d4..983b724 100644
--- a/docs/html/design/media/gesture_longtouch.png
+++ b/docs/html/design/media/gesture_longtouch.png
Binary files differ
diff --git a/docs/html/design/media/gesture_pinchclose.png b/docs/html/design/media/gesture_pinchclose.png
index daf2905..749b447 100644
--- a/docs/html/design/media/gesture_pinchclose.png
+++ b/docs/html/design/media/gesture_pinchclose.png
Binary files differ
diff --git a/docs/html/design/media/gesture_pinchopen.png b/docs/html/design/media/gesture_pinchopen.png
index c05b633..a0869e2 100644
--- a/docs/html/design/media/gesture_pinchopen.png
+++ b/docs/html/design/media/gesture_pinchopen.png
Binary files differ
diff --git a/docs/html/design/media/gesture_swipe.png b/docs/html/design/media/gesture_swipe.png
index 6f47df6..befaf1a 100644
--- a/docs/html/design/media/gesture_swipe.png
+++ b/docs/html/design/media/gesture_swipe.png
Binary files differ
diff --git a/docs/html/design/media/gesture_touch.png b/docs/html/design/media/gesture_touch.png
index 365c352..9fa8a75 100644
--- a/docs/html/design/media/gesture_touch.png
+++ b/docs/html/design/media/gesture_touch.png
Binary files differ
diff --git a/docs/html/design/media/help_cling.png b/docs/html/design/media/help_cling.png
index c91d189..13ea720 100644
--- a/docs/html/design/media/help_cling.png
+++ b/docs/html/design/media/help_cling.png
Binary files differ
diff --git a/docs/html/design/media/iconography_launcher_example.png b/docs/html/design/media/iconography_launcher_example.png
index 0cce7ef9..58dbb4e 100644
--- a/docs/html/design/media/iconography_launcher_example.png
+++ b/docs/html/design/media/iconography_launcher_example.png
Binary files differ
diff --git a/docs/html/design/media/iconography_launcher_example2.png b/docs/html/design/media/iconography_launcher_example2.png
index 5a709e2..1dcc91b 100644
--- a/docs/html/design/media/iconography_launcher_example2.png
+++ b/docs/html/design/media/iconography_launcher_example2.png
Binary files differ
diff --git a/docs/html/design/media/iconography_overview.png b/docs/html/design/media/iconography_overview.png
index 56cd409..b90b797 100644
--- a/docs/html/design/media/iconography_overview.png
+++ b/docs/html/design/media/iconography_overview.png
Binary files differ
diff --git a/docs/html/design/media/index_landing_page.png b/docs/html/design/media/index_landing_page.png
index 2065344..078eb4d 100644
--- a/docs/html/design/media/index_landing_page.png
+++ b/docs/html/design/media/index_landing_page.png
Binary files differ
diff --git a/docs/html/design/media/metrics_diagram.png b/docs/html/design/media/metrics_diagram.png
index 5cbe252..888f484 100644
--- a/docs/html/design/media/metrics_diagram.png
+++ b/docs/html/design/media/metrics_diagram.png
Binary files differ
diff --git a/docs/html/design/media/migrating_ios_dialers.png b/docs/html/design/media/migrating_ios_dialers.png
index a9230bc..cf36c18 100644
--- a/docs/html/design/media/migrating_ios_dialers.png
+++ b/docs/html/design/media/migrating_ios_dialers.png
Binary files differ
diff --git a/docs/html/design/media/migrating_ios_galleries.png b/docs/html/design/media/migrating_ios_galleries.png
index 6bc1351..05b511d 100644
--- a/docs/html/design/media/migrating_ios_galleries.png
+++ b/docs/html/design/media/migrating_ios_galleries.png
Binary files differ
diff --git a/docs/html/design/media/migrating_ios_settings.png b/docs/html/design/media/migrating_ios_settings.png
index 5b335fe..d241273 100644
--- a/docs/html/design/media/migrating_ios_settings.png
+++ b/docs/html/design/media/migrating_ios_settings.png
Binary files differ
diff --git a/docs/html/design/media/multipane_expand.png b/docs/html/design/media/multipane_expand.png
index 6014cc8..627de75 100644
--- a/docs/html/design/media/multipane_expand.png
+++ b/docs/html/design/media/multipane_expand.png
Binary files differ
diff --git a/docs/html/design/media/multipane_show.png b/docs/html/design/media/multipane_show.png
index 9993c9b..b2ac57c 100644
--- a/docs/html/design/media/multipane_show.png
+++ b/docs/html/design/media/multipane_show.png
Binary files differ
diff --git a/docs/html/design/media/multipane_stack.png b/docs/html/design/media/multipane_stack.png
index 567099e..d411ad5 100644
--- a/docs/html/design/media/multipane_stack.png
+++ b/docs/html/design/media/multipane_stack.png
Binary files differ
diff --git a/docs/html/design/media/multipane_stretch.png b/docs/html/design/media/multipane_stretch.png
index b2dca02..8d12254 100644
--- a/docs/html/design/media/multipane_stretch.png
+++ b/docs/html/design/media/multipane_stretch.png
Binary files differ
diff --git a/docs/html/design/media/multipane_view_tablet.png b/docs/html/design/media/multipane_view_tablet.png
index f116b6f..d59308a 100644
--- a/docs/html/design/media/multipane_view_tablet.png
+++ b/docs/html/design/media/multipane_view_tablet.png
Binary files differ
diff --git a/docs/html/design/media/multipane_views.png b/docs/html/design/media/multipane_views.png
index 40b8af6..1f1ad5e 100644
--- a/docs/html/design/media/multipane_views.png
+++ b/docs/html/design/media/multipane_views.png
Binary files differ
diff --git a/docs/html/design/media/navigation_between_apps_back.png b/docs/html/design/media/navigation_between_apps_back.png
index d5cd979..a817374 100644
--- a/docs/html/design/media/navigation_between_apps_back.png
+++ b/docs/html/design/media/navigation_between_apps_back.png
Binary files differ
diff --git a/docs/html/design/media/navigation_between_apps_inward.png b/docs/html/design/media/navigation_between_apps_inward.png
index 7394b1c..321d0da 100644
--- a/docs/html/design/media/navigation_between_apps_inward.png
+++ b/docs/html/design/media/navigation_between_apps_inward.png
Binary files differ
diff --git a/docs/html/design/media/navigation_between_apps_up.png b/docs/html/design/media/navigation_between_apps_up.png
index 99c3112..42d0d8f 100644
--- a/docs/html/design/media/navigation_between_apps_up.png
+++ b/docs/html/design/media/navigation_between_apps_up.png
Binary files differ
diff --git a/docs/html/design/media/navigation_between_siblings_gmail.png b/docs/html/design/media/navigation_between_siblings_gmail.png
index 64f06c6..f4c7e0f 100644
--- a/docs/html/design/media/navigation_between_siblings_gmail.png
+++ b/docs/html/design/media/navigation_between_siblings_gmail.png
Binary files differ
diff --git a/docs/html/design/media/navigation_between_siblings_market1.png b/docs/html/design/media/navigation_between_siblings_market1.png
index b12a432..c22a831 100644
--- a/docs/html/design/media/navigation_between_siblings_market1.png
+++ b/docs/html/design/media/navigation_between_siblings_market1.png
Binary files differ
diff --git a/docs/html/design/media/navigation_between_siblings_market2.png b/docs/html/design/media/navigation_between_siblings_market2.png
index a09d9d7..af483e1 100644
--- a/docs/html/design/media/navigation_between_siblings_market2.png
+++ b/docs/html/design/media/navigation_between_siblings_market2.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_CAB.png b/docs/html/design/media/navigation_drawer_CAB.png
index 9d4a5b56..819812b 100644
--- a/docs/html/design/media/navigation_drawer_CAB.png
+++ b/docs/html/design/media/navigation_drawer_CAB.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_collapse.png b/docs/html/design/media/navigation_drawer_collapse.png
index 7ca56da..8417ab9 100644
--- a/docs/html/design/media/navigation_drawer_collapse.png
+++ b/docs/html/design/media/navigation_drawer_collapse.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_cross_nav.png b/docs/html/design/media/navigation_drawer_cross_nav.png
index bf8d238..ea8c284 100644
--- a/docs/html/design/media/navigation_drawer_cross_nav.png
+++ b/docs/html/design/media/navigation_drawer_cross_nav.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_first_run.png b/docs/html/design/media/navigation_drawer_first_run.png
index 728f29f..8ec6fc4 100644
--- a/docs/html/design/media/navigation_drawer_first_run.png
+++ b/docs/html/design/media/navigation_drawer_first_run.png
Binary files 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 dcb91ab9..17be5fd 100644
--- a/docs/html/design/media/navigation_drawer_holo_dark_light.png
+++ b/docs/html/design/media/navigation_drawer_holo_dark_light.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_layout.png b/docs/html/design/media/navigation_drawer_layout.png
index e59b37c..8d383f9 100644
--- a/docs/html/design/media/navigation_drawer_layout.png
+++ b/docs/html/design/media/navigation_drawer_layout.png
Binary files 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 0df04e9..601abd7 100644
--- a/docs/html/design/media/navigation_drawer_nav_and_actions.png
+++ b/docs/html/design/media/navigation_drawer_nav_and_actions.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_navigation_hubs.png b/docs/html/design/media/navigation_drawer_navigation_hubs.png
index 9f4b244..6a7d373 100644
--- a/docs/html/design/media/navigation_drawer_navigation_hubs.png
+++ b/docs/html/design/media/navigation_drawer_navigation_hubs.png
Binary files 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 ec5f03d..cbde9ee 100644
--- a/docs/html/design/media/navigation_drawer_open_from_lower.png
+++ b/docs/html/design/media/navigation_drawer_open_from_lower.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_open_overflow.png b/docs/html/design/media/navigation_drawer_open_overflow.png
index 112a414..84e4a35 100644
--- a/docs/html/design/media/navigation_drawer_open_overflow.png
+++ b/docs/html/design/media/navigation_drawer_open_overflow.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_overview.png b/docs/html/design/media/navigation_drawer_overview.png
index 42d21fa..f561ea7 100644
--- a/docs/html/design/media/navigation_drawer_overview.png
+++ b/docs/html/design/media/navigation_drawer_overview.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_peek.png b/docs/html/design/media/navigation_drawer_peek.png
index c59881e..f51cb29 100644
--- a/docs/html/design/media/navigation_drawer_peek.png
+++ b/docs/html/design/media/navigation_drawer_peek.png
Binary files 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 0e44915..3f24d30 100644
--- a/docs/html/design/media/navigation_drawer_quick_to_top.png
+++ b/docs/html/design/media/navigation_drawer_quick_to_top.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_reset_backstack.png b/docs/html/design/media/navigation_drawer_reset_backstack.png
index c0c2f61..54226c0 100644
--- a/docs/html/design/media/navigation_drawer_reset_backstack.png
+++ b/docs/html/design/media/navigation_drawer_reset_backstack.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_settings_help.png b/docs/html/design/media/navigation_drawer_settings_help.png
index ed29971..f14c284 100644
--- a/docs/html/design/media/navigation_drawer_settings_help.png
+++ b/docs/html/design/media/navigation_drawer_settings_help.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_titles_icons.png b/docs/html/design/media/navigation_drawer_titles_icons.png
index b726c9b..7cf1e0c 100644
--- a/docs/html/design/media/navigation_drawer_titles_icons.png
+++ b/docs/html/design/media/navigation_drawer_titles_icons.png
Binary files differ
diff --git a/docs/html/design/media/navigation_drawer_top_out.png b/docs/html/design/media/navigation_drawer_top_out.png
index ad92b77..4f379de 100644
--- a/docs/html/design/media/navigation_drawer_top_out.png
+++ b/docs/html/design/media/navigation_drawer_top_out.png
Binary files differ
diff --git a/docs/html/design/media/navigation_from_outside_back.png b/docs/html/design/media/navigation_from_outside_back.png
index a94e9c3..0e1aa04 100644
--- a/docs/html/design/media/navigation_from_outside_back.png
+++ b/docs/html/design/media/navigation_from_outside_back.png
Binary files differ
diff --git a/docs/html/design/media/navigation_indirect_notification.png b/docs/html/design/media/navigation_indirect_notification.png
index ca9a1b5..a8b2307 100644
--- a/docs/html/design/media/navigation_indirect_notification.png
+++ b/docs/html/design/media/navigation_indirect_notification.png
Binary files differ
diff --git a/docs/html/design/media/navigation_popup_notification.png b/docs/html/design/media/navigation_popup_notification.png
index 76ed984..4114e3c 100644
--- a/docs/html/design/media/navigation_popup_notification.png
+++ b/docs/html/design/media/navigation_popup_notification.png
Binary files 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 fdeeb90..d5eaa18 100644
--- a/docs/html/design/media/navigation_up_vs_back_gmail.png
+++ b/docs/html/design/media/navigation_up_vs_back_gmail.png
Binary files differ
diff --git a/docs/html/design/media/notifications_dismiss.png b/docs/html/design/media/notifications_dismiss.png
index 696a97f..efbec68 100644
--- a/docs/html/design/media/notifications_dismiss.png
+++ b/docs/html/design/media/notifications_dismiss.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_phone_icons.png b/docs/html/design/media/notifications_pattern_phone_icons.png
index bee66c9..348c9a1 100644
--- a/docs/html/design/media/notifications_pattern_phone_icons.png
+++ b/docs/html/design/media/notifications_pattern_phone_icons.png
Binary files differ
diff --git a/docs/html/design/media/principles_delight.png b/docs/html/design/media/principles_delight.png
index 5d6e909..705aa7a 100644
--- a/docs/html/design/media/principles_delight.png
+++ b/docs/html/design/media/principles_delight.png
Binary files 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 954363f..79026bc 100644
--- a/docs/html/design/media/principles_get_to_know_me.png
+++ b/docs/html/design/media/principles_get_to_know_me.png
Binary files differ
diff --git a/docs/html/design/media/principles_heavy_lifting.png b/docs/html/design/media/principles_heavy_lifting.png
index c89c0ff..57097cb 100644
--- a/docs/html/design/media/principles_heavy_lifting.png
+++ b/docs/html/design/media/principles_heavy_lifting.png
Binary files differ
diff --git a/docs/html/design/media/principles_important_interruption.png b/docs/html/design/media/principles_important_interruption.png
index 0576efe..df2cd48 100644
--- a/docs/html/design/media/principles_important_interruption.png
+++ b/docs/html/design/media/principles_important_interruption.png
Binary files differ
diff --git a/docs/html/design/media/principles_looks_same.png b/docs/html/design/media/principles_looks_same.png
index 3a556ad..c23bbc3 100644
--- a/docs/html/design/media/principles_looks_same.png
+++ b/docs/html/design/media/principles_looks_same.png
Binary files differ
diff --git a/docs/html/design/media/principles_make_important_fast.png b/docs/html/design/media/principles_make_important_fast.png
index 26da655..b581872 100644
--- a/docs/html/design/media/principles_make_important_fast.png
+++ b/docs/html/design/media/principles_make_important_fast.png
Binary files differ
diff --git a/docs/html/design/media/principles_make_it_mine.png b/docs/html/design/media/principles_make_it_mine.png
index 683a0b7..a880b22 100644
--- a/docs/html/design/media/principles_make_it_mine.png
+++ b/docs/html/design/media/principles_make_it_mine.png
Binary files differ
diff --git a/docs/html/design/media/principles_navigation.png b/docs/html/design/media/principles_navigation.png
index c23dde7..531f22c 100644
--- a/docs/html/design/media/principles_navigation.png
+++ b/docs/html/design/media/principles_navigation.png
Binary files differ
diff --git a/docs/html/design/media/principles_real_objects.png b/docs/html/design/media/principles_real_objects.png
index 3889c9a..107c69d 100644
--- a/docs/html/design/media/principles_real_objects.png
+++ b/docs/html/design/media/principles_real_objects.png
Binary files differ
diff --git a/docs/html/design/media/principles_sprinkle_encouragement.png b/docs/html/design/media/principles_sprinkle_encouragement.png
index 8617365a..5390951 100644
--- a/docs/html/design/media/principles_sprinkle_encouragement.png
+++ b/docs/html/design/media/principles_sprinkle_encouragement.png
Binary files differ
diff --git a/docs/html/design/media/progress_activity.png b/docs/html/design/media/progress_activity.png
index f4dffab..49a6f50 100644
--- a/docs/html/design/media/progress_activity.png
+++ b/docs/html/design/media/progress_activity.png
Binary files differ
diff --git a/docs/html/design/media/progress_activity_custom.png b/docs/html/design/media/progress_activity_custom.png
index 2bfdd52..0b45f76 100644
--- a/docs/html/design/media/progress_activity_custom.png
+++ b/docs/html/design/media/progress_activity_custom.png
Binary files 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 fd22436..0000000
--- a/docs/html/design/media/progress_activity_do.png
+++ /dev/null
Binary files 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 0000000..ddc4a33
--- /dev/null
+++ b/docs/html/design/media/progress_activity_do_dont.png
Binary files 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 08c4b5d..0000000
--- a/docs/html/design/media/progress_activity_dont.png
+++ /dev/null
Binary files differ
diff --git a/docs/html/design/media/progress_download.png b/docs/html/design/media/progress_download.png
index ab6bf58..5c9e556 100644
--- a/docs/html/design/media/progress_download.png
+++ b/docs/html/design/media/progress_download.png
Binary files differ
diff --git a/docs/html/design/media/scroll_index.mp4 b/docs/html/design/media/scroll_index.mp4
index 383bbd8..f7afb46 100644
--- a/docs/html/design/media/scroll_index.mp4
+++ b/docs/html/design/media/scroll_index.mp4
Binary files differ
diff --git a/docs/html/design/media/scroll_index.ogv b/docs/html/design/media/scroll_index.ogv
index 2cd61ef..378281ba 100644
--- a/docs/html/design/media/scroll_index.ogv
+++ b/docs/html/design/media/scroll_index.ogv
Binary files differ
diff --git a/docs/html/design/media/scroll_index.webm b/docs/html/design/media/scroll_index.webm
index 5a665d1..7e4aa88 100644
--- a/docs/html/design/media/scroll_index.webm
+++ b/docs/html/design/media/scroll_index.webm
Binary files differ
diff --git a/docs/html/design/media/scroll_indicator.mp4 b/docs/html/design/media/scroll_indicator.mp4
index 924852e..206c1f2 100644
--- a/docs/html/design/media/scroll_indicator.mp4
+++ b/docs/html/design/media/scroll_indicator.mp4
Binary files differ
diff --git a/docs/html/design/media/scroll_indicator.ogv b/docs/html/design/media/scroll_indicator.ogv
index c037bf5..4cdc76f 100644
--- a/docs/html/design/media/scroll_indicator.ogv
+++ b/docs/html/design/media/scroll_indicator.ogv
Binary files differ
diff --git a/docs/html/design/media/scroll_indicator.webm b/docs/html/design/media/scroll_indicator.webm
index 000dc0a..b848c20 100644
--- a/docs/html/design/media/scroll_indicator.webm
+++ b/docs/html/design/media/scroll_indicator.webm
Binary files differ
diff --git a/docs/html/design/media/seekbar_example.png b/docs/html/design/media/seekbar_example.png
index 4c0790a..cbd2d34 100644
--- a/docs/html/design/media/seekbar_example.png
+++ b/docs/html/design/media/seekbar_example.png
Binary files differ
diff --git a/docs/html/design/media/settings_checkbox.png b/docs/html/design/media/settings_checkbox.png
index 6615bfb..ccd75a0 100644
--- a/docs/html/design/media/settings_checkbox.png
+++ b/docs/html/design/media/settings_checkbox.png
Binary files differ
diff --git a/docs/html/design/media/settings_date_time.png b/docs/html/design/media/settings_date_time.png
index 8df92d4..0c7fa10 100644
--- a/docs/html/design/media/settings_date_time.png
+++ b/docs/html/design/media/settings_date_time.png
Binary files differ
diff --git a/docs/html/design/media/settings_dependency.png b/docs/html/design/media/settings_dependency.png
index 4821c61..ecb31f5 100644
--- a/docs/html/design/media/settings_dependency.png
+++ b/docs/html/design/media/settings_dependency.png
Binary files differ
diff --git a/docs/html/design/media/settings_grouping.png b/docs/html/design/media/settings_grouping.png
index d271ea8..899e1c5 100644
--- a/docs/html/design/media/settings_grouping.png
+++ b/docs/html/design/media/settings_grouping.png
Binary files differ
diff --git a/docs/html/design/media/settings_individual_on_off.png b/docs/html/design/media/settings_individual_on_off.png
index 03bea0b..d38f60a 100644
--- a/docs/html/design/media/settings_individual_on_off.png
+++ b/docs/html/design/media/settings_individual_on_off.png
Binary files differ
diff --git a/docs/html/design/media/settings_list_subscreen.png b/docs/html/design/media/settings_list_subscreen.png
index 385aa6a..48d1c51 100644
--- a/docs/html/design/media/settings_list_subscreen.png
+++ b/docs/html/design/media/settings_list_subscreen.png
Binary files differ
diff --git a/docs/html/design/media/settings_master_on_off.png b/docs/html/design/media/settings_master_on_off.png
index e46bb97..bf6963f 100644
--- a/docs/html/design/media/settings_master_on_off.png
+++ b/docs/html/design/media/settings_master_on_off.png
Binary files 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 ab4e992..08f7966 100644
--- a/docs/html/design/media/settings_master_on_off_2.png
+++ b/docs/html/design/media/settings_master_on_off_2.png
Binary files differ
diff --git a/docs/html/design/media/settings_multiple_choice.png b/docs/html/design/media/settings_multiple_choice.png
index 9b28566..27a903e 100644
--- a/docs/html/design/media/settings_multiple_choice.png
+++ b/docs/html/design/media/settings_multiple_choice.png
Binary files differ
diff --git a/docs/html/design/media/settings_slider.png b/docs/html/design/media/settings_slider.png
index 51545c8..ae65156 100644
--- a/docs/html/design/media/settings_slider.png
+++ b/docs/html/design/media/settings_slider.png
Binary files differ
diff --git a/docs/html/design/media/settings_subscreen_navigation.png b/docs/html/design/media/settings_subscreen_navigation.png
index 2ab0b96..16bf26f 100644
--- a/docs/html/design/media/settings_subscreen_navigation.png
+++ b/docs/html/design/media/settings_subscreen_navigation.png
Binary files differ
diff --git a/docs/html/design/media/spinners_hololightanddark.png b/docs/html/design/media/spinners_hololightanddark.png
index cea5ec2..4010457 100644
--- a/docs/html/design/media/spinners_hololightanddark.png
+++ b/docs/html/design/media/spinners_hololightanddark.png
Binary files differ
diff --git a/docs/html/design/media/swipe_tabs.mp4 b/docs/html/design/media/swipe_tabs.mp4
index f8a1ab5..baffc63 100644
--- a/docs/html/design/media/swipe_tabs.mp4
+++ b/docs/html/design/media/swipe_tabs.mp4
Binary files differ
diff --git a/docs/html/design/media/swipe_tabs.ogv b/docs/html/design/media/swipe_tabs.ogv
index ae3c86b..215ff5a 100644
--- a/docs/html/design/media/swipe_tabs.ogv
+++ b/docs/html/design/media/swipe_tabs.ogv
Binary files differ
diff --git a/docs/html/design/media/swipe_tabs.webm b/docs/html/design/media/swipe_tabs.webm
index 86f403e..8809de1 100644
--- a/docs/html/design/media/swipe_tabs.webm
+++ b/docs/html/design/media/swipe_tabs.webm
Binary files differ
diff --git a/docs/html/design/media/swipe_views.png b/docs/html/design/media/swipe_views.png
index ea1e635..853800a 100644
--- a/docs/html/design/media/swipe_views.png
+++ b/docs/html/design/media/swipe_views.png
Binary files differ
diff --git a/docs/html/design/media/swipe_views2.png b/docs/html/design/media/swipe_views2.png
index ee0f2c4..2ff1f80 100644
--- a/docs/html/design/media/swipe_views2.png
+++ b/docs/html/design/media/swipe_views2.png
Binary files differ
diff --git a/docs/html/design/media/switches_checkboxes.png b/docs/html/design/media/switches_checkboxes.png
index 92b8d5c..91abed8 100644
--- a/docs/html/design/media/switches_checkboxes.png
+++ b/docs/html/design/media/switches_checkboxes.png
Binary files differ
diff --git a/docs/html/design/media/switches_radios.png b/docs/html/design/media/switches_radios.png
index f9bf5fc..94c4df0 100644
--- a/docs/html/design/media/switches_radios.png
+++ b/docs/html/design/media/switches_radios.png
Binary files differ
diff --git a/docs/html/design/media/tabs_overview.png b/docs/html/design/media/tabs_overview.png
index c336982..95efc3d 100644
--- a/docs/html/design/media/tabs_overview.png
+++ b/docs/html/design/media/tabs_overview.png
Binary files differ
diff --git a/docs/html/design/media/tabs_scrolly.mp4 b/docs/html/design/media/tabs_scrolly.mp4
index dc9e9c6..df5c537 100644
--- a/docs/html/design/media/tabs_scrolly.mp4
+++ b/docs/html/design/media/tabs_scrolly.mp4
Binary files differ
diff --git a/docs/html/design/media/tabs_scrolly.ogv b/docs/html/design/media/tabs_scrolly.ogv
index 3e484f9..f7cb9c3 100644
--- a/docs/html/design/media/tabs_scrolly.ogv
+++ b/docs/html/design/media/tabs_scrolly.ogv
Binary files differ
diff --git a/docs/html/design/media/tabs_scrolly.webm b/docs/html/design/media/tabs_scrolly.webm
index e9d371d..cc6a0fb 100644
--- a/docs/html/design/media/tabs_scrolly.webm
+++ b/docs/html/design/media/tabs_scrolly.webm
Binary files differ
diff --git a/docs/html/design/media/tabs_stacked.png b/docs/html/design/media/tabs_stacked.png
index 09e9958..23bef36 100644
--- a/docs/html/design/media/tabs_stacked.png
+++ b/docs/html/design/media/tabs_stacked.png
Binary files differ
diff --git a/docs/html/design/media/text_input_textselection.png b/docs/html/design/media/text_input_textselection.png
index f2ede0d..0585d95 100644
--- a/docs/html/design/media/text_input_textselection.png
+++ b/docs/html/design/media/text_input_textselection.png
Binary files differ
diff --git a/docs/html/design/media/text_input_typesandtypedown.png b/docs/html/design/media/text_input_typesandtypedown.png
index 1feac28..05da941 100644
--- a/docs/html/design/media/text_input_typesandtypedown.png
+++ b/docs/html/design/media/text_input_typesandtypedown.png
Binary files differ
diff --git a/docs/html/design/media/themes_holo_dark.png b/docs/html/design/media/themes_holo_dark.png
index e1f4477..0352508 100644
--- a/docs/html/design/media/themes_holo_dark.png
+++ b/docs/html/design/media/themes_holo_dark.png
Binary files 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 528d119..0000000
--- a/docs/html/design/media/themes_holo_inverse.png
+++ /dev/null
Binary files differ
diff --git a/docs/html/design/media/themes_holo_light.png b/docs/html/design/media/themes_holo_light.png
index 4f34bb3..77836cb 100644
--- a/docs/html/design/media/themes_holo_light.png
+++ b/docs/html/design/media/themes_holo_light.png
Binary files differ
diff --git a/docs/html/design/media/touch_feedback_communication.png b/docs/html/design/media/touch_feedback_communication.png
index 6388b77..f8162d0 100644
--- a/docs/html/design/media/touch_feedback_communication.png
+++ b/docs/html/design/media/touch_feedback_communication.png
Binary files differ
diff --git a/docs/html/design/media/touch_feedback_manipulation.png b/docs/html/design/media/touch_feedback_manipulation.png
index cb1f2681..1852563 100644
--- a/docs/html/design/media/touch_feedback_manipulation.png
+++ b/docs/html/design/media/touch_feedback_manipulation.png
Binary files differ
diff --git a/docs/html/design/media/touch_feedback_reaction_response.png b/docs/html/design/media/touch_feedback_reaction_response.png
index 5a34d7a..fccfd8e 100644
--- a/docs/html/design/media/touch_feedback_reaction_response.png
+++ b/docs/html/design/media/touch_feedback_reaction_response.png
Binary files differ
diff --git a/docs/html/design/media/touch_feedback_states.png b/docs/html/design/media/touch_feedback_states.png
index 9e306bb..4618134 100644
--- a/docs/html/design/media/touch_feedback_states.png
+++ b/docs/html/design/media/touch_feedback_states.png
Binary files differ
diff --git a/docs/html/design/media/ui_overview_all_apps.png b/docs/html/design/media/ui_overview_all_apps.png
index d44e5a4..7fd066c 100644
--- a/docs/html/design/media/ui_overview_all_apps.png
+++ b/docs/html/design/media/ui_overview_all_apps.png
Binary files differ
diff --git a/docs/html/design/media/ui_overview_app_ui.png b/docs/html/design/media/ui_overview_app_ui.png
index 7fc5dcd..6ea8139 100644
--- a/docs/html/design/media/ui_overview_app_ui.png
+++ b/docs/html/design/media/ui_overview_app_ui.png
Binary files differ
diff --git a/docs/html/design/media/ui_overview_home_screen.png b/docs/html/design/media/ui_overview_home_screen.png
index d1376b5..528a232 100644
--- a/docs/html/design/media/ui_overview_home_screen.png
+++ b/docs/html/design/media/ui_overview_home_screen.png
Binary files differ
diff --git a/docs/html/design/media/ui_overview_notifications.png b/docs/html/design/media/ui_overview_notifications.png
index fe4375e..6043412 100644
--- a/docs/html/design/media/ui_overview_notifications.png
+++ b/docs/html/design/media/ui_overview_notifications.png
Binary files differ
diff --git a/docs/html/design/media/ui_overview_recents.png b/docs/html/design/media/ui_overview_recents.png
index aabd7c7..5663b30 100644
--- a/docs/html/design/media/ui_overview_recents.png
+++ b/docs/html/design/media/ui_overview_recents.png
Binary files differ
diff --git a/docs/html/design/media/ui_overview_system_ui.png b/docs/html/design/media/ui_overview_system_ui.png
index 8993fff..a4280fa 100644
--- a/docs/html/design/media/ui_overview_system_ui.png
+++ b/docs/html/design/media/ui_overview_system_ui.png
Binary files differ
diff --git a/docs/html/design/media/whats_new_multipanel.png b/docs/html/design/media/whats_new_multipanel.png
index fbe2d56..e5564a7 100644
--- a/docs/html/design/media/whats_new_multipanel.png
+++ b/docs/html/design/media/whats_new_multipanel.png
Binary files differ
diff --git a/docs/html/design/media/widgets_gestures.png b/docs/html/design/media/widgets_gestures.png
index f991609..5e1268d 100644
--- a/docs/html/design/media/widgets_gestures.png
+++ b/docs/html/design/media/widgets_gestures.png
Binary files differ
diff --git a/docs/html/design/media/widgets_resizing01.png b/docs/html/design/media/widgets_resizing01.png
index 5c85df6..7d411ae 100644
--- a/docs/html/design/media/widgets_resizing01.png
+++ b/docs/html/design/media/widgets_resizing01.png
Binary files differ
diff --git a/docs/html/design/media/yourbranding_app.png b/docs/html/design/media/yourbranding_app.png
new file mode 100644
index 0000000..d38dce3
--- /dev/null
+++ b/docs/html/design/media/yourbranding_app.png
Binary files differ
diff --git a/docs/html/design/media/yourbranding_googlemusic.png b/docs/html/design/media/yourbranding_googlemusic.png
new file mode 100644
index 0000000..1e1df8b
--- /dev/null
+++ b/docs/html/design/media/yourbranding_googlemusic.png
Binary files differ
diff --git a/docs/html/design/media/yourbranding_icon.png b/docs/html/design/media/yourbranding_icon.png
new file mode 100644
index 0000000..ca8b353
--- /dev/null
+++ b/docs/html/design/media/yourbranding_icon.png
Binary files 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 0000000..80f0ce4
--- /dev/null
+++ b/docs/html/design/media/yourbranding_in-app-icons.png
Binary files differ
diff --git a/docs/html/design/media/yourbranding_logo.png b/docs/html/design/media/yourbranding_logo.png
new file mode 100644
index 0000000..328554d
--- /dev/null
+++ b/docs/html/design/media/yourbranding_logo.png
Binary files differ
diff --git a/docs/html/design/media/yourbranding_sharing.png b/docs/html/design/media/yourbranding_sharing.png
new file mode 100644
index 0000000..b11752c
--- /dev/null
+++ b/docs/html/design/media/yourbranding_sharing.png
Binary files differ
diff --git a/docs/html/design/patterns/accessibility.jd b/docs/html/design/patterns/accessibility.jd
index 16a39d6..532900e 100644
--- a/docs/html/design/patterns/accessibility.jd
+++ b/docs/html/design/patterns/accessibility.jd
@@ -55,7 +55,6 @@
<em>when not starred:</em> add to favorties</li>
<li class="value-7">action overflow button</li>
<li class="value-8">text message</li>
- <li class="value-9">video chat</li>
</ol>
</div>
</div>
diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd
index 2c59149..939370c 100644
--- a/docs/html/design/patterns/actionbar.jd
+++ b/docs/html/design/patterns/actionbar.jd
@@ -93,9 +93,9 @@
content across multiple bars located below the main action bar or at the bottom of the screen.</p>
<img src="{@docRoot}design/media/action_bar_pattern_rotation.png">
-<div class="figure-caption">
+<!-- <div class="figure-caption">
Split action bar showing action buttons at the bottom of the screen in vertical orientation.
-</div>
+</div> -->
<h2 id="considerations-split-action-bars">Layout Considerations for Split Action Bars</h2>
diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd
index 0dc20e2..1447d4e 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 @@
<img src="{@docRoot}design/media/app_structure_market.png">
<div class="figure-caption">
- The Play Store app's start screen primarily allows navigation into the stores for Apps, Music, Books,
- Movies, and Games. It is also enriched with tailored recommendations and promotions that
- surface content of interest to the user. Search is readily available from the action bar.
- </div>
-
- </div>
-</div>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-5">
-
-<h4>Create an identity for your app</h4>
-<p>Creating an identity for your app goes beyond the action bar. Your app communicates its identity
-through its data, the way that data is arranged, and how people interact with it. Especially for
-media-rich applications, try to create unique layouts that showcase your data and go beyond the
-monotony of simple list views.</p>
-
- </div>
- <div class="layout-content-col span-8">
-
- <img src="{@docRoot}design/media/app_structure_music_lndscp.png">
- <div class="figure-caption">
- The 3D carousel celebrates cover art and establishes a unique identity for the Music app.
- Defaulting to the Recent view keeps the focus on music the user has been listening to lately.
+ Play Music allows navigation among artists, albums, and playlists through rich content display.
+ It is also enriched with tailored recommendations and promotions that surface content of interest
+ to the user. Search is readily available from the action bar.
</div>
</div>
@@ -112,9 +91,8 @@
<img src="{@docRoot}design/media/app_structure_gmail.png">
<div class="figure-caption">
- Email is about productivity, so an efficient, easy-to-skim list with higher data density works
- well. Navigation supports switching between accounts and recent labels. Icons for creating a
- new message or searching are prominent in the split action bar at the bottom.
+ A calendar is about productivity, so an efficient, easy-to-skim view with higher data density works
+ well. Navigation supports switching views of day, week, month, and agenda views.
</div>
</div>
@@ -185,7 +163,7 @@
<div class="layout-content-col span-7">
<img src="{@docRoot}design/media/app_structure_drawer.png">
<div class="figure-caption">
- Navigation drawer from the Shopper app.
+ Navigation drawer from the Keep app.
</div>
</div>
</div>
@@ -230,7 +208,7 @@
<img src="{@docRoot}design/media/app_structure_fixedtabs.png">
<div class="figure-caption">
- YouTube uses fixed tabs to switch between different, relatively unrelated functional areas.
+ People uses fixed tabs to switch between different, relatively unrelated functional areas.
</div>
@@ -290,21 +268,6 @@
</div>
</div>
-<div class="layout-content-row">
- <div class="layout-content-col span-4">
-
-<h4>Lights-out mode</h4>
-<p>Immersive content like media and games is best experienced full screen without distractions. But that doesn't mean you can't also offer actions on the content like sharing, commenting, or searching. If the user hasn't interacted with any of the controls after a short period of time, automatically fade away the action bar and all system UI affordances so the user can lean back and enjoy the content. We call this lights-out mode. Later, if the user wants to take some action, they can touch anywhere on the screen to exit lights-out mode and bring back the controls.</p>
-
- </div>
- <div class="layout-content-col span-9">
-
- <img src="{@docRoot}design/media/app_structure_book_detail_page_flip.png">
- <div class="figure-caption">
- Google Books' detail view replicates the immersive experience of reading an actual book through lights-out mode and a page-flip animation.
- </div>
- </div>
-</div>
<h4>Make navigation between detail views efficient</h4>
<p>If your users are likely to want to look at multiple items in sequence, allow them to navigate
diff --git a/docs/html/design/patterns/fullscreen.jd b/docs/html/design/patterns/fullscreen.jd
new file mode 100644
index 0000000..191ca40
--- /dev/null
+++ b/docs/html/design/patterns/fullscreen.jd
@@ -0,0 +1,150 @@
+page.title=Full Screen
+page.tags="full screen","immersive", "leanback"
+@jd:body
+
+<p>
+ Some content is best experienced full screen, like videos, games, image
+ galleries, books, and slides in a presentation. You can engage users more
+ deeply with content in full screen by minimizing visual distraction from app
+ controls and protecting users from escaping the app accidentally.
+</p>
+
+ <img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;">
+
+<p>
+ In version 4.4, Android offers two approaches for making your app go full
+ screen: Lean Back and Immersive. In both approaches, all persistent system
+ bars are hidden. The difference between them is how the user brings the bars
+ back into view.
+</p>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+ <h4>Lean Back</h4>
+ <p>Touch the screen anywhere to bring back system bars. </p>
+ <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;">
+ </div>
+ <div class="layout-content-col span-6">
+ <h4>Immersive</h4>
+ <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p>
+ <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right">
+ <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px">
+ </div>
+</div>
+
+<h2 id="leanback">
+ Lean Back
+</h2>
+
+<p>
+ The Lean Back approach is for full-screen experiences in which users won't be
+ interacting heavily with the screen while consuming content, like while
+ watching a video.
+</p>
+
+<p>
+ In this type of experience, users are leaning back and watching the screen.
+ Then, when they need to bring back the bars, they simply touch anywhere. This
+ gesture is easy and intuitive.
+</p>
+
+ <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;">
+
+<h2 id="immersive">
+ Immersive
+</h2>
+
+<p>
+ The Immersive approach is mainly intended for apps in which the user will be
+ heavily interacting with the full screen as part of the primary experience.
+ Examples are games, viewing images in a gallery, or reading paginated
+ content, like a book or slides in a presentation.
+</p>
+
+<p>
+ In this type of experience, when users need to bring back the system bars,
+ they swipe from any edge where a system bar is hidden. By requiring this more
+ deliberate gesture, the user's deep engagement with your app won't be
+ interrupted by accidental touches and swipes.
+</p>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+ <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right">
+ <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px">
+ </div>
+</div>
+
+<p>
+ The user learns about the gesture to bring back the system bars through a
+ message that appears the first time the app goes full screen.
+</p>
+
+<p>
+ If your app has its own controls that aren't needed when a user is immersed
+ in content, make them disappear and reappear in sync with the system bars.
+ This rule also applies to any app-specific gestures you might have for hiding
+ and showing app controls. For example, if touching anywhere on the screen
+ toggles the appearance of an action bar or a palette, then it must also
+ toggle the appearance of system bars.
+</p>
+
+<p>
+ You might be tempted to use this approach just to maximize screen real
+ estate. But be mindful of how often users jump in and out of apps to check
+ notifications, do impromptu searches, and more. This approach will cause
+ users to lose easy access to system navigation, so a little extra space
+ should not be the only benefit they're getting in return.
+</p>
+
+<h2 id="variation_using_edges">
+ Variation: Swiping from edges with bars also affects the app
+</h2>
+
+<p>
+ In the Immersive approach, any time a user swipes from an edge with a system
+ bar, the Android framework takes care of revealing the system bars. Your app
+ won't even be aware that this gesture occurred.
+</p>
+
+<p>
+ But in some apps, the user might occasionally need to swipe from the edge as
+ <strong>part of the primary app experience</strong>. Examples are games and
+ drawing applications.
+</p>
+
+<p>
+ For apps with this requirement, you can use a variation on the Immersive
+ approach: when a user swipes from an edge with a system bar, system bars are
+ shown and the gesture is passed to the app so the app can respond to the
+ gesture.
+</p>
+
+<p>
+ For example, in a drawing app that uses this approach, if a user wants to
+ draw a line that begins at the very edge of the screen, swiping from the edge
+ would reveal the system bars and also start drawing a line that begins at the
+ very edge.
+</p>
+
+<p>
+ In this approach, to minimize disruption while a user is deeply engaged in
+ the app, the system bars are semi-transparent. The bars automatically
+ disappear after a few seconds of no interaction or as soon as the user
+ touches or gestures anywhere outside the system bars.
+</p>
+
+<h2 id="lightsout">What About Lights Out Mode?</h2>
+
+<p>
+ Before Android 4.4, the design guideline was to use Lights Out mode, a mode
+ in which the Action Bar and Status Bar fades away and becomes unavailable
+ after a few seconds of inactivity. The Navigation Bar is still available and
+ responds to touches but appears dimmed.
+</p>
+
+<p>
+ Replace previous implementations of Lights Out mode with the Lean Back or
+ Immersive approaches. Continue to use Lights Out mode for implementations of
+ your app targeted for earlier releases.
+</p>
\ No newline at end of file
diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd
index 127a1c8..837a6dd 100644
--- a/docs/html/design/patterns/gestures.jd
+++ b/docs/html/design/patterns/gestures.jd
@@ -5,112 +5,122 @@
<p>Gestures allow users to interact with your app by manipulating the screen objects you provide. The
following table shows the core gesture set that is supported in Android.</p>
-<div class="layout-content-row">
- <div class="layout-content-col span-4">
+<div class="vspace size-2"> </div>
+<div class="layout-content-row">
+
+ <div class="layout-content-col span-4">
<img src="{@docRoot}design/media/gesture_touch.png">
-
-<h4>Touch</h4>
-<p>Triggers the default functionality for a given item.</p>
-
-<ul>
- <li class="no-bullet with-icon action">
- <h4>Action</h4>
- <p>Press, lift</p></li>
-</ul>
-
+ <h4>Touch</h4>
+ <p>Triggers the default functionality for a given item.</p>
+ <ul>
+ <li class="no-bullet with-icon action">
+ <h4>Action</h4>
+ <p>Press, lift</p></li>
+ </ul>
</div>
- <div class="layout-content-col span-4">
+ <div class="layout-content-col span-4">
<img src="{@docRoot}design/media/gesture_longtouch.png">
-
-<h4>Long press</h4>
-<p>Enters data selection mode. Allows you to select one or more items in a view and act upon
- the data using a contextual action bar. Avoid using long press for showing contextual menus.</p>
-
-<ul>
- <li class="no-bullet with-icon action">
- <h4>Action</h4>
- <p>Press, wait, lift</p></li>
-</ul>
-
+ <h4>Long press</h4>
+ <p>Enters data selection mode. Allows you to select one or more items in a view and act upon
+ the data using a contextual action bar. Avoid using long press for showing contextual menus.</p>
+ <ul>
+ <li class="no-bullet with-icon action">
+ <h4>Action</h4>
+ <p>Press, wait, lift</p></li>
+ </ul>
</div>
- <div class="layout-content-col span-4">
+ <div class="layout-content-col span-4">
<img src="{@docRoot}design/media/gesture_swipe.png">
-
-<h4>Swipe</h4>
-<p>Scrolls overflowing content, or navigates between views in the same hierarchy.</p>
-
-<ul>
- <li class="no-bullet with-icon action">
- <h4>Action</h4>
- <p>Press, move, lift</p></li>
-</ul>
-
+ <h4>Swipe or drag</h4>
+ <p>Scrolls overflowing content, or navigates between views in the same hierarchy. Swipes are
+ quick and affect the screen even after the finger is picked up. Drags are slower and more precise,
+ and the screen stops responding when the finger is picked up.</p>
+ <ul>
+ <li class="no-bullet with-icon action">
+ <h4>Action</h4>
+ <p>Press, move, lift</p></li>
+ </ul>
</div>
+
</div>
+<div class="vspace size-2"> </div>
<div class="layout-content-row">
- <div class="layout-content-col span-4">
+ <div class="layout-content-col span-4">
<img src="{@docRoot}design/media/gesture_drag.png">
-
-<h4>Drag</h4>
-<p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p>
-
-<ul>
- <li class="no-bullet with-icon action">
- <h4>Action</h4>
- <p>Long press, move, lift</p></li>
-</ul>
-
+ <h4>Long press drag</h4>
+ <p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p>
+ <ul>
+ <li class="no-bullet with-icon action">
+ <h4>Action</h4>
+ <p>Long press, move, lift</p></li>
+ </ul>
</div>
- <div class="layout-content-col span-4">
+ <div class="layout-content-col span-4">
<img src="{@docRoot}design/media/gesture_doubletouch.png">
-
-<h4>Double touch</h4>
-<p>Zooms into content. Also used as a secondary gesture for text selection.</p>
-
-<ul>
- <li class="no-bullet with-icon action">
- <h4>Action</h4>
- <p>Two touches in quick succession</p></li>
-</ul>
-
+ <h4>Double touch </h4>
+ <p>Scales up the smallest targetable view, if available, or scales a standard amount
+ around the gesture. Also used as a secondary gesture for text selection.</p>
+ <ul>
+ <li class="no-bullet with-icon action">
+ <h4>Action</h4>
+ <p>Two touches in quick succession</p>
+ </li>
+ </ul>
</div>
+
<div class="layout-content-col span-4">
-
- <img src="{@docRoot}design/media/gesture_pinchopen.png" style="margin-left:-4px">
-
-<h4>Pinch open</h4>
-<p>Zooms into content.</p>
-
-<ul>
- <li class="no-bullet with-icon action">
- <h4>Action</h4>
- <p>2-finger press, move outwards, lift</p></li>
-</ul>
-
+ <img src="{@docRoot}design/media/gesture_doubletouchdrag.png">
+ <h4>Double touch drag</h4>
+ <p>Scales content by pushing away or pulling closer, centered around gesture.</p>
+ <ul>
+ <li class="no-bullet with-icon action">
+ <h4>Action</h4>
+ <p>A single touch followed in quick succession by a drag up or down:</p>
+ <ul style="padding-left:1.5em;list-style-type:disc;">
+ <li>Dragging up decreases content scale</li>
+ <li>Dragging down increases content scale</li>
+ <li>Reversing drag direction reverses scaling.</li>
+ </ul>
+ </li>
+ </ul>
</div>
+
</div>
+<div class="vspace size-2"> </div>
+
<div class="layout-content-row">
+
<div class="layout-content-col span-4">
-
- <img src="{@docRoot}design/media/gesture_pinchclose.png">
-
-<h4>Pinch close</h4>
-<p>Zooms out of content.</p>
-
-<ul>
- <li class="no-bullet with-icon action">
- <h4>Action</h4>
- <p>2-finger press, move inwards, lift</p></li>
-</ul>
-
+ <img src="{@docRoot}design/media/gesture_pinchopen.png" style="margin-left:-4px">
+ <h4>Pinch open</h4>
+ <p>Zooms into content.</p>
+ <ul>
+ <li class="no-bullet with-icon action">
+ <h4>Action</h4>
+ <p>2-finger press, move outwards, lift</p></li>
+ </ul>
</div>
+
+ <div class="layout-content-col span-4">
+ <img src="{@docRoot}design/media/gesture_pinchclose.png">
+ <h4>Pinch close</h4>
+ <p>Zooms out of content.</p>
+ <ul>
+ <li class="no-bullet with-icon action">
+ <h4>Action</h4>
+ <p>2-finger press, move inwards, lift</p>
+ </li>
+ </ul>
+ </div>
+
</div>
+
diff --git a/docs/html/design/patterns/help.jd b/docs/html/design/patterns/help.jd
index a32fb25..ad5742d 100644
--- a/docs/html/design/patterns/help.jd
+++ b/docs/html/design/patterns/help.jd
@@ -20,7 +20,7 @@
<p>The only reason for showing pure help content to new users unsolicited is:<br>
<em>To teach high value functionality that's only available through a gesture.</em></p>
-<p>For example, we use help content to teach users how to place apps on their Home Screen. This functionality is:</p>
+<p>For example, we use help content to teach users how to place apps on their Home screen. This functionality is:</p>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<ul>
diff --git a/docs/html/design/patterns/new.jd b/docs/html/design/patterns/new.jd
index 23e3e10..50cb950 100644
--- a/docs/html/design/patterns/new.jd
+++ b/docs/html/design/patterns/new.jd
@@ -1,7 +1,97 @@
page.title=New in Android
+page.tags="KitKat", "Android 4.4"
@jd:body
-<h2>Jelly Bean - Android 4.1</h2>
+
+<p>A quick look at the new patterns and styles you can use to build beautiful Android apps…
+
+<h2 id="kitkat">Android 4.4 KitKat</h2>
+
+<img src="{@docRoot}design/media/branding_googlemusic.png" style="float:right;width:260px;padding-left:3em;margin-left: 28px;margin-right:15%;">
+
+<h3>
+ Your branding
+</h3>
+
+
+<p>
+ Consistency has its place in Android, but you also have the flexibility to
+ customize the look of your app to reinforce your brand.
+</p>
+
+<p>
+ Use your brand color for accent by overriding the Android framework's default
+ blue in UI elements like checkboxes, progress bars, radio buttons, sliders,
+ tabs, and scroll indicators.
+</p>
+
+<p>
+ Show your app's launcher icon and name in the action bar so that users can
+ see it in every screen of your app.
+</p>
+<p>
+ <a href="{@docRoot}design/style/branding.html">Your Branding</a> highlights
+ these and other pointers on how to incorporate elements of your brand into your
+ app's visual language — highly encouraged!
+</p>
+
+<h3>
+ Touch feedback
+</h3>
+
+<p>
+ Before Android KitKat, Android's default touch feedback color was a vibrant
+ blue. Every touch resulted in a jolt of high-contrast color, in a shade that
+ might not have mixed well with your brand's color(s).
+</p>
+
+
+<p>
+ In Android KitKat and beyond, touch feedback is subtle: when something is
+ touched, by default its background color slightly darkens or lightens. This
+ provides two benefits: (1) <a href=
+ "/design/get-started/principles.html#sprinkle-encouragement">sprinkles
+ of encouragement</a> are more pleasant than jolts, and (2) incorporating your
+ branding is much easier because the default touch feedback works with
+ whatever hue you choose. Check the updated <a href=
+ "/design/style/touch-feedback.html">Touch Feedback</a> page for more
+ details.
+</p>
+<img src="{@docRoot}design/media/touch_feedback_reaction_response.png" style="padding-top:1em;">
+
+<h3>
+ Full screen
+</h3>
+
+<p>
+ Android KitKat has improved support for letting your app use the entire
+ screen, with a few different approaches to meet the varying needs of apps and
+ content. The new <a href="{@docRoot}design/patterns/fullscreen.html">Full
+ Screen</a> page will guide you in setting the stage for deep user engagement.
+</p>
+
+<img src="{@docRoot}design/media/fullscreen_landing.png" style="margin:1em auto 2em auto;">
+
+<h3>
+ Gestures
+</h3>
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+<p>
+ The updated <a href="{@docRoot}design/patterns/gestures.html">Gestures</a>
+ page covers new and updated gestures introduced in Android KitKat:
+ <strong>double touch drag</strong> and <strong>double touch</strong>. These
+ gestures are used for changing the viewing size of content.
+</p>
+ </div>
+ <div class="layout-content-col span-7">
+ <img src="{@docRoot}design/media/gesture_doubletouch.png">
+ <img src="{@docRoot}design/media/gesture_doubletouchdrag.png">
+ </div>
+</div>
+
+
+<h2>Android 4.1 Jelly Bean</h2>
<h4>Notifications</h4>
<div class="layout-content-row">
@@ -14,7 +104,10 @@
<li>Notifications can be collapsed and expanded</li>
</ul>
- <p>The base notification layout has not changed, so app notifications designed for versions earlier than Jelly Bean still look and work the same. Check the updated <a href="{@docRoot}design/patterns/notifications.html">Notifications</a> page for more details.</p>
+ <p>The base notification layout has not changed, so app notifications designed for versions
+ earlier than Jelly Bean still look and work the same. Check the updated <a
+ href="{@docRoot}design/patterns/notifications.html">Notifications</a> page for
+ more details.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/new_notifications.png">
@@ -26,14 +119,21 @@
<h4>Resizable Application Widgets</h4>
<div class="layout-content-row">
<div class="layout-content-col span-7">
- <p>Widgets are an essential aspect of home screen customization, allowing "at-a-glance" views of an app's most important data and functionality right from the user's home screen. Android 4.1 introduces improved App Widgets that can <strong>automatically resize and load different content</strong> based upon a number of factors including:</p>
+ <p>Widgets are an essential aspect of home screen customization, allowing
+ "at-a-glance" views of an app's most important data and functionality right from
+ the user's home screen. Android 4.1 introduces improved App Widgets that can
+ <strong>automatically resize and load different content</strong> based upon a
+ number of factors including:</p>
<ul>
<li>Where the user drops them on the home screen</li>
<li>The size to which the user expands them</li>
<li>The amount of room available on the home screen</li>
</ul>
- <p>You can supply separate landscape and portrait layouts for your widgets, which the system inflates as appropriate when the screen orientation changes. The Application Widgets has useful details about widget types, limitations, and design considerations.</p>
+ <p>You can supply separate landscape and portrait layouts for your widgets, which
+ the system inflates as appropriate when the screen orientation changes. The <a
+ href="{@docRoot}design/patterns/widgets.html">Application Widgets</a> page has useful
+ details about widget types, limitations, and design considerations.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/new_widgets.png">
@@ -45,8 +145,12 @@
<h4>Accessibility</h4>
<div class="layout-content-row">
<div class="layout-content-col span-11">
- <p>One of Android's missions is to organize the world's information and make it universally accessible and useful. Our mission applies to all users-including people with disabilities such as visual impairment, color deficiency, hearing loss, and limited dexterity.</p>
- <p>The new <a href="{@docRoot}design/patterns/accessibility.html">Accessibility</a> page provides details on how to design your app to be as accessible as possible by:</p>
+ <p>One of Android's missions is to organize the world's information and
+ make it universally accessible and useful. Our mission applies to all
+ users-including people with disabilities such as visual impairment, color
+ deficiency, hearing loss, and limited dexterity.</p>
+ <p>The new <a href="{@docRoot}design/patterns/accessibility.html">Accessibility</a>
+ page provides details on how to design your app to be as accessible as possible by:</p>
<ul>
<li>Making navigation intuitive</li>
<li>Using recommended touch target sizes</li>
@@ -56,20 +160,28 @@
<li>Trying it out yourself</li>
</ul>
- <p>You can supply separate landscape and portrait layouts for your widgets, which the system inflates as appropriate when the screen orientation changes. The <a href="{@docRoot}design/patterns/widgets.html">Widgets</a> page has useful details about widget types, limitations, and design considerations.</p>
+ <p>You can supply separate landscape and portrait layouts for your
+ widgets, which the system inflates as appropriate when the screen
+ orientation changes. The
+ <a href="{@docRoot}design/patterns/widgets.html">Widgets</a> page has
+ useful details about widget types, limitations, and design considerations.</p>
</div>
<div class="layout-content-col span-2">
<img src="{@docRoot}design/media/new_accessibility.png">
</div>
</div>
-<h2>Ice Cream Sandwich - Android 4.0</h2>
+<h2>Android 4.0 Ice Cream Sandwich</h2>
<h4>Navigation bar</h4>
<div class="layout-content-row">
<div class="layout-content-col span-7">
- <p>Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a
- virtual navigation bar that houses the Back, Home and Recents buttons. Read the <a href="{@docRoot}design/patterns/compatibility.html">Compatibility</a> pattern to learn how the OS adapts to phones with hardware buttons and how pre-Android 3.0 apps that rely on menu keys are supported.</p>
+ <p>Android 4.0 removes the need for traditional hardware keys on
+ phones by replacing them with a virtual navigation bar that houses
+ the Back, Home and Recents buttons. Read the
+ <a href="{@docRoot}design/patterns/compatibility.html">Compatibility</a>
+ pattern to learn how the OS adapts to phones with hardware buttons and
+ how pre-Android 3.0 apps that rely on menu keys are supported.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/whats_new_nav_bar.png">
@@ -81,7 +193,9 @@
<h4>Action bar</h4>
<div class="layout-content-row">
<div class="layout-content-col span-7">
- <p>The action bar is the most important structural element of an Android app. It provides consistent navigation across the platform and allows your app to surface actions.</p>
+ <p>The action bar is the most important structural element of an Android
+ app. It provides consistent navigation across the platform and allows your
+ app to surface actions.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/whats_new_action_bar.png">
@@ -93,7 +207,10 @@
<h4>Multi-pane layouts</h4>
<div class="layout-content-row">
<div class="layout-content-col span-7">
- <p>Creating apps that scale well across different form factors and screen sizes is important in the Android world. Multi-pane layouts allow you to combine different activities that show separately on smaller devices into richer compound views for tablets.</p>
+ <p>Creating apps that scale well across different form factors and screen
+ sizes is important in the Android world. Multi-pane layouts allow you to
+ combine different activities that show separately on smaller devices into
+ richer compound views for tablets.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/whats_new_multipanel.png">
@@ -106,7 +223,9 @@
<div class="layout-content-row">
<div class="layout-content-col span-7">
- <p>The long press gesture which was traditionally used to show contextual actions for objects is now used for data selection. When selecting data, contextual action bars allow you to surface actions.</p>
+ <p>The long press gesture which was traditionally used to show contextual
+ actions for objects is now used for data selection. When selecting data,
+ contextual action bars allow you to surface actions.</p>
</div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/whats_new_multiselect.png">
diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd
index 018b7b9..80f1b0e 100644
--- a/docs/html/design/patterns/notifications.jd
+++ b/docs/html/design/patterns/notifications.jd
@@ -233,28 +233,15 @@
<div class="layout-content-row">
<div class="layout-content-col span-6">
-<p>On tablets, the notification area is integrated with the system bar at the bottom of the screen. The notification drawer is opened by touching anywhere inside the notification area.</p>
+<p><h4>Ongoing notifications</h4>
+<p>Ongoing notifications keep users informed about an ongoing process in the background. For example, music players announce the currently playing track in the notification system and continue to do so until the user stops the playback. They can also be used to show the user feedback for longer tasks like downloading a file, or encoding a video. Ongoing notifications cannot be manually removed from the notification drawer.</p></p>
</div>
<div class="layout-content-col span-6">
- <img src="{@docRoot}design/media/notifications_pattern_tablet.png">
-
- </div>
-</div>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-6">
-
<img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png">
</div>
- <div class="layout-content-col span-6">
-
-<h4>Ongoing notifications</h4>
-<p>Ongoing notifications keep users informed about an ongoing process in the background. For example, music players announce the currently playing track in the notification system and continue to do so until the user stops the playback. They can also be used to show the user feedback for longer tasks like downloading a file, or encoding a video. Ongoing notifications cannot be manually removed from the notification drawer.</p>
-
- </div>
</div>
<div class="layout-content-row">
diff --git a/docs/html/design/patterns/pure-android.jd b/docs/html/design/patterns/pure-android.jd
index 77813c0..a0f672e 100644
--- a/docs/html/design/patterns/pure-android.jd
+++ b/docs/html/design/patterns/pure-android.jd
@@ -32,7 +32,7 @@
<img src="{@docRoot}design/media/migrating_ui_elements.png">
<div class="figure-caption">
- Sampling of UI elements from Android, iOS and Windows Phone 7.
+ Sampling of UI elements from Android, iOS, and Windows Phone.
</div>
</div>
@@ -56,7 +56,7 @@
<img src="{@docRoot}design/media/migrating_icons.png">
<div class="figure-caption">
- Sampling of icons from Android, iOS and Windows Phone 7.
+ Sampling of icons from Android, iOS, and Windows Phone.
</div>
</div>
diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd
index 630a4b9..4c9fb88 100644
--- a/docs/html/design/patterns/swipe-views.jd
+++ b/docs/html/design/patterns/swipe-views.jd
@@ -32,12 +32,12 @@
<img src="{@docRoot}design/media/swipe_views2.png">
<div class="figure-caption">
- Navigating between consecutive Email messages using the swipe gesture. If a view contains content that exceeds the width of the screen such as a wide Email message, make sure the user's initial swipes will scroll horizontally within the view. Once the end of the content is reached, an additional swipe should navigate to the next view. In addition, support the use of edge swipes to immediately navigate between views when content scrolls horizontally.
+ Navigating between consecutive email messages using the swipe gesture. If a view contains content that exceeds the width of the screen such as a wide email message, make sure the user's initial swipes will scroll horizontally within the view. Once the end of the content is reached, an additional swipe should navigate to the next view. In addition, support the use of edge swipes to immediately navigate between views when content scrolls horizontally.
</div>
<img src="{@docRoot}design/media/swipe_views3.png">
<div class="figure-caption">
- Scrolling within a wide Email message using the swipe gesture before navigating to the next message.
+ Scrolling within a wide email message using the swipe gesture before navigating to the next message.
</div>
<h2 id="between-tabs">Swiping Between Tabs</h2>
@@ -45,7 +45,7 @@
<div class="layout-content-row">
<div class="layout-content-col span-5">
- <div class="framed-galaxynexus-port-span-5">
+ <div class="framed-nexus5-port-span-5">
<video class="play-on-hover" autoplay>
<source src="{@docRoot}design/media/swipe_tabs.mp4" type="video/mp4">
<source src="{@docRoot}design/media/swipe_tabs.webm" type="video/webm">
diff --git a/docs/html/design/style/branding.jd b/docs/html/design/style/branding.jd
new file mode 100644
index 0000000..9ef934d
--- /dev/null
+++ b/docs/html/design/style/branding.jd
@@ -0,0 +1,112 @@
+page.title=Your Branding
+page.tags="branding","logo"
+@jd:body
+
+<p>Following Android design patterns doesn't mean that your app has to look the same as
+everyone else's. In Android, your app can shine as an extension of your brand. </p>
+
+<h2 id="color">Color</h2>
+
+<p>Use your brand color for accent by overriding the Android framework's default blue in UI elements like checkboxes, progress bars, radio buttons, sliders, tabs, and scroll indicators.</p>
+
+<p>Look for opportunities to use high-contrast color for emphasis, for example, as the background color of the action bar or a primary button. But don't go overboard: not all actions are equal, so use it only for the one or two most important things.</p>
+<p>When customizing colors, <a href="{@docRoot}design/style/touch-feedback.html">touch feedback</a>
+ should be subtle — just slightly lighter or darker than the untouched color.</p>
+
+<div class="vspace size-1"> </div>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+ <img src="{@docRoot}design/media/branding_wallet.png" style="width:94%">
+ <div class="figure-caption">
+ The four colors of the Google Wallet logo provide a playful accent to the four dots
+ that appear as the user enters a PIN.
+ </div>
+ </div>
+ <div class="layout-content-col span-6">
+ <img src="{@docRoot}design/media/branding_googlemusic.png" style="width:94%">
+ <div class="figure-caption">
+ The Google Play Music app has an orange theme color, which is used for emphasis
+ in the action bar and for accent in the selected tab, scroll indicator, and
+ hyperlinks.
+ </div>
+ </div>
+</div>
+
+<h2 id="logo">Logo</h2>
+
+<p>Your app's <a href="{@docRoot}design/style/iconography.html#launcher">launcher icon</a> is
+ a key place to incorporate your logo, because it's what
+ users will look for and touch to begin using your app. You can carry the launcher
+ icon through to all the screens in your app by showing it in the
+ <a href="{@docRoot}design/patterns/actionbar.html">action bar</a> along
+ with the name of the app.</p>
+
+<p>Another approach to consider is to have your logo take the place of the launcher icon
+and app name in the action bar.</p>
+
+
+<div class="vspace size-1"> </div>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+ <img src="{@docRoot}design/media/yourbranding_icon.png" style="width:60px;float:left;padding-right:1em;">
+ <div class="figure-caption" style="widdth:220px;margin-left:20px;">
+ The HowzAbout app uses a launcher icon that is a shortened version of its full logo.
+ </div>
+
+ </div>
+ <div class="layout-content-col span-6">
+ <img src="{@docRoot}design/media/yourbranding_app.png" style="width:94%">
+ <div class="figure-caption">
+ Example of a the logo in the action bar. This works well in cases where the brand's logo matches the name of the app.
+ </div>
+ </div>
+</div>
+
+<h2 id="logo">Icons</h2>
+
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+ <p>If you have icons that you're already using for your app on other platforms
+ and they have a distinctive look intended to fit your brand, use them on your
+ Android app as well. <strong>If you take this approach, make sure your brand styling is
+ applied to every single icon in your app</strong>.</p>
+
+ </div>
+
+ <div class="layout-content-col span-6">
+ <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;"">
+ </div>
+ </div>
+</div>
+ <p>One exception: For any icon in your existing set where the symbol is different from
+ Android's, use Android's symbol but give it your brand's styling. That way, users will
+ understand what the purpose of the icon is based on what they've learned in other
+ Android apps (Design principle:
+ <a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that
+ work everywhere</a>). But the icon will still look like it belongs with all of
+ your other icons as a part of your brand.</p>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+ <p><strong>Example</strong>:<br />
+ </p>
+ <p>The brand's normal icon for sharing on other platforms is a right arrow.
+ </div>
+
+ <div class="layout-content-col span-6 lasyout-with-list-item-margins">
+
+ <div style="margin-bottom:1em;">
+ <span class="do-dont-label bad" style="margin-left:12px">Don't</span>
+ <span style="margin-left: 44px;" class="do-dont-label good"><strong>Do</strong></span>
+ </div>
+ <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:200px;">
+ </div>
+</div>
+
+<p>What if you don't already have your own icons — for example, if you're creating a
+brand new app only for Android? In this case, use Android's standard icons and rely
+more on color and logo for branding. Get the Action Bar Icon Pack, available for free
+in <a href="{@docRoot}design/downloads/index.html">Downloads</a>.</p>
diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd
index 0ce2faf..b0a3439 100644
--- a/docs/html/design/style/iconography.jd
+++ b/docs/html/design/style/iconography.jd
@@ -23,9 +23,9 @@
<img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" />
-<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6 scaling
-ratio</strong> between the four primary densities (medium, high, x-high, and xx-high,
-respectively). For example, consider that the size for a launcher icon is specified to be
+<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6:8
+scaling ratio</strong> between the five primary densities (medium, high, x-high, xx-high, and
+xxx-high respectively). For example, consider that the size for a launcher icon is specified to be
48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the
high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high
density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.</p>
diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd
index 0a99a2f..c375631 100644
--- a/docs/html/design/style/metrics-grids.jd
+++ b/docs/html/design/style/metrics-grids.jd
@@ -12,8 +12,9 @@
<li>The density buckets are <acronym
title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160
dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, <acronym title
-="Extra-high density (320 dpi)">XHDPI</acronym>, and <acronym title
-="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>.</li>
+="Extra-high density (320 dpi)">XHDPI</acronym>, <acronym title
+="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>, and <acronym title
+="Extra-extra-extra!-high density (640 dpi)">XXXHDPI</acronym>.</li>
</ul>
<p>Optimize your application's UI by designing
diff --git a/docs/html/design/style/themes.jd b/docs/html/design/style/themes.jd
index e1899e3..2dc8ead 100644
--- a/docs/html/design/style/themes.jd
+++ b/docs/html/design/style/themes.jd
@@ -14,22 +14,16 @@
Settings in Holo Dark.
</div>
- <img src="{@docRoot}design/media/themes_holo_inverse.png">
- <div class="figure-caption">
- Talk in Holo Light with dark action bar.
- </div>
-
</div>
<div class="layout-content-col span-7">
-<p>Themes are Android's mechanism for applying a consistent style to an app or activity. The style
-specifies the visual properties of the elements that make up your user interface, such as color,
-height, padding and font size. To promote greater cohesion between all apps on the platform, Android
-provides three system themes that you can choose from when building apps for Ice Cream Sandwich:</p>
+<p>Themes are Android's mechanism for applying a consistent style to an app or activity.
+The style specifies the visual properties of the elements that make up your user interface,
+such as color, height, padding and font size. To promote greater cohesion between all apps
+on the platform, Android provides two system themes that you can choose from when building apps:</p>
<ul>
<li>Holo Light</li>
<li>Holo Dark</li>
-<li>Holo Light with dark action bars</li>
</ul>
<p>Applying these themes will go a long way in helping you to build apps that fit right into the
general visual language of Android.</p>
diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd
index 340a3a4..a5bf7b3 100644
--- a/docs/html/design/style/touch-feedback.jd
+++ b/docs/html/design/style/touch-feedback.jd
@@ -2,15 +2,43 @@
page.tags="input","button"
@jd:body
-<div class="layout-content-row" style="margin-bottom: -100px">
+ <div class="layout-content-row" style="margin-bottom: -100px">
<div class="layout-content-col span-7">
-<p>Use color and illumination to respond to touches, reinforce the resulting behaviors of gestures, and
-indicate what actions are enabled and disabled.</p>
-<p>Whenever a user touches an actionable area in your app, provide a visual response. This lets the
-user know which object was touched and that your app is "listening".</p>
+<p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors
+of gestures, and indicate what actions are enabled and disabled.</p>
+<p>Whenever a user touches an actionable area in your app, provide a subtle visual response.
+This lets the user know which object was touched and that your app is "listening".</p>
+
+<p><strong>Be responsive to touches in a gentle way</strong>. Whenever a user touches an
+actionable area in your app, let them know the app is "listening" by providing a visual
+response. Make it subtle —just slightly lighter or darker than the untouched color. This
+provides two benefits:</p>
+
+<ul>
+<li><a href="{@docRoot}design/get-started/principles.html#sprinkle-encouragement">Sprinkles
+of encouragement</a> are more pleasant than jolts.</li>
+<li>Incorporating <a href="{@docRoot}design/style/branding.html">your branding</a> is much
+easier because the default touch feedback works with whatever hue you choose.</li>
+</ul>
</div>
+
+ <div class="layout-content-col span-6" style="float:right;">
+
+ <!-- <div class="framed-nexus5-port-span-5">
+ <video class="play-on-hover" autoplay>
+ <source src="{@docRoot}design/media/calendar.mp4" type="video/mp4">
+ <source src="{@docRoot}design/media/calendar.webm" type="video/webm">
+ <source src="{@docRoot}design/media/calendar.ogv" type="video/ogg">
+ </video>
+ </div>
+ <div class="figure-caption" style="margin-top:0">
+ <div class="video-instructions"> </div>
+ </div>
+ </div> -->
+
+
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/touch_feedback_reaction_response.png">
@@ -18,51 +46,54 @@
</div>
</div>
-<h4>States</h4>
+<h4 style="clear:both;">States</h4>
+
<div class="vspace size-1"> </div>
<img src="{@docRoot}design/media/touch_feedback_states.png">
<div class="figure-caption">
- Most of Android's UI elements have touch-feedback built in, including states that indicate
- whether touching the element will have any effect.
+ Most of Android's UI elements have touch feedback built in, including
+ states that indicate whether touching the element will have any effect.
</div>
-<div class="vspace size-4"> </div>
+<div class="vspace size-3"> </div>
<div class="layout-content-row">
- <div class="layout-content-col span-4">
+ <div class="layout-content-col span-6">
-<h4>Communication</h4>
-<p>When your objects react to more complex gestures, help users understand what the outcome of the
-operation will be. For example, in Recents, when you start swiping a thumbnail left or right, it
-starts to dim. This helps the user understand that swiping will cause the item to be removed.</p>
+ <h4>Communication</h4>
+<p>When your objects react to more complex gestures, help users
+understand what the outcome will be.</p>
+<p>In Recents, when a user starts swiping a thumbnail left or right, it
+begins to dim. This helps the user understand that swiping will cause the
+item to be removed.</p>
</div>
- <div class="layout-content-col span-9">
+ <div class="layout-content-col span-7">
<img src="{@docRoot}design/media/touch_feedback_manipulation.png">
</div>
</div>
+<div class="vspace size-3"> </div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/touch_feedback_communication.png">
+ <p><em>If a user attempts to scroll past the last home screen panel, the screen
+ content tilts to the right to indicate that further navigation in this direction
+ isn’t possible.</em></p>
</div>
<div class="layout-content-col span-6">
-<div class="vspace size-3"> </div>
-
<h4>Boundaries</h4>
-<p>When users try to scroll past the upper or lower limit of a scrollable area, communicate the
-boundary with a visual cue. For example, if a user attempts to scroll past the first home screen
-panel, the screen content tilts to the right to indicate that further navigation in this direction
-is not possible. Many of Android's scrollable UI widgets (e.g. lists or grid lists) already have
-support for boundary feedback built in. If you are building custom, keep boundary feedback in mind
-and provide it from within your app.</p>
-
- </div>
-</div>
+<p>
+ When users try to scroll past the beginning or end of a scrollable area,
+ communicate the boundary with a visual cue. Many of Android's scrollable UI
+ widgets, like lists and grid lists, have support for boundary feedback built
+ in. If you’re building custom widgets, keep boundary feedback in mind and
+ provide it from within your app.
+</p>
\ No newline at end of file
diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd
index 818af4c..3c201f7 100644
--- a/docs/html/design/style/typography.jd
+++ b/docs/html/design/style/typography.jd
@@ -12,7 +12,7 @@
<p>
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto ZIP']);"
- href="{@docRoot}downloads/design/roboto-1.100141.zip">Download Roboto</a>
+ href="{@docRoot}downloads/design/roboto-1.2.zip">Download Roboto</a>
</p>
<p>The Android design language relies on traditional typographic tools such as scale, space, rhythm,
@@ -30,7 +30,7 @@
<img src="{@docRoot}design/media/typography_variants@2x.png" width="220">
<p><a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specimen Booke (@typography page)']);"
- href="{@docRoot}downloads/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a></p>
+ href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a></p>
</div>
</div>
diff --git a/docs/html/design/style/writing.jd b/docs/html/design/style/writing.jd
index 5358847..cda17eb 100644
--- a/docs/html/design/style/writing.jd
+++ b/docs/html/design/style/writing.jd
@@ -2,46 +2,24 @@
page.tags="dialog","toast","notification"
@jd:body
-<p>When choosing words for your app:</p>
-<ol>
-<li>
-<p><strong>Keep it brief.</strong> Be concise, simple and precise. Start with a 30 character limit (including
- spaces), and don't use more unless absolutely necessary.</p>
-</li>
-<li>
-<p><strong>Keep it simple.</strong> Pretend you're speaking to someone who's smart and competent, but doesn't
- know technical jargon and may not speak English very well. Use short words, active verbs, and
- common nouns.</p>
-</li>
-<li>
-<p><strong>Be friendly.</strong> Use contractions. Talk directly to the reader using second person ("you"). If
- your text doesn't read the way you'd say it in casual conversation, it's probably not the way
- you should write it. Don't be abrupt or annoying and make the user feel safe, happy and
- energized.</p>
-</li>
-<li>
-<p><strong>Put the most important thing first.</strong> The first two words (around 11 characters, including
- spaces) should include at least a taste of the most important information in the string. If they
- don't, start over.</p>
-</li>
-<li>
-<p><strong>Describe only what's necessary, and no more.</strong> Don't try to explain subtle differences. They
- will be lost on most users.</p>
-</li>
-<li>
-<p><strong>Avoid repetition.</strong> If a significant term gets repeated within a screen or block of text, find
- a way to use it just once.</p>
-</li>
-</ol>
+<h2 id="voa">Android's Voice</h2>
-<h2 id="examples">Examples</h2>
+<p>When writing text that appears in your app, keep it concise, simple, and friendly.</p>
-<ol><li class="value-1"><strong>Keep it brief.</strong> From the setup wizard:</ol>
+<h4 id="concise">Concise</h4>
+
+<ul>
+ <li>Describe only what the user needs to know.</li>
+ <li>Eliminate redundancy, such as titles that restate the body of an information box.</li>
+ <li>Keep text as short as possible.</li>
+</ul>
+
+<p><em>Avoid wordy, stilted text</em></p>
<div class="layout-content-row">
<div class="layout-content-col span-6 layout-with-list-item-margins">
- <div class="do-dont-label bad">Too formal</div>
+ <div class="do-dont-label bad">Don't</div>
<table class="ui-table good"><tbody><tr><td>
Consult the documentation that came with your phone for further instructions.
@@ -50,7 +28,7 @@
</div>
<div class="layout-content-col span-6">
- <div class="do-dont-label good">Better</div>
+ <div class="do-dont-label good">Do</div>
<table class="ui-table good"><tbody><tr><td>
Read the instructions that came with your phone.
@@ -59,174 +37,7 @@
</div>
</div>
-<div class="vspace size-1"> </div>
-
-<ol><li class="value-2"><strong>Keep it simple.</strong> From the Location settings screen:</ol>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-6 layout-with-list-item-margins">
-
- <div class="do-dont-label bad">Confusing</div>
-
- <table class="ui-table bad">
- <thead>
- <tr>
- <th>
- Use GPS satellites
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- When locating, accurate to street level.
- </td>
- </tr>
- </tbody>
- </table>
-
- </div>
- <div class="layout-content-col span-6">
-
- <div class="do-dont-label good">Better</div>
-
- <table class="ui-table good">
- <thead>
- <tr>
- <th>
- GPS
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- Let apps use satellites to pinpoint your location.
- </td>
- </tr>
- </tbody>
- </table>
-
- </div>
-</div>
-
-<div class="vspace size-1"> </div>
-
-<ol><li class="value-3"><strong>Be friendly.</strong> Dialog that appears when an application
-crashes:</ol>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-6 layout-with-list-item-margins">
-
- <div class="do-dont-label bad">Confusing and annoying—"Sorry" just rubs salt in the
- wound.</div>
-
- <table class="ui-table bad">
- <thead>
- <tr>
- <th colspan="3">
- Sorry!
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td colspan="3">
- Activity MyAppActivity (in application MyApp)
- is not responding.
- </td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td width="33%">Force close</td>
- <td width="33%">Wait</td>
- <td width="33%">Report</td>
- </tr>
- </tbody>
- </table>
-
- </div>
- <div class="layout-content-col span-6">
-
- <div class="do-dont-label good">Shorter, more direct, no faux-apologetic title:<br><br></div>
-
- <table class="ui-table good">
- <thead>
- <tr>
- <th colspan="3">
- MyApp isn't responding.
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td colspan="3">
- Do you want to close it?
- </td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td width="33%">Wait</td>
- <td width="33%">Report</td>
- <td width="33%">Close</td>
- </tr>
- </tbody>
- </table>
-
- </div>
-</div>
-
-<div class="vspace size-1"> </div>
-
-<ol><li class="value-4"><strong>Put the most important thing first.</strong></ol>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-6 layout-with-list-item-margins">
-
- <div class="do-dont-label bad">Top news last</div>
-
- <table class="ui-table bad"><tbody><tr><td>
- 77 other people +1'd this, including Larry Page.
- </td></tr></tbody></table>
-
- </div>
- <div class="layout-content-col span-6">
-
- <div class="do-dont-label good">Top news first</div>
-
- <table class="ui-table good"><tbody><tr><td>
- Larry Page and 77 others +1'd this.
- </td></tr></tbody></table>
-
- </div>
-</div>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-6 layout-with-list-item-margins">
-
- <div class="do-dont-label bad">Task last</div>
-
- <table class="ui-table bad"><tbody><tr><td>
- Touch Next to complete setup using a Wi-Fi connection.
- </td></tr></tbody></table>
-
- </div>
- <div class="layout-content-col span-6">
-
- <div class="do-dont-label good">Task first</div>
-
- <table class="ui-table good"><tbody><tr><td>
- To finish setup using Wi-Fi, touch Next.
- </td></tr></tbody></table>
-
- </div>
-</div>
-
-<div class="vspace size-1"> </div>
-
-<ol><li class="value-5"><strong>Describe only what's necessary, and no more.</strong></ol>
+<p><em>Don't provide unnecessary information</em></p>
<div class="layout-content-row">
<div class="layout-content-col span-6 layout-with-list-item-margins">
@@ -277,3 +88,235 @@
</div>
</div>
+
+<h4 id="simple">Simple</h4>
+
+<ul>
+ <li>Use short words, active verbs, and common nouns.</li>
+ <li>Put the most important thing first. “Front-load” the first 11 characters
+ with the most salient information in the string.</li>
+ <li>Don’t try to explain subtle differences. They are lost on most users.</li>
+</ul>
+
+<p><em>Focus on the user's concern, not technical details</em></p>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6 layout-with-list-item-margins">
+
+ <div class="do-dont-label bad">Don't</div>
+
+ <table class="ui-table good"><tbody><tr><td>
+ Manually control GPS to prevent other apps from using it
+ </td></tr></tbody></table>
+
+ </div>
+ <div class="layout-content-col span-6">
+
+ <div class="do-dont-label good">Do</div>
+
+ <table class="ui-table good"><tbody><tr><td>
+ To save power, switch Location mode to Battery saving
+ </td></tr></tbody></table>
+
+ </div>
+</div>
+
+<p><em>Put top news first</em></p>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6 layout-with-list-item-margins">
+
+ <div class="do-dont-label bad">Don't</div>
+
+ <table class="ui-table good"><tbody><tr><td>
+ 77 other people +1’d this, including Larry Page
+ </td></tr></tbody></table>
+
+ </div>
+ <div class="layout-content-col span-6">
+
+ <div class="do-dont-label good">Do</div>
+
+ <table class="ui-table good"><tbody><tr><td>
+ Larry Page and 76 others +1’d this
+ </td></tr></tbody></table>
+
+ </div>
+</div>
+
+<p><em>Put the user's goal first</em></p>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6 layout-with-list-item-margins">
+
+ <div class="do-dont-label bad">Don't</div>
+
+ <table class="ui-table good"><tbody><tr><td>
+ Touch Next to complete setup using a Wi-Fi connection
+ </td></tr></tbody></table>
+
+ </div>
+ <div class="layout-content-col span-6">
+
+ <div class="do-dont-label good">Do</div>
+
+ <table class="ui-table good"><tbody><tr><td>
+ To finish setup using Wi-Fi, touch Next
+ </td></tr></tbody></table>
+
+ </div>
+</div>
+
+
+<h4 id="friendly">Friendly</h4>
+
+<ul>
+ <li>Use contractions.</li>
+ <li>Talk directly to the reader. Use “you” to refer to the reader.</li>
+ <li>Keep your tone casual and conversational, but avoid slang.</li>
+</li>
+</ul>
+
+<p><em>Avoid being confusing or annoying</em></p>
+<div class="layout-content-row">
+ <div class="layout-content-col span-6 layout-with-list-item-margins">
+ <div class="do-dont-label bad">Don't</div>
+ <table class="ui-table bad">
+ <thead>
+ <tr>
+ <th>
+ Sorry!
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ Activity MyAppActivity (in application<br />
+ MyApp) is not responding
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ </div>
+ <div class="layout-content-col span-6">
+ <div class="do-dont-label good">Do</div>
+ <table class="ui-table good">
+ <thead>
+ <tr>
+ <th>
+ MyApp isn’t responding
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ Do you want to close it?
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
+
+<h4>Words to avoid</h4>
+
+<div style="padding:5px 2.1em;">
+<table>
+ <tr>
+ <td class="do-dont-label bad" style="width:40%">Don't use</td>
+ <td class="do-dont-label good" style="width:40%">Use</td>
+ </tr>
+ <tr>
+ <td>one, two, three, four, ...</td>
+ <td>1, 2, 3, 4, ...</td>
+ </tr>
+ <tr>
+ <td>application</td>
+ <td>app</td>
+ </tr>
+ <tr>
+ <td>cannot, could not, do not, did not
+will not, you will</td>
+ <td><em>Contractions:</em> can’t, couldn’t, don’t, didn’t won’t, you’ll, and so on</td>
+ </tr>
+ <tr>
+ <td>okay, ok</td>
+ <td>OK</td>
+ </tr>
+ <tr>
+ <td>please, sorry, thank you</td>
+ <td><em>Attempts at politeness can annoy the user, especially in messages that say
+ something has gone wrong.<br />
+ Exception: In Japanese, “please” is mandatory and imperative verbs should
+ be localized accordingly (turn on -> please turn on).
+ </em></td>
+ </tr>
+ <tr>
+ <td>there is, there are, it is<br />
+ <em>and other “disappeared” subjects (grammatical expletives)</em></td>
+ <td><em>Use a noun as the subject</em></td>
+ </tr>
+ <tr>
+ <td>abort, kill, terminate</td>
+ <td>stop, cancel, end, exit</td>
+ </tr>
+ <tr>
+ <td>fail, failed, <em>negative language</em></td>
+ <td><em>In general, use positive phrasing<br />
+ (for example, “do” rather than “don’t,” except in cases such as “Don’t show
+ again,” “Can’t connect,” and so on.)</em></td>
+ </tr>
+ <tr>
+ <td>me, I, my, mine</td>
+ <td>you, your, yours</td>
+ </tr>
+ <tr>
+ <td>Are you sure? Warning!</td>
+ <td><em>Tell user the consequence instead, for example, “You’ll lose all photos
+ and media”</em></td>
+ </tr>
+</table>
+
+</div>
+
+<h2 id="formatting_text">Formatting text</h2>
+
+<h4 id="capitalization">Capitalization</h4>
+
+<ul>
+ <li>Use sentence-style capitalization for all UI strings: “Words to live by.”</li>
+ <li>Capitalize all important words in:
+ <ul>
+ <li>App names (Calendar, Google Drive)</li>
+ <li>Named features (Android Beam, Face Unlock)</li>
+ <li>Proper nouns (Statue of Liberty, San Francisco Giants)</li>
+ </ul>
+ </li>
+ <li>Be conservative. Don't capitalize words that aren't part of a formal feature name:
+ <ul>
+ <li>Sim card lock, Home screen, not Sim Card Lock, Home Screen.</li>
+ </ul>
+ </li>
+</ul>
+
+
+<h4 id="punctuation">Punctuation</h4>
+<ul>
+ <li><strong>Period.</strong> Don't use a period after a single sentence or
+ phrase used in isolation, such as in a toast, label, or notification. Wherever two or
+ more sentences run together, use a period for each sentence. </li>
+ <li><strong>Ellipsis.</strong> Use the ellipsis character (…) (Option-; on MacOS and &hellip;
+ in HTML) to indicate
+ <ul>
+ <li>Incompleteness, such as an action in progress (“Downloading...”) or truncated text.</li>
+ <li>That a menu item (such as Print… or Share…) leads to further UI involving significant
+ choices. Exception: Commands whose wording already implies further (but limited) UI, such
+ as <strong>Find in page</strong> or <strong>Pick a date</strong>, do not require an
+ ellipsis. </li>
+ </ul>
+ </li>
+</ul>
\ No newline at end of file
diff --git a/docs/html/design/videos/index.jd b/docs/html/design/videos/index.jd
index 91a784a..976767d 100644
--- a/docs/html/design/videos/index.jd
+++ b/docs/html/design/videos/index.jd
@@ -46,7 +46,7 @@
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326483138">Agile UX Research Practice in Android</a></h3>
- <p>In the Android UX team, it is critical to get user feedback frequently and consistently so that we are able to iterate and develop the best-in-class designs for our users. We will discuss how the team applied ""Pulse Studies"" (iterative research sessions) in order to put new ideas, designs, and concepts in front of users on a regular basis; it requires minimal advance planning, it can have an immediate product impact, and it can meet urgent needs. </p>
+ <p>In the Android UX team, it is critical to get user feedback frequently and consistently so that we are able to iterate and develop the best-in-class designs for our users. We will discuss how the team applied "Pulse Studies" (iterative research sessions) in order to put new ideas, designs, and concepts in front of users on a regular basis; it requires minimal advance planning, it can have an immediate product impact, and it can meet urgent needs. </p>
</div>
<div class="layout-content-col span-6">
<iframe width="355" height="200" src="//www.youtube.com/embed/6MOeVNbh9cY" frameborder="0" allowfullscreen=""></iframe>
