am 5b6e91a6: am af5f2000: Merge "docs: Add Cross-References to Material Design Spec" into lmp-docs

* commit '5b6e91a6717c4d6aa34adbbb2f2b5d6625c0802d':
  docs: Add Cross-References to Material Design Spec

28 files changed, 380 insertions, 46 deletions

diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd
index 3a34601a25d1..e698f38a07a3 100644
--- a/docs/html/design/building-blocks/buttons.jd
+++ b/docs/html/design/building-blocks/buttons.jd
@@ -2,6 +2,14 @@ page.title=Buttons
 page.tags=button,input
 @jd:body
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/components/buttons.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Buttons<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/button.html">
   <div>
     <h3>Developer Docs</h3>
diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd
index 53d99b8bf804..9c91abfc2e7d 100644
--- a/docs/html/design/building-blocks/dialogs.jd
+++ b/docs/html/design/building-blocks/dialogs.jd
@@ -2,6 +2,14 @@ page.title=Dialogs
 page.tags=dialog,alert,popup,toast
 @jd:body
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/components/dialogs.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Dialogs<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}guide/topics/ui/dialogs.html">
   <div>
     <h3>Developer Docs</h3>
@@ -35,7 +43,7 @@ user to adjust settings or enter text.</p>
   <h4>Action buttons</h4>
   <p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely action. However, if the options consist of specific actions such as Close or Wait rather than a confirmation or cancellation of the action described in the content, then all the buttons should be active verbs. Order actions following these rules:</p>
     <ul>
-    
+
     <li>The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.</li>
     <li>The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.</li>
     </ul>
@@ -152,6 +160,15 @@ advances the workflow, and simply touching outside the popup dismisses it.</p>
 away from an email before you send it triggers a "Draft saved" toast to let you know that you can
 continue editing later. Toasts automatically disappear after a timeout.</p>
 
+<a class="notice-designers-material left"
+  href="http://www.google.com/design/spec/components/snackbars-toasts.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Toasts<p>
+  </div>
+</a>
+
+
 <a class="notice-developers left" href="{@docRoot}guide/topics/ui/notifiers/toasts.html">
   <div>
     <h3>Developer Docs</h3>
diff --git a/docs/html/design/building-blocks/grid-lists.jd b/docs/html/design/building-blocks/grid-lists.jd
index d98637cce8c5..ac3a3ebf4a48 100644
--- a/docs/html/design/building-blocks/grid-lists.jd
+++ b/docs/html/design/building-blocks/grid-lists.jd
@@ -4,6 +4,15 @@ page.tags=gridview,layout,listview
 
 <img src="{@docRoot}design/media/gridview_overview.png">
 
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/components/grid-lists.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Grid lists<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/gridview.html">
   <div>
     <h3>Developer Docs</h3>
diff --git a/docs/html/design/building-blocks/lists.jd b/docs/html/design/building-blocks/lists.jd
index 4949d00fb949..6f69feb37795 100644
--- a/docs/html/design/building-blocks/lists.jd
+++ b/docs/html/design/building-blocks/lists.jd
@@ -2,10 +2,11 @@ page.title=Lists
 page.tags=listview,layout
 @jd:body
 
-<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/listview.html">
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/components/lists.html">
   <div>
-    <h3>Developer Docs</h3>
-    <p>List View</p>
+    <h3>Material Design</h3>
+    <p>Lists<p>
   </div>
 </a>
 
@@ -22,7 +23,7 @@ well as drilldown navigation.</p>
   </div>
   <div class="layout-content-col span-4 with-callouts">
 
-<ol>
+<ol style="margin-bottom: 60px;">
 <li>
 <h4>Section Divider</h4>
 <p>Use section dividers to organize the content of your list into groups and facilitate scanning.</p>
@@ -35,5 +36,21 @@ well as drilldown navigation.</p>
 </li>
 </ol>
 
+<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/listview.html">
+  <div>
+    <h3>Developer Docs</h3>
+    <p>List View</p>
+  </div>
+</a>
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/components/lists-controls.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Lists: Controls<p>
+  </div>
+</a>
+
+
   </div>
 </div>
diff --git a/docs/html/design/building-blocks/progress.jd b/docs/html/design/building-blocks/progress.jd
index 6946a753abdc..2de75dca311d 100644
--- a/docs/html/design/building-blocks/progress.jd
+++ b/docs/html/design/building-blocks/progress.jd
@@ -2,6 +2,14 @@ page.title=Progress &amp; Activity
 page.tags=progressbar,download,network
 @jd:body
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/components/progress-activity.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Progress and Activity<p>
+  </div>
+</a>
+
 <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>
 
diff --git a/docs/html/design/building-blocks/scrolling.jd b/docs/html/design/building-blocks/scrolling.jd
index 41e7cecf6303..04b1e4a1acb0 100644
--- a/docs/html/design/building-blocks/scrolling.jd
+++ b/docs/html/design/building-blocks/scrolling.jd
@@ -2,6 +2,7 @@ page.title=Scrolling
 page.tags=scrollview,listview
 @jd:body
 
+
 <p>Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The
 scrolling speed is proportional to the speed of the gesture.</p>
 <h2 id="indicator">Scroll Indicator</h2>
diff --git a/docs/html/design/building-blocks/seek-bars.jd b/docs/html/design/building-blocks/seek-bars.jd
index 1465688ed7f2..5c421029588e 100644
--- a/docs/html/design/building-blocks/seek-bars.jd
+++ b/docs/html/design/building-blocks/seek-bars.jd
@@ -2,6 +2,14 @@ page.title=Seek Bars and Sliders
 page.tags=seekbar,progressbar
 @jd:body
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/components/sliders.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Sliders<p>
+  </div>
+</a>
+
 <p>Interactive sliders make it possible to select a value from a continuous or discrete range of values
 by moving the slider thumb. The smallest value is to the left, the largest to the right. The
 interactive nature of the slider makes it a great choice for settings that reflect intensity levels,
diff --git a/docs/html/design/building-blocks/spinners.jd b/docs/html/design/building-blocks/spinners.jd
index f7d80e7d65ba..3a74ccf84c8d 100644
--- a/docs/html/design/building-blocks/spinners.jd
+++ b/docs/html/design/building-blocks/spinners.jd
@@ -2,6 +2,14 @@ page.title=Spinners
 page.tags=spinner,dropdown
 @jd:body
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/components/menus.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Menus<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/spinner.html">
   <div>
     <h3>Developer Docs</h3>
diff --git a/docs/html/design/building-blocks/switches.jd b/docs/html/design/building-blocks/switches.jd
index d4356572dd36..9dd09caac84b 100644
--- a/docs/html/design/building-blocks/switches.jd
+++ b/docs/html/design/building-blocks/switches.jd
@@ -2,6 +2,14 @@ page.title=Switches
 page.tags=switch,checkbox,radiobutton,button
 @jd:body
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/components/selection-controls.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Selection Controls<p>
+  </div>
+</a>
+
 <p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
 buttons, and on/off switches.</p>
 
diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd
index 93818c3907a5..078de926cdd4 100644
--- a/docs/html/design/building-blocks/tabs.jd
+++ b/docs/html/design/building-blocks/tabs.jd
@@ -4,10 +4,18 @@ page.tags=tabs,actionbar,navigation,viewpager
 
 <img src="{@docRoot}design/media/tabs_overview.png">
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/components/tabs.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Tabs<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}training/implementing-navigation/lateral.html">
   <div>
     <h3>Developer Docs</h3>
-    <p>Creating Swipe Views with Tabs</p>
+    <p>Creating Swipe Views<br>with Tabs</p>
   </div>
 </a>
 
diff --git a/docs/html/design/building-blocks/text-fields.jd b/docs/html/design/building-blocks/text-fields.jd
index e109d5fddc8f..19c22f93f59a 100644
--- a/docs/html/design/building-blocks/text-fields.jd
+++ b/docs/html/design/building-blocks/text-fields.jd
@@ -2,6 +2,15 @@ page.title=Text Fields
 page.tags=text,edittext,input
 @jd:body
 
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/components/text-fields.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Text Fields<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/text.html">
   <div>
     <h3>Developer Docs</h3>
diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd
index 16d61e7e5499..4111bcaffff0 100644
--- a/docs/html/design/downloads/index.jd
+++ b/docs/html/design/downloads/index.jd
@@ -12,6 +12,7 @@ and implementation.</p>
 <div class="layout-content-row">
   <div class="layout-content-col span-5">
 
+
 <p>Drag and drop your way to beautifully designed Android apps. The stencils feature the
 rich typography, colors, interactive controls, and icons found throughout Android, along with
 phone and tablet outlines to frame your creations. Source files for icons and controls are also
@@ -23,15 +24,31 @@ available.</p>
     <img src="{@docRoot}design/media/downloads_stencils.png">
 
   </div>
+
+  <div class="layout-content-col span-4">
+    <a class="notice-designers-material"
+      style="width:218px;"
+      href="http://www.google.com/design/spec/resources/layout-templates.html">
+      <div>
+        <h3>Material Design</h3>
+        <p>Layout Templates<p>
+      </div>
+    </a>
+  </div>
+
   <div class="layout-content-col span-4">
+    <a class="notice-designers-material"
+      style="width:218px;"
+      href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html">
+      <div>
+        <h3>Material Design</h3>
+        <p>Sticker Sheets<p>
+      </div>
+    </a>
+  </div>
 
+  <div class="layout-content-col span-4">
 <p>
-  <!--<a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Fireworks Stencil');"
-    href="{@docRoot}downloads/design/Android_Design_Fireworks_Stencil_20120814.png">Adobe&reg; Fireworks&reg; PNG Stencil</a>
-  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Illustrator Stencil');"
-    href="{@docRoot}downloads/design/Android_Design_Illustrator_Vectors_20120814.ai">Adobe&reg; Illustrator&reg; Stencil</a>
-  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'OmniGraffle Stencil');"
-    href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni&reg; OmniGraffle&reg; Stencil</a>-->
   <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Photoshop Sources');"
     href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe&reg; Photoshop&reg; Stencils and Sources</a>
 </p>
@@ -61,6 +78,18 @@ modify to match your theme, plus source files.</p>
     <img src="{@docRoot}design/media/iconography_actionbar_style.png">
 
   </div>
+
+  <div class="layout-content-col span-4">
+    <a class="notice-designers-material"
+      style="width:218px;"
+      href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html">
+      <div>
+        <h3>Material Design</h3>
+        <p>Sticker Sheets<p>
+      </div>
+    </a>
+  </div>
+
   <div class="layout-content-col span-4">
 
 <p>
@@ -238,6 +267,18 @@ requirements of UI and high-resolution screens.</p>
     <img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png">
 
   </div>
+
+  <div class="layout-content-col span-4">
+    <a class="notice-designers-material"
+      style="width:218px;"
+      href="http://www.google.com/design/spec/resources/roboto-noto-fonts.html">
+      <div>
+        <h3>Material Design</h3>
+        <p>Roboto Font<p>
+      </div>
+    </a>
+  </div>
+
   <div class="layout-content-col span-4">
 
 <p>
@@ -264,6 +305,18 @@ shade that can be used as a complement when needed.</p>
     <img src="{@docRoot}design/media/downloads_color_swatches.png">
 
   </div>
+
+  <div class="layout-content-col span-4">
+    <a class="notice-designers-material"
+      style="width:218px;"
+      href="http://www.google.com/design/spec/resources/color-palettes.html">
+      <div>
+        <h3>Material Design</h3>
+        <p>Color Palettes<p>
+      </div>
+    </a>
+  </div>
+
   <div class="layout-content-col span-4">
 
 <p>
diff --git a/docs/html/design/patterns/accessibility.jd b/docs/html/design/patterns/accessibility.jd
index aaa6f163ca2a..b9682371367d 100644
--- a/docs/html/design/patterns/accessibility.jd
+++ b/docs/html/design/patterns/accessibility.jd
@@ -3,6 +3,14 @@ page.tags="accessibility","navigation","input"
 page.metaDescription=Design an app that's universally accessible to people with visual impairment, color deficiency, hearing loss, and limited dexterity.
 @jd:body
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/usability/accessibility.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Accessibility<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}training/accessibility/index.html">
   <div>
     <h3>Developer Docs</h3>
diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd
index f28df012543c..54677222e52b 100644
--- a/docs/html/design/patterns/actionbar.jd
+++ b/docs/html/design/patterns/actionbar.jd
@@ -5,6 +5,14 @@ page.metaDescription=The Action bar is an essential design element for all apps.
 
 <img src="{@docRoot}design/media/action_bar_pattern_overview.png">
 
+
+<a class="notice-designers-material" href="http://www.google.com/design/spec/layout/structure.html#structure-app-bar">
+  <div>
+    <h3>Material Design</h3>
+    <p>App Bar<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}guide/topics/ui/actionbar.html">
   <div>
     <h3>Developer Docs</h3>
@@ -12,7 +20,6 @@ page.metaDescription=The Action bar is an essential design element for all apps.
   </div>
 </a>
 
-
 <p>The <em>action bar</em> is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app.</p>
 <p><strong>It provides several key functions</strong>:</p>
 <ul>
diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd
index e0a11ed0e04b..404dd4d8c139 100644
--- a/docs/html/design/patterns/app-structure.jd
+++ b/docs/html/design/patterns/app-structure.jd
@@ -2,6 +2,15 @@ page.title=App Structure
 page.tags=navigation,layout,tablet
 @jd:body
 
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/patterns/app-structure.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>App Structure<p>
+  </div>
+</a>
+
     <p>Apps come in many varieties that address very different needs. For example:</p>
 <ul>
 <li>Apps such as Calculator or Camera that are built around a single focused activity handled from a
@@ -63,7 +72,7 @@ layouts that are visually engaging and appropriate for the data type and screen
     <div class="figure-caption">
       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. 
+      to the user. Search is readily available from the action bar.
     </div>
 
   </div>
@@ -92,7 +101,7 @@ important actions.</p>
     <img src="{@docRoot}design/media/app_structure_gmail.png">
     <div class="figure-caption">
       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. 
+      well. Navigation supports switching views of day, week, month, and agenda views.
     </div>
 
   </div>
diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd
index 1ec7094973a5..ada07350e3b3 100644
--- a/docs/html/design/patterns/gestures.jd
+++ b/docs/html/design/patterns/gestures.jd
@@ -2,6 +2,14 @@ page.title=Gestures
 page.tags=gesture,input,touch
 @jd:body
 
+<a class="notice-designers-material"
+   href="http://www.google.com/design/spec/patterns/gestures.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Gestures<p>
+  </div>
+</a>
+
 <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>
 
@@ -92,7 +100,7 @@ following table shows the core gesture set that is supported in Android.</p>
       </li>
     </ul>
   </div>
-  
+
 </div>
 
 
diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd
index 4e99462cf80f..dbe7d01df207 100644
--- a/docs/html/design/patterns/multi-pane-layouts.jd
+++ b/docs/html/design/patterns/multi-pane-layouts.jd
@@ -5,6 +5,14 @@ page.metaDescription=Design guide with examples of how to flatten navigation and
 @jd:body
 
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/layout/structure.html#structure-ui-regions">
+  <div>
+    <h3>Material Design</h3>
+    <p>UI Regions and Guidance<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}training/basics/fragments/index.html">
   <div>
     <h3>Developer Docs</h3>
@@ -47,7 +55,7 @@ you can use to adjust the layout after orientation change while keeping function
   <div class="layout-content-col span-8">
 
     <img src="{@docRoot}design/media/multipane_stretch.png">
-    
+
   </div>
   <div class="layout-content-col span-5">
 
@@ -61,7 +69,7 @@ you can use to adjust the layout after orientation change while keeping function
   <div class="layout-content-col span-8">
 
     <img src="{@docRoot}design/media/multipane_stack.png">
-    
+
   </div>
   <div class="layout-content-col span-5">
 
@@ -75,7 +83,7 @@ you can use to adjust the layout after orientation change while keeping function
   <div class="layout-content-col span-8">
 
     <img src="{@docRoot}design/media/multipane_expand.png">
-    
+
   </div>
   <div class="layout-content-col span-5">
 
@@ -89,7 +97,7 @@ you can use to adjust the layout after orientation change while keeping function
   <div class="layout-content-col span-8">
 
     <img src="{@docRoot}design/media/multipane_show.png">
-    
+
   </div>
   <div class="layout-content-col span-5">
 
diff --git a/docs/html/design/patterns/navigation-drawer.jd b/docs/html/design/patterns/navigation-drawer.jd
index 7e63ba6c2adf..dbac4595f878 100644
--- a/docs/html/design/patterns/navigation-drawer.jd
+++ b/docs/html/design/patterns/navigation-drawer.jd
@@ -3,6 +3,14 @@ page.tags=DrawerLayout,SlidingPaneLayout
 @jd:body
 
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/layout/structure.html#structure-side-nav">
+  <div>
+    <h3>Material Design</h3>
+    <p>Side Nav<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}training/implementing-navigation/nav-drawer.html">
   <div>
     <h3>Developer Docs</h3>
@@ -12,7 +20,7 @@ page.tags=DrawerLayout,SlidingPaneLayout
 
 
 <p>The navigation drawer is a panel that transitions in from the left edge of the screen and
-displays the app’s main navigation options.</p> 
+displays the app’s main navigation options.</p>
 
 
 <h4>Displaying the navigation drawer</h4>
@@ -92,7 +100,7 @@ anywhere in the app, navigation up to the top level is faster and more efficient
 
 <p>The navigation drawer is a reflection of your app’s structure and displays its major
 navigation hubs. Think of navigation hubs as those places in your app that a user will want
-to visit frequently or use as a jumping-off point to other parts of the app. 
+to visit frequently or use as a jumping-off point to other parts of the app.
 At a minimum, the navigation hubs are the top-level views, since they correspond to your app’s
 major functional areas.</p>
 <p> If your app’s structure is deep, you can add screens from lower levels that your users will
@@ -125,8 +133,8 @@ likely visit often and make those navigation hubs as well.</p>
 <h2 id="Content">Content of the Navigation Drawer</h2>
 
 <p> Keep the content of the navigation drawer focused on app navigation. Expose the navigation
-hubs of your app as list items inside the navigation drawer - one item per row. 
-    
+hubs of your app as list items inside the navigation drawer - one item per row.
+
 <div class="layout-content-row">
   <div class="layout-content-col span-8">
   <h4>Titles, icons, and counters</h4>
@@ -139,7 +147,7 @@ hubs of your app as list items inside the navigation drawer - one item per row.
   <div class="layout-content-col span-5">
   <img src="{@docRoot}design/media/navigation_drawer_titles_icons.png">
   <div class="figure-caption">
-    Use titles and icons to organize your drawer. 
+    Use titles and icons to organize your drawer.
   </div>
   </div>
 </div>
@@ -149,13 +157,13 @@ hubs of your app as list items inside the navigation drawer - one item per row.
   <img src="{@docRoot}design/media/navigation_drawer_collapse.png">
   <div class="figure-caption">
     Collapsible navigation items are split. Use the left side for navigation and the right
-    to collapse and expand items. 
+    to collapse and expand items.
     </div>
   </div>
   <div class="layout-content-col span-5">
   <h4>Collapsible navigation items</h4>
   <p>If you have many views with some subordinate to others, consider collapsing them into one
-  expandable item to conserve space. 
+  expandable item to conserve space.
   The parent in the navigation drawer then turns into a split item. The left side allows
   navigation to the parent item’s view, and the right side collapses or expands the list of
   child items. </p>
@@ -189,7 +197,7 @@ is fully expanded:</p>
 <img src="{@docRoot}design/media/navigation_drawer_open_overflow.png">
 <div class="figure-caption">
   Clean up the action bar when the drawer is fully expanded. Remove actions that are not needed
-  and display your app's name in the title area. 
+  and display your app's name in the title area.
 </div>
 
 <h4>Actions</h4>
@@ -232,7 +240,7 @@ re-display the CAB.</p>
 
 <img src="{@docRoot}design/media/navigation_drawer_CAB.png">
 <div class="figure-caption">
-  Hide contextual action bars while the drawer is visible. 
+  Hide contextual action bars while the drawer is visible.
 </div>
 
 <p>If the user navigates away from a view with selected content, deselect the content before
diff --git a/docs/html/design/patterns/selection.jd b/docs/html/design/patterns/selection.jd
index be316778d737..7ed6dccd9e80 100644
--- a/docs/html/design/patterns/selection.jd
+++ b/docs/html/design/patterns/selection.jd
@@ -2,6 +2,14 @@ page.title=Selection
 page.tags=actionmode,navigation,contextual
 @jd:body
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/patterns/selection.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Selection<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}guide/topics/ui/menus.html#context-menu">
   <div>
     <h3>Developer Docs</h3>
@@ -9,6 +17,7 @@ page.tags=actionmode,navigation,contextual
   </div>
 </a>
 
+
 <p>Android 3.0 changed the <em>long press</em> gesture&mdash;that is, a touch that's held in the same position for a moment&mdash;to be the global gesture to select data.. This affects the way you should
 handle multi-select and contextual actions in your apps.</p>
 
diff --git a/docs/html/design/patterns/settings.jd b/docs/html/design/patterns/settings.jd
index e3a3f05c0b6b..a24d6c04f1c0 100644
--- a/docs/html/design/patterns/settings.jd
+++ b/docs/html/design/patterns/settings.jd
@@ -2,6 +2,14 @@ page.title=Settings
 page.tags=preferences,sharedpreferences
 @jd:body
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/patterns/settings.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Settings<p>
+  </div>
+</a>
+
 <a class="notice-developers" href="{@docRoot}guide/topics/ui/settings.html">
   <div>
     <h3>Developer Docs</h3>
@@ -9,6 +17,7 @@ page.tags=preferences,sharedpreferences
   </div>
 </a>
 
+
 <p itemprop="description">Settings is a place in your app where users indicate their preferences for how your app should
 behave. This benefits users because:</p>
 
diff --git a/docs/html/design/style/branding.jd b/docs/html/design/style/branding.jd
index 2353a93af1a9..b5bb77c98170 100644
--- a/docs/html/design/style/branding.jd
+++ b/docs/html/design/style/branding.jd
@@ -7,6 +7,14 @@ everyone else's. In Android, your app can shine as an extension of your brand. <
 
 <h2 id="color">Color</h2>
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/color.html#color-ui-color-application">
+  <div>
+    <h3>Material Design</h3>
+    <p>UI Color Application<p>
+  </div>
+</a>
+
 <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>
@@ -62,17 +70,32 @@ and app name in the action bar.</p>
       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> 
+</div>
 
 <h2 id="logo">Icons</h2>
 
+<a class="notice-designers-material" href="http://www.google.com/design/spec/style/icons.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Icons<p>
+  </div>
+</a>
+
+<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 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>
+    <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>
 
@@ -81,13 +104,6 @@ and app name in the action bar.</p>
     </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">
diff --git a/docs/html/design/style/color.jd b/docs/html/design/style/color.jd
index e00f6bc768b8..4c5f5abb3b6c 100644
--- a/docs/html/design/style/color.jd
+++ b/docs/html/design/style/color.jd
@@ -88,6 +88,13 @@ page.title=Color
   }
 </style>
 
+<a class="notice-designers-material" href="http://www.google.com/design/spec/style/color.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Color<p>
+  </div>
+</a>
+
 <p>Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast
 between visual components. Note that red and green may be indistinguishable to color-blind users.</p>
 
@@ -129,6 +136,6 @@ shade that can be used as a complement when needed.</p>
           .css('color', color)
           .text(color.toUpperCase());
     });
-    
+
   });
 </script>
diff --git a/docs/html/design/style/devices-displays.jd b/docs/html/design/style/devices-displays.jd
index 6a7234bccb72..1590363ad576 100644
--- a/docs/html/design/style/devices-displays.jd
+++ b/docs/html/design/style/devices-displays.jd
@@ -3,6 +3,14 @@ page.metaDescription=Take advantage of Android's flexible layout system and crea
 
 @jd:body
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/layout/principles.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Layout Principles<p>
+  </div>
+</a>
+
 <p>Android powers hundreds of millions of phones, tablets, and other devices in a wide variety of screen sizes and
 form factors. By taking advantage of Android's flexible layout system, you can create apps that
 gracefully scale from large tablets to smaller phones.</p>
@@ -15,12 +23,14 @@ gracefully scale from large tablets to smaller phones.</p>
   <div class="layout-content-col span-4">
 
 <h4>Be flexible</h4>
+
 <p>Stretch and compress your layouts to accommodate various heights and widths.</p>
 
   </div>
   <div class="layout-content-col span-5">
 
 <h4>Optimize layouts</h4>
+
 <p>On larger devices, take advantage of extra screen real estate. Create compound views that combine
 multiple views to reveal more content and ease navigation.</p>
 
@@ -37,6 +47,15 @@ ensure that your app looks great on any device.</p>
   <img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" />
 
 <h4>Strategies</h4>
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/layout/structure.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Layout Structure<p>
+  </div>
+</a>
+
 <p>So where do you begin when designing for multiple screens? One approach is to work in the base
 standard (normal size and <acronym title="Medium density (160 dpi)">MDPI</acronym>) and scale it up or
 down for the other buckets. Another approach is to start with the device with the largest screen
diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd
index 75f541a44735..e2cdf3fb9383 100644
--- a/docs/html/design/style/iconography.jd
+++ b/docs/html/design/style/iconography.jd
@@ -41,6 +41,14 @@ effectively down-scales your HDPI assets by 1/2 to match the expected size.</p>
 
 <h2 id="launcher">Launcher</h2>
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/icons.html#icons-product-icons">
+  <div>
+    <h3>Material Design</h3>
+    <p>Product Icons<p>
+  </div>
+</a>
+
 <p>The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the
 user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on
 any type of background.</p>
@@ -123,6 +131,14 @@ from above, so that users perceive some depth.</p>
 
 <h2 id="action-bar">Action Bar</h2>
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">
+  <div>
+    <h3>Material Design</h3>
+    <p>System Icons<p>
+  </div>
+</a>
+
 <p>
 
 Action bar icons are graphic buttons that represent the most important actions people can take
@@ -220,6 +236,14 @@ Disabled: <strong>30%</strong> opacity</p>
 
 <h2 id="small-contextual">Small / Contextual Icons</h2>
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">
+  <div>
+    <h3>Material Design</h3>
+    <p>System Icons<p>
+  </div>
+</a>
+
 <p>Within the body of your app, use small icons to surface actions and/or provide status for specific
 items. For example, in the Gmail app, each message has a star icon that marks the message as
 important.</p>
@@ -300,6 +324,15 @@ the background.</p>
 
 <h2 id="notification">Notification Icons</h2>
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">
+  <div>
+    <h3>Material Design</h3>
+    <p>System Icons<p>
+  </div>
+</a>
+
+
 <p>If your app generates notifications, provide an icon that the system can display in the status bar
 whenever a new notification is available.</p>
 
diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd
index e92d57e1ba99..d7b5f7817fd0 100644
--- a/docs/html/design/style/metrics-grids.jd
+++ b/docs/html/design/style/metrics-grids.jd
@@ -5,6 +5,16 @@ meta.tags="multiple screens, layout, tablets"
 page.image=/design/media/metrics_closeup.png
 @jd:body
 
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/layout/metrics-keylines.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Metrics and Keylines<p>
+  </div>
+</a>
+
+
 <p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per
 inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as
 falling into a particular size bucket and density bucket:</p>
diff --git a/docs/html/design/style/themes.jd b/docs/html/design/style/themes.jd
index 2dc8eadc633d..3313a2b41511 100644
--- a/docs/html/design/style/themes.jd
+++ b/docs/html/design/style/themes.jd
@@ -17,6 +17,16 @@ page.title=Themes
   </div>
   <div class="layout-content-col span-7">
 
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/color.html#color-themes">
+  <div>
+    <h3>Material Design</h3>
+    <p>Color Themes<p>
+  </div>
+</a>
+
+
 <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
@@ -34,7 +44,7 @@ of which you can selectively implement your own visual stylings.</p>
 
 <div class="note develop">
 <p><strong>Developer Guide</strong></p>
-  <p>For information about how to apply themes such as Holo Light and Dark, and 
+  <p>For information about how to apply themes such as Holo Light and Dark, and
   how to build your own themes, see the
   <a href="{@docRoot}guide/topics/ui/themes.html">Styles and Themes</a> API guide.</p>
 </div>
diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd
index 9f36fed60ec2..b6d640795c2b 100644
--- a/docs/html/design/style/touch-feedback.jd
+++ b/docs/html/design/style/touch-feedback.jd
@@ -2,8 +2,17 @@ page.title=Touch Feedback
 page.tags=input,button
 @jd:body
 
-    <div class="layout-content-row" style="margin-bottom: -100px">
-  <div class="layout-content-col span-7">
+<div class="layout-content-row" style="margin-bottom: -100px">
+<div class="layout-content-col span-7">
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/animation/responsive-interaction.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Responsive Interaction<p>
+  </div>
+</a>
+
 
 <p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors
 of gestures, and indicate what actions are enabled and disabled.</p>
diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd
index a66509757b20..2f8e91b1a377 100644
--- a/docs/html/design/style/typography.jd
+++ b/docs/html/design/style/typography.jd
@@ -9,7 +9,17 @@ page.metaDescription=How to use typography in your Android apps.
     <img src="{@docRoot}design/media/typography_main.png">
 
   </div>
-  <div class="layout-content-col span-5">
+
+<a class="notice-designers-material"
+  style="width: 278px;"
+  href="http://www.google.com/design/spec/style/typography.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Typography<p>
+  </div>
+</a>
+
+<div class="layout-content-col span-5">
 
 <p>
   <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');"