new confirming page and updates to progress and iconography

Change-Id: I060ac3c34cf268d77b46ac235a2726202a4bb222

23 files changed, 248 insertions, 105 deletions

diff --git a/docs/html/design/building-blocks/progress.jd b/docs/html/design/building-blocks/progress.jd
index 03fc09c..7342387 100644
--- a/docs/html/design/building-blocks/progress.jd
+++ b/docs/html/design/building-blocks/progress.jd
@@ -1,19 +1,14 @@
-page.title=Progress and Activity
+page.title=Progress & Activity
 @jd:body
 
-<p>When an operation of interest to the user is taking place over a relatively long period of time,
-provide visual feedback that it's still happening and in the process of being completed.</p>
-<h2 id="progress">Progress</h2>
+<p>Progress bars and activity indicators signal to users that something is happening that will take a moment.</p>
+<h2 id="progress">Progress bars</h2>
 
-<p>If you know the percentage of the operation that has been completed, use a determinate progress bar
-to give the user a sense of how much longer it will take.</p>
+<p>Progress bars are for situations where the percentage completed can be determined. They give users a quick sense of how much longer an operation will take.</p>
 
 <img src="{@docRoot}design/media/progress_download.png">
 
-<p>The progress bar should always travel from 0% to 100% completion. Avoid setting the bar to a lower
-value than a previous value, or using the same progress bar to represent the progress of multiple
-events, since doing so makes the display meaningless. If you're not sure how long a particular
-operation will take, use an indeterminate progress indicator.</p>
+<p>A progress bar should always fill from 0% to 100% and never move backwards to a lower value. If multiple operations are happening in sequence, use the progress bar to represent the delay as a whole, so that when the bar reaches 100%, it doesn't return back to 0%.</p>
 
 <div class="vspace size-2">&nbsp;</div>
 
@@ -22,12 +17,11 @@ operation will take, use an indeterminate progress indicator.</p>
   Progress bar in Holo Dark and Holo Light.
 </div>
 
-<h2 id="activity">Activity</h2>
+<h2 id="activity">Activity indicators</h2>
 
-<p>If you don't know how much longer an operation will continue, use an indeterminate progress
-indicator. There are two styles available: a flat bar and a circle. Use the one that best fits the
-available space.</p>
+<p>Activity indicators are for operations of an indeterminate length. They ask users to wait a moment while something finishes up, without getting into specifics about what's happening behind the scenes.</p>
 
+<p>Two styles are available: a bar and a circle. Each is offered in a variety of sizes, in both Holo Light and Holo Dark themes. Choose the appropriate style and size for the surrounding context. For example, the largest activity circle works well when displayed in a blank content area, but not in a smaller dialog box. Each operation should only be represented by one activity indicator.</p>
 
 <div class="layout-content-row">
   <div class="layout-content-col span-6">
@@ -38,14 +32,8 @@ available space.</p>
   <div class="layout-content-col span-7 with-callouts">
 
     <ol>
-      <li class="value-1"><h4>Activity bar (shown with the Holo Dark theme)</h4>
-        <p>
-
-An indeterminate activity bar is used at the start of an application download because the Play Store
-app hasn't been able to contact the server yet, and it's not possible to determine how long it will
-take for the download to begin.
-
-        </p>
+      <li class="value-1"><h4>Activity bar</h4>
+        <p>In this example, an activity bar (in Holo Dark) appears when a user first requests a download. There's an unknown period of time when the download has not yet started. As soon as the download starts, this activity bar transforms into a progress bar.</p>
       </li>
     </ol>
 
@@ -61,12 +49,19 @@ take for the download to begin.
   <div class="layout-content-col span-7 with-callouts">
 
     <ol>
-      <li class="value-2"><h4>Activity circle (shown with the Holo Light theme)</h4>
+      <li class="value-2"><h4>Activity circle</h4>
+        <p>In this example, an activity circle (in Holo Light) is used in the Gmail application when a message is being loaded because it's not possible to determine how long it will take to download the email.</p>
+        <p>When displaying an activity circle, do not include text to communicate what the app is doing. The moving circle alone provides sufficient feedback about the delay, and does so in an understated way that minimizes the impact.</p>
         <p>
-
-An indeterminate activity circle is used in the Gmail application when a message is being
-loaded because it's not possible to determine how long it will take to download the email.
-
+        <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>
         </p>
       </li>
     </ol>
@@ -74,6 +69,34 @@ loaded because it's not possible to determine how long it will take to download
   </div>
 </div>
 
-<p>You should only use one activity indicator on screen per activity, and it should appropriately sized
-for the surrounding context. For example, the largest activity circle works well when displayed in a
-blank content area, but not in a smaller dialog box.</p>
+<h2 id="custom-indicators">Custom indicators</h2>
+<p>The standard progress bar and activity indicators work well for most situations and should be used whenever possible to provide a consistent experience across Android. However, some situations may call for something more custom.</p>
+
+<p>Here's an example:<br>
+In all of the Google Play apps (Music, Books, Movies, Magazines), we wanted the current download state of each item to be visible at all times at the top-level screen. These states are:
+  <ul>
+    <li>Not downloaded</li>
+    <li>Temporarily downloaded (automatically cached by the app)</li>
+    <li>Permanently downloaded on the device at the user's request</li>
+  </ul>
+</p>
+<p>We also needed to indicate progress from one download state to another, because downloading is not instantaneous.</p>
+<p>This presented a challenge, because the Google Play apps use a variety of different layouts, and some of them are highly space-constrained. We didn't want this information to clutter the top-level screens, or compete too much with the cover art.</p>
+<p>So we designed a custom indicator that could show all of the information in a tiny footprint, with the flexibility to appear on top of content if necessary.</p>
+
+<img src="{@docRoot}design/media/progress_activity_custom.png">
+
+<p>The color indicates whether it's downloaded (blue) or not (gray). The appearance of the pin indicates whether the download is permanent (white, upright) or temporary (gray, diagonal). And when state is in the process of changing, progress is indicated by a moving pie chart.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-9">
+    <img src="{@docRoot}design/media/progress_activity_custom_app.png">
+  </div>
+  <div class="layout-content-col span-4">
+    <div class="figure-caption">
+      Across Google Play apps with different layouts, the same custom indicator appears with each item. It communicates download state as well as progress, in a compact package that can be incorporated into any screen design.
+    </div>
+  </div>
+</div>
+
+<p>If you find that the standard indicators aren't meeting your needs (due to space constraints, state complexities), by all means design your own. Make it feel like part of the Android family by injecting some of the visual characteristics of the standard indicators. In this example, we carried over the circular shape, the same shade of blue, and the flat and simple style.</p>
diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs
index 98efa35..72007f5 100644
--- a/docs/html/design/design_toc.cs
+++ b/docs/html/design/design_toc.cs
@@ -26,7 +26,7 @@
   <li class="nav-section">
     <div class="nav-section-header"><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></div>
     <ul>
-      <li><a href="<?cs var:toroot ?>design/patterns/new-4-0.html">New in Android 4.0</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/new.html">New in Android</a></li>
       <li><a href="<?cs var:toroot ?>design/patterns/gestures.html">Gestures</a></li>
       <li><a href="<?cs var:toroot ?>design/patterns/app-structure.html">App Structure</a></li>
       <li><a href="<?cs var:toroot ?>design/patterns/navigation.html">Navigation</a></li>
@@ -40,6 +40,7 @@
       <li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</a></li>
       <li><a href="<?cs var:toroot ?>design/patterns/accessibility.html">Accessibility</a></li>
       <li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li>
+      <li><a href="<?cs var:toroot ?>design/patterns/confirming-acknowledging.html">Confirming &amp; Acknowledging</a></li>
     </ul>
   </li>
 
diff --git a/docs/html/design/media/confirm_ack_acknowledge.png b/docs/html/design/media/confirm_ack_acknowledge.png
new file mode 100644
index 0000000..b78eb14
--- /dev/null
+++ b/docs/html/design/media/confirm_ack_acknowledge.png
diff --git a/docs/html/design/media/confirm_ack_confirming.png b/docs/html/design/media/confirm_ack_confirming.png
new file mode 100644
index 0000000..20a9c02
--- /dev/null
+++ b/docs/html/design/media/confirm_ack_confirming.png
diff --git a/docs/html/design/media/confirm_ack_draft_deleted.png b/docs/html/design/media/confirm_ack_draft_deleted.png
new file mode 100644
index 0000000..f189db9
--- /dev/null
+++ b/docs/html/design/media/confirm_ack_draft_deleted.png
diff --git a/docs/html/design/media/confirm_ack_ex_beam.png b/docs/html/design/media/confirm_ack_ex_beam.png
new file mode 100644
index 0000000..d099912
--- /dev/null
+++ b/docs/html/design/media/confirm_ack_ex_beam.png
diff --git a/docs/html/design/media/confirm_ack_ex_books.png b/docs/html/design/media/confirm_ack_ex_books.png
new file mode 100644
index 0000000..634d7b9
--- /dev/null
+++ b/docs/html/design/media/confirm_ack_ex_books.png
diff --git a/docs/html/design/media/confirm_ack_ex_draftsave.png b/docs/html/design/media/confirm_ack_ex_draftsave.png
new file mode 100644
index 0000000..473368d
--- /dev/null
+++ b/docs/html/design/media/confirm_ack_ex_draftsave.png
diff --git a/docs/html/design/media/confirm_ack_ex_plus1.png b/docs/html/design/media/confirm_ack_ex_plus1.png
new file mode 100644
index 0000000..6de6710
--- /dev/null
+++ b/docs/html/design/media/confirm_ack_ex_plus1.png
diff --git a/docs/html/design/media/confirm_ack_ex_removeapp.png b/docs/html/design/media/confirm_ack_ex_removeapp.png
new file mode 100644
index 0000000..0abacce
--- /dev/null
+++ b/docs/html/design/media/confirm_ack_ex_removeapp.png
diff --git a/docs/html/design/media/confirm_ack_flowchart.png b/docs/html/design/media/confirm_ack_flowchart.png
new file mode 100644
index 0000000..277cb11
--- /dev/null
+++ b/docs/html/design/media/confirm_ack_flowchart.png
diff --git a/docs/html/design/media/iconography_notification_focal.png b/docs/html/design/media/iconography_notification_focal.png
index 20d5e8f..f21954f 100644
--- a/docs/html/design/media/iconography_notification_focal.png
+++ b/docs/html/design/media/iconography_notification_focal.png
diff --git a/docs/html/design/media/new_accessibility.png b/docs/html/design/media/new_accessibility.png
new file mode 100644
index 0000000..864ee5c
--- /dev/null
+++ b/docs/html/design/media/new_accessibility.png
diff --git a/docs/html/design/media/new_notifications.png b/docs/html/design/media/new_notifications.png
new file mode 100644
index 0000000..1d9bcf5
--- /dev/null
+++ b/docs/html/design/media/new_notifications.png
diff --git a/docs/html/design/media/new_widgets.png b/docs/html/design/media/new_widgets.png
new file mode 100644
index 0000000..7e6201b
--- /dev/null
+++ b/docs/html/design/media/new_widgets.png
diff --git a/docs/html/design/media/progress_activity_custom.png b/docs/html/design/media/progress_activity_custom.png
new file mode 100644
index 0000000..2bfdd52
--- /dev/null
+++ b/docs/html/design/media/progress_activity_custom.png
diff --git a/docs/html/design/media/progress_activity_custom_app.png b/docs/html/design/media/progress_activity_custom_app.png
new file mode 100644
index 0000000..e572508
--- /dev/null
+++ b/docs/html/design/media/progress_activity_custom_app.png
diff --git a/docs/html/design/media/progress_activity_do.png b/docs/html/design/media/progress_activity_do.png
new file mode 100644
index 0000000..fd22436
--- /dev/null
+++ b/docs/html/design/media/progress_activity_do.png
diff --git a/docs/html/design/media/progress_activity_dont.png b/docs/html/design/media/progress_activity_dont.png
new file mode 100644
index 0000000..08c4b5d
--- /dev/null
+++ b/docs/html/design/media/progress_activity_dont.png
diff --git a/docs/html/design/patterns/confirming-acknowledging.jd b/docs/html/design/patterns/confirming-acknowledging.jd
new file mode 100644
index 0000000..28e4427
--- /dev/null
+++ b/docs/html/design/patterns/confirming-acknowledging.jd
@@ -0,0 +1,76 @@
+page.title=Confirming &amp; Acknowledging
+@jd:body
+
+<p>In some situations, when a user invokes an action in your app, it's a good idea to <em>confirm</em> or <em>acknowledge</em> that action through text.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_confirming.png">
+    <p><strong>Confirming</strong> is asking the user to verify that they truly want to proceed with an action they just invoked. In some cases, the confirmation is presented along with a warning or critical information related to the action that they need to consider.</p>
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_acknowledge.png">
+    <p><strong>Acknowledging</strong> is displaying text to let the user know that the action they just invoked has been completed. This removes uncertainty about implicit operations that the system is taking. In some cases, the acknowledgment is presented along with an option to undo the action.</p>
+  </div>
+</div>
+
+<p>Communicating to users in these ways can help alleviate uncertainty about things that have happened or will happen. Confirming or acknowledging can also prevent users from making mistakes they might regret.</p>
+
+<h2>When to Confirm or Acknowledge User Actions</h2>
+<p>Not all actions warrant a confirmation or an acknowledgment. Use this flowchart to guide your design decisions.</p>
+<img src="{@docRoot}design/media/confirm_ack_flowchart.png">
+
+<h2>Confirming</h2>
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_ex_books.png">
+    <h4>Example: Google Play Books</h4>
+    <p>In this example, the user has requested to delete a book from their Google Play library. A dialog appears to confirm this action because it's important to understand that the book will no longer be available from any device.</p>
+    <p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p>
+
+    <ul class="nolist">
+      <li class="do-dont-label bad">Don't<p><b>Are you sure?</b></p></li>
+      <li class="do-dont-label bad">Don't<p><b>Warning!</b></p></li>
+      <li class="do-dont-label good">Do<p><b>Delete from library?</b></p></li>
+    </ul>
+
+  </div>
+  <div class="layout-content-col span-7">
+    <img src="{@docRoot}design/media/confirm_ack_ex_beam.png">
+    <h4>Example: Android Beam</h4>
+    <p>Confirmations don't necessarily have to be presented in a dialog with two buttons. After initiating Android Beam, the user is prompted to touch the content to be shared (in this example, it's a photo). If they decide not to proceed, they simply move their phone away.</p>
+  </div>
+</div>
+
+<h2>Acknowledging</h2>
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_ex_draftsave.png">
+    <h4>Example: Abandoned Gmail draft saved</h4>
+    <p>In this example, if the user navigates back or up from the Gmail compose screen, something possibly unexpected happens: the current draft is automatically saved. An acknowledgment in the form of a toast makes that apparent. It fades after a few seconds.</p>
+    <p>Undo isn't appropriate here because saving was initiated by the app, not the user. And it's quick and easy to resume composing the message by navigating to the list of drafts.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_draft_deleted.png">
+    <h4>Example: Gmail conversation deleted</h4>
+    <p>After the user deletes a conversation from the list in Gmail, an acknowledgment appears with an undo option. The acknowledgment remains until the user takes an unrelated action, such as scrolling the list.</p>
+  </div>
+</div>
+
+<h2>No Confirmation or Acknowledgment</h2>
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_ex_removeapp.png">
+    <h4>Example: Removing an app from the Home Screen</h4>
+    <p><strong>Confirmation is unnecessary</strong>. This is a deliberate action: the user must drag and drop an item onto a relatively large and isolated target. Therefore, accidents are highly unlikely. But if the user regrets the decision, it only takes a few seconds to bring it back again.</p>
+    <p><strong>Acknowledgment is unnecessary</strong>. The user will know the app is gone from the Home Screen because they made it disappear by dragging it away.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+    <img src="{@docRoot}design/media/confirm_ack_ex_plus1.png">
+    <h4>Example: +1'ing</h4>
+    <p><strong>Confirmation is unnecessary</strong>. If the user +1'd by accident, it's not a big deal. They can just touch the button again to undo the action.</p>
+    <p><strong>Acknowledgment is unnecessary</strong>. The user will see the +1 button bounce and turn red. That's a very clear signal.</p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/docs/html/design/patterns/help.jd b/docs/html/design/patterns/help.jd
index 4a92c7b..e42ea26 100644
--- a/docs/html/design/patterns/help.jd
+++ b/docs/html/design/patterns/help.jd
@@ -24,11 +24,11 @@ page.title=Help
   <div class="layout-content-col span-8">
     <ol>
       <li><strong>High value</strong>
-      <p>Without it, users wouldn't be able to customize the most frequently-visited Android screen to meet their needs.</p></li>
+      <p style="margin-top="0">Without it, users wouldn't be able to customize the most frequently-visited Android screen to meet their needs.</p></li>
       <li><strong>Available only through a gesture</strong>
-      <p>Users can't do this through a button or a menu.</p></li>
+      <p style="margin-top="0">Users can't do this through a button or a menu.</p></li>
       <li><strong>Atypical for the gesture</strong>
-      <p>Many high value functions invoked through a gesture - like scrolling, swiping tabs, and turning pages - are common and yield expected results. Users will be able to discover them in your app, and unsolicited help is unnecessary. But here, the gesture does something unexpected: press and hold doesn't just select an app, it also immediately navigates to the Home Screen and creates a shortcut to the app that can then be dragged around.</p></li>
+      <p style="margin-top="0">Many high value functions invoked through a gesture - like scrolling, swiping tabs, and turning pages - are common and yield expected results. Users will be able to discover them in your app, and unsolicited help is unnecessary. But here, the gesture does something unexpected: press and hold doesn't just select an app, it also immediately navigates to the Home Screen and creates a shortcut to the app that can then be dragged around.</p></li>
     </ol>
     <p>However, this is an exceptional case. Most functionality doesn't meet all three of these criteria.</p>
   </div>
diff --git a/docs/html/design/patterns/new-4-0.jd b/docs/html/design/patterns/new-4-0.jd
deleted file mode 100644
index 91ebba7..0000000
--- a/docs/html/design/patterns/new-4-0.jd
+++ /dev/null
@@ -1,71 +0,0 @@
-page.title=New in Android 4.0
-@jd:body
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Navigation bar</h4>
-<p>Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a
-virtual navigation bar that houses the Back, Home and Recents buttons. Read the
-<a href="{@docRoot}design/patterns/compatibility.html">Compatibility</a> pattern to learn how the OS adapts to
-phones with hardware buttons and how pre-Android 3.0 apps that rely on menu keys are supported.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="{@docRoot}design/media/whats_new_nav_bar.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Action bar</h4>
-<p>The action bar is the most important structural element of an Android app. It provides consistent
-navigation across the platform and allows your app to surface actions.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="{@docRoot}design/media/whats_new_action_bar.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Multi-pane layouts</h4>
-<p>Creating apps that scale well across different form factors and screen sizes is important in the
-Android world. Multi-pane layouts allow you to combine different activities that show separately on
-smaller devices into richer compound views for tablets.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="{@docRoot}design/media/whats_new_multipanel.png">
-
-  </div>
-</div>
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
-  <div class="layout-content-col span-7">
-
-<h4>Selection</h4>
-<p>The long press gesture which was traditionally used to show contextual actions for objects is now
-used for data selection. When selecting data, contextual action bars allow you to surface actions.</p>
-
-  </div>
-  <div class="layout-content-col span-6">
-
-    <img src="{@docRoot}design/media/whats_new_multiselect.png">
-
-  </div>
-</div>
diff --git a/docs/html/design/patterns/new.jd b/docs/html/design/patterns/new.jd
new file mode 100644
index 0000000..1fc4987
--- /dev/null
+++ b/docs/html/design/patterns/new.jd
@@ -0,0 +1,114 @@
+page.title=New in Android
+@jd:body
+
+<h2>Jelly Bean - Android 4.1</h2>
+
+<h4>Notifications</h4>
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+    <p>Notifications have received some notable enhancements in Android 4.1:</p>
+    <ul>
+      <li>Users can act on notifications immediately from the drawer</li>
+      <li>Notifications are more flexible in size and layout</li>
+      <li>A priority flag helps sort notifications by importance</li>
+      <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>
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/new_notifications.png">
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<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>
+    <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>
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/new_widgets.png">
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<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>
+    <ul>
+      <li>Making navigation intuitive</li>
+      <li>Using recommended touch target sizes</li>
+      <li>Labeling visual UI elements meaningfully</li>
+      <li>Providing alternatives to affordances that time out</li>
+      <li>Using standard framework controls or enable TalkBack for custom controls</li>
+      <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 [Application Widgets] (should be link) 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>
+
+<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>
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/whats_new_nav_bar.png">
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<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>
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/whats_new_action_bar.png">
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<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>
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/whats_new_multipanel.png">
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<h4>Selection</h4>
+
+<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>
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/whats_new_multiselect.png">
+  </div>
+</div>