Merge "Doc change: Design guidelines update." into klp-dev

docs/html/design/building-blocks/progress.jd

@@ -54,14 +54,8 @@ page.tags="progressbar","download","network"
         <p>In this example, an activity circle (in Holo Light) is used in the Gmail application when a message is being loaded because it's not possible to determine how long it will take to download the email.</p>
         <p>When displaying an activity circle, do not include text to communicate what the app is doing. The moving circle alone provides sufficient feedback about the delay, and does so in an understated way that minimizes the impact.</p>
         <p>
-        <div class="layout-content-col span-3" style="margin-left:0">
-          <div class="do-dont-label bad">Don't</div>
-          <img src="{@docRoot}design/media/progress_activity_dont.png">
-        </div>
-      
-        <div class="layout-content-col span-3">
-          <div class="do-dont-label good">Do</div>
-          <img src="{@docRoot}design/media/progress_activity_do.png">
+        <div style="margin-left:0;margin-top:1em;">
+          <img src="{@docRoot}design/media/progress_activity_do_dont.png">
         </div>
         </p>
       </li>

docs/html/design/building-blocks/scrolling.jd

@@ -8,7 +8,7 @@ scrolling speed is proportional to the speed of the gesture.</p>
 
 <p>Appears during scrolling to indicate what portion of the content is currently in view.</p>
 
-<div class="framed-galaxynexus-land-span-13">
+<div class="framed-nexus5-land-span-13">
   <video class="play-on-hover" autoplay>
     <source src="{@docRoot}design/media/scroll_indicator.mp4" type="video/mp4">
     <source src="{@docRoot}design/media/scroll_indicator.webm" type="video/webm">
@@ -26,7 +26,7 @@ to quickly navigate to the items that begin with a particular letter. With index
 indicator appears even when the user isn't scrolling. Touching or dragging it causes the current
 letter to pop up in a prominent way.</p>
 
-<div class="framed-galaxynexus-land-span-13">
+<div class="framed-nexus5-land-span-13">
   <video class="play-on-hover" autoplay>
     <source src="{@docRoot}design/media/scroll_index.mp4" type="video/mp4">
     <source src="{@docRoot}design/media/scroll_index.webm" type="video/webm">

docs/html/design/building-blocks/tabs.jd

@@ -35,7 +35,7 @@ to the next/previous view, swipe left or right.</p>
     </video>
     <div class="figure-caption">
       Scrolling tabs in the Play Store app.
-      <div class="video-instructions">&nbsp;</div>
+      <div class="video-instructions-image">&nbsp;</div>
     </div>
 
   </div>
@@ -55,14 +55,3 @@ to the next/previous view, swipe left or right.</p>
 <div class="figure-caption">
   Tabs in the Google Play Movies app.
 </div>
-
-
-
-<h2 id="stacked">Stacked Tabs</h2>
-
-
-<p>If view navigation is essential to your app, you can break out tabs into a separate action bar. This
-permits fast view switching even on narrower screens.</p>
-
-<img src="{@docRoot}design/media/tabs_stacked.png">
-

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 &amp; Acknowledging</a></li>
       <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li>

docs/html/design/downloads/index.jd

@@ -102,9 +102,9 @@ requirements of UI and high-resolution screens.</p>
 
 <p>
   <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto ZIP']);"
-    href="{@docRoot}downloads/design/roboto-1.100141.zip">Roboto</a>
+    href="{@docRoot}downloads/design/roboto-1.2.zip">Roboto</a>
   <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specemin Book']);"
-    href="{@docRoot}downloads/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a>
+    href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a>
 </p>
 
   </div>

docs/html/design/get-started/ui-overview.jd

@@ -75,11 +75,6 @@ to allow the user to enjoy full screen content without distraction.</p>
   the traditional hardware keys. It houses the device navigation controls Back, Home, and
   Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p>
 </li>
-<li>
-<h4>Combined Bar</h4>
-<p>On tablet form factors the status and navigation bars are combined into a single bar at the
-  bottom of the screen.</p>
-</li>
 </ol>
 
 </div>
@@ -101,7 +96,9 @@ notification opens the associated app. <a href="{@docRoot}design/patterns/notifi
 
     <img src="{@docRoot}design/media/notifications_dismiss.png">
 
-<p>Notifications can be expanded to uncover more details and relevant actions. When collapsed, notifications have a one-line title and a one-line message.The recommended layout for a notification includes two lines. If necessary, you can add a third line.</p>
+<p>Notifications can be expanded to uncover more details and relevant actions. When collapsed, notifications
+  have a one-line title and a one-line message.The recommended layout for a notification includes two lines.
+  If necessary, you can add a third line.</p>
 <p>Swiping a notification right or left removes it from the notification drawer.</p>
 
   </div>
@@ -114,34 +111,30 @@ notification opens the associated app. <a href="{@docRoot}design/patterns/notifi
 <div class="layout-content-row">
   <div class="layout-content-col span-7">
 
-    <img src="{@docRoot}design/media/ui_overview_app_ui.png">
+    <img src="{@docRoot}design/media/app_structure_drawer.png">
 
   </div>
   <div class="layout-content-col span-6 with-callouts">
 
-<p>A typical Android app consists of action bars and the app content area.</p>
+<p>A typical Android app uses action bars, and many apps will include a navigation drawer.</p>
 <ol>
 <li>
-<h4>Main Action Bar</h4>
-<p>The command and control center for your app. The main action bar includes elements for
-  navigating your app's hierarchy and views, and also surfaces the most important actions.</p>
+<h4>Action Bar</h4>
+<p>The command and control center for your app. The action bar surfaces the most important actions
+  for the current view, and may include simple controls for switching between views.</p>
 <p><a href="{@docRoot}design/patterns/actionbar.html">More on the Action Bar</a></p>
 </li>
 <li>
-<h4>View Control</h4>
-<p>Allows users to switch between the different views that your app provides. Views typically
-  consist of different arrangements of your data or different functional aspects of your app.</p>
+<h4>Navigation Drawer</h4>
+<p>If your app's structure is more complex, the navigation drawer can display the main navigation
+  options. The navigation drawer expands from the left edge of the screen, overlaying the content
+  area but not the action bar.</p>
+<p><a href="{@docRoot}design/patterns/navigation-drawer.html">More on the Navigation Drawer</a></p>
 </li>
 <li>
 <h4>Content Area</h4>
 <p>The space where the content of your app is displayed.</p>
 </li>
-<li>
-<h4>Split Action Bar</h4>
-<p>Split action bars provide a way to distribute actions across additional bars located below
-  the main action bar or at the bottom of the screen. In this example, a split action bar moves
-  important actions that won't fit in the main bar to the bottom.</p>
-</li>
 </ol>
 
   </div>

docs/html/design/index.jd

@@ -10,9 +10,13 @@ footer.hide=1
 
 #text-overlay {
   position: absolute;
-  left: 0;
-  top: 472px;
-  width: 280px;
+  left: 36px;
+  top: 42px;
+  width: 266px;
+
+}
+#hero-image {
+  padding-left:68px;
 }
 </style>
 
@@ -20,10 +24,11 @@ footer.hide=1
   <div id="text-overlay">
     Welcome to <strong>Android Design</strong>, your place for learning how to design exceptional Android apps.
     <br><br>
-    <a href="{@docRoot}design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
+    Want to know what <strong>Android 4.4 KitKat</strong> has for designers? See <a href="{@docRoot}design/patterns/new.html">New in Android</a>.<br><br>
+    <a href="/design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
   </div>
-
-  <a href="{@docRoot}design/get-started/creative-vision.html">
-    <img src="{@docRoot}design/media/index_landing_page.png">
+  <a id="hero-image" href="/design/get-started/creative-vision.html">
+    <img src="/design/media/index_landing_page.png">
   </a>
 </div>
+