am b96ad49a: am c47369d7: am a53b3bfa: docs: Android Design downloads section, linkable H2s.
* commit 'b96ad49a3a898b741f7c4d6854e599116546e2ac':
docs: Android Design downloads section, linkable H2s.
diff --git a/docs/html/design/building-blocks/buttons.html b/docs/html/design/building-blocks/buttons.html
index cc43fcb..9f9652f9 100644
--- a/docs/html/design/building-blocks/buttons.html
+++ b/docs/html/design/building-blocks/buttons.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -110,7 +114,8 @@
<img src="../static/content/buttons_basic.png">
</div>
-<h2>Basic Buttons</h2>
+<h2 id="basic">Basic Buttons</h2>
+
<p>Basic buttons are traditional buttons with borders and background. Android supports two styles for
basic buttons: default and small. Default buttons have slightly larger font size and are optimized
for display outside of form content. Small buttons are intended for display alongside other content.
@@ -131,7 +136,8 @@
</div>
</div>
-<h2>Borderless Buttons</h2>
+<h2 id="borderless">Borderless Buttons</h2>
+
<p>Borderless buttons resemble basic buttons except that they have no borders or background. You can
use borderless buttons with both icons and text. Borderless buttons are visually more lightweight
than basic buttons and integrate nicely with other content.</p>
diff --git a/docs/html/design/building-blocks/dialogs.html b/docs/html/design/building-blocks/dialogs.html
index fc00780..f03a57a 100644
--- a/docs/html/design/building-blocks/dialogs.html
+++ b/docs/html/design/building-blocks/dialogs.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/building-blocks/grid-lists.html b/docs/html/design/building-blocks/grid-lists.html
index b4cfdcb..3f60216 100644
--- a/docs/html/design/building-blocks/grid-lists.html
+++ b/docs/html/design/building-blocks/grid-lists.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -159,7 +163,7 @@
</div>
-<h2 id="with_labels">Grid List with Labels</h2>
+<h2 id="with-labels">Grid List with Labels</h2>
<p>Use labels to display additional contextual information for your grid list items.</p>
diff --git a/docs/html/design/building-blocks/index.html b/docs/html/design/building-blocks/index.html
index c99d85c..029cabf 100644
--- a/docs/html/design/building-blocks/index.html
+++ b/docs/html/design/building-blocks/index.html
@@ -93,6 +93,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/building-blocks/lists.html b/docs/html/design/building-blocks/lists.html
index 914ae9e..dfd13d9 100644
--- a/docs/html/design/building-blocks/lists.html
+++ b/docs/html/design/building-blocks/lists.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/building-blocks/pickers.html b/docs/html/design/building-blocks/pickers.html
index 4c95a9f..fc9989c 100644
--- a/docs/html/design/building-blocks/pickers.html
+++ b/docs/html/design/building-blocks/pickers.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -123,7 +127,7 @@
</div>
</div>
-<h2>Date and time pickers</h2>
+<h2 id="date-time">Date and time pickers</h2>
<p>Android provides these as ready-to-use dialogs. Each picker is a dialog with a set of controls for
entering the parts of the date (month, day, year) or time (hour, minute, AM/PM). Using these in your
diff --git a/docs/html/design/building-blocks/progress.html b/docs/html/design/building-blocks/progress.html
index 7aae913..32183bc 100644
--- a/docs/html/design/building-blocks/progress.html
+++ b/docs/html/design/building-blocks/progress.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -105,7 +109,8 @@
<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>Progress</h2>
+<h2 id="progress">Progress</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>
diff --git a/docs/html/design/building-blocks/scrolling.html b/docs/html/design/building-blocks/scrolling.html
index 3f1167c..3599a97 100644
--- a/docs/html/design/building-blocks/scrolling.html
+++ b/docs/html/design/building-blocks/scrolling.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -104,7 +108,8 @@
<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>Scroll Indicator</h2>
+<h2 id="indicator">Scroll Indicator</h2>
+
<p>Appears during scrolling to indicate what portion of the content is currently in view.</p>
<div class="framed-galaxynexus-land-span-13">
@@ -118,7 +123,8 @@
<div class="video-instructions"> </div>
</div>
-<h2>Index Scrolling</h2>
+<h2 id="index-scrolling">Index Scrolling</h2>
+
<p>In addition to traditional scrolling, a long alphabetical list can also offer index scrolling: a way
to quickly navigate to the items that begin with a particular letter. With index scrolling, a scroll
indicator appears even when the user isn't scrolling. Touching or dragging it causes the current
diff --git a/docs/html/design/building-blocks/seek-bars.html b/docs/html/design/building-blocks/seek-bars.html
index 84cf5d2..aef1823 100644
--- a/docs/html/design/building-blocks/seek-bars.html
+++ b/docs/html/design/building-blocks/seek-bars.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/building-blocks/spinners.html b/docs/html/design/building-blocks/spinners.html
index bf21fe8..5ef9d04 100644
--- a/docs/html/design/building-blocks/spinners.html
+++ b/docs/html/design/building-blocks/spinners.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/building-blocks/switches.html b/docs/html/design/building-blocks/switches.html
index 3d7bc9c..09af540 100644
--- a/docs/html/design/building-blocks/switches.html
+++ b/docs/html/design/building-blocks/switches.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -104,7 +108,8 @@
<p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
buttons, and on/off switches.</p>
-<h2>Checkboxes</h2>
+<h2 id="checkboxes">Checkboxes</h2>
+
<p>Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to
turn an option off or on. Instead, use an on/off switch.</p>
@@ -112,7 +117,8 @@
<img src="../static/content/switches_checkboxes.png">
</div>
-<h2>Radio Buttons</h2>
+<h2 id="radio-buttons">Radio Buttons</h2>
+
<p>Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive
selection if you think that the user needs to see all available options side-by-side. Otherwise,
consider a spinner, which uses less space.</p>
@@ -121,7 +127,8 @@
<img src="../static/content/switches_radios.png">
</div>
-<h2>On/off Switches</h2>
+<h2 id="switches">On/off Switches</h2>
+
<p>On/off switches toggle the state of a single settings option.</p>
<div style="text-align: center">
diff --git a/docs/html/design/building-blocks/tabs.html b/docs/html/design/building-blocks/tabs.html
index c094cce..d4b0e52 100644
--- a/docs/html/design/building-blocks/tabs.html
+++ b/docs/html/design/building-blocks/tabs.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/building-blocks/text-fields.html b/docs/html/design/building-blocks/text-fields.html
index 6496fa5..b9ec42d 100644
--- a/docs/html/design/building-blocks/text-fields.html
+++ b/docs/html/design/building-blocks/text-fields.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -141,7 +145,7 @@
</div>
</div>
-<h2>Text Selection</h2>
+<h2 id="text-selection">Text Selection</h2>
<p>Users can select any word in a text field with a long press. This action triggers a text selection
mode that facilitates extending the selection or choosing an action to perform on the selected text.
diff --git a/docs/html/design/downloads/index.html b/docs/html/design/downloads/index.html
new file mode 100644
index 0000000..f910b29
--- /dev/null
+++ b/docs/html/design/downloads/index.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>
+
+Android Design - Downloads
+ </title>
+ <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
+ <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
+ <link rel="stylesheet" href="../static/default.css">
+
+ </head>
+ <body>
+
+ <div id="page-container">
+
+ <div id="page-header"><a href="../index.html">Android Design</a></div>
+
+ <div id="main-row">
+
+ <ul id="nav">
+
+ <li class="nav-section">
+ <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
+ <ul>
+ <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
+ <li><a href="../get-started/principles.html">Design Principles</a></li>
+ <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
+ </ul>
+ </li>
+
+ <li class="nav-section">
+ <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
+ <ul>
+ <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
+ <li><a href="../style/themes.html">Themes</a></li>
+ <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
+ <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
+ <li><a href="../style/typography.html">Typography</a></li>
+ <li><a href="../style/color.html">Color</a></li>
+ <li><a href="../style/iconography.html">Iconography</a></li>
+ <li><a href="../style/writing.html">Writing Style</a></li>
+ </ul>
+ </li>
+
+ <li class="nav-section">
+ <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
+ <ul>
+ <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
+ <li><a href="../patterns/gestures.html">Gestures</a></li>
+ <li><a href="../patterns/app-structure.html">App Structure</a></li>
+ <li><a href="../patterns/navigation.html">Navigation</a></li>
+ <li><a href="../patterns/actionbar.html">Action Bar</a></li>
+ <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
+ <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
+ <li><a href="../patterns/selection.html">Selection</a></li>
+ <li><a href="../patterns/notifications.html">Notifications</a></li>
+ <li><a href="../patterns/compatibility.html">Compatibility</a></li>
+ <li><a href="../patterns/pure-android.html">Pure Android</a></li>
+ </ul>
+ </li>
+
+ <li class="nav-section">
+ <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
+ <ul>
+ <li><a href="../building-blocks/tabs.html">Tabs</a></li>
+ <li><a href="../building-blocks/lists.html">Lists</a></li>
+ <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
+ <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
+ <li><a href="../building-blocks/spinners.html">Spinners</a></li>
+ <li><a href="../building-blocks/buttons.html">Buttons</a></li>
+ <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
+ <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
+ <li><a href="../building-blocks/progress.html">Progress & Activity</a></li>
+ <li><a href="../building-blocks/switches.html">Switches</a></li>
+ <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
+ <li><a href="../building-blocks/pickers.html">Pickers</a></li>
+ </ul>
+ </li>
+
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
+ <li>
+ <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
+ </li>
+
+ </ul>
+
+ <div id="content">
+
+
+ <div class="layout-content-row content-header">
+ <div class="layout-content-col span-9">
+ <h2>Downloads</h2>
+ </div>
+ <div class="paging-links layout-content-col span-4">
+ <a href="#" class="prev-page-link">Previous</a>
+ <a href="#" class="next-page-link">Next</a>
+ </div>
+ </div>
+
+
+
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-9">
+
+<p>Want everything? We've bundled all the downloads available on Android Design into a single ZIP file.
+You can also download individual files listed below.</p>
+<p>You may use these materials without restriction in your apps and to develop your apps.</p>
+
+ </div>
+ <div class="layout-content-col span-4">
+
+<p>
+ <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Downloads_20120229.zip">Download All</a>
+</p>
+
+ </div>
+</div>
+
+<h2 id="stencils">Stencils and Sources</h2>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-5">
+
+<p>Drag and drop your way to beautifully designed Ice Cream Sandwich apps. The stencils feature the
+rich typography, colors, interactive controls, and icons found throughout Android 4.0, along with
+phone and tablet outlines to frame your creations. Source files for icons and controls are also
+available.</p>
+
+ </div>
+ <div class="layout-content-col span-4">
+
+ <img src="../static/content/downloads_stencils.png">
+
+ </div>
+ <div class="layout-content-col span-4">
+
+<p>
+ <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Fireworks_Stencil_20120229.png">Adobe® Fireworks® PNG Stencil</a>
+ <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_OmniGraffle_Stencil_20120229.graffle">Omni® OmniGraffle® Stencil</a>
+ <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120229.zip">Adobe® Photoshop® Sources</a>
+</p>
+
+ </div>
+</div>
+
+<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-5">
+
+<p>Action bar icons are graphic buttons that represent the most important actions people can take
+within your app. <a href="../style/iconography.html">More on Action Bar Iconography</a></p>
+<p>The download package includes icons that are scaled for various screen densities and suitable for
+use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can
+modify to match your theme, plus source files.</p>
+
+ </div>
+ <div class="layout-content-col span-4">
+
+ <img src="../static/content/iconography_actionbar_style.png">
+
+ </div>
+ <div class="layout-content-col span-4">
+
+<p>
+ <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Action Bar Icon Pack</a>
+</p>
+
+ </div>
+</div>
+
+<h2 id="style">Style</h2>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-5">
+
+<h4>Roboto</h4>
+<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
+requirements of UI and high-resolution screens.</p>
+<p><a href="../style/typography.html#actionbar">More on Roboto</a></p>
+
+ </div>
+ <div class="layout-content-col span-4">
+
+ <img src="../static/content/downloads_roboto_specimen_preview.png">
+
+ </div>
+ <div class="layout-content-col span-4">
+
+<p>
+ <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Roboto</a>
+ <a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a>
+</p>
+
+ </div>
+</div>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-5">
+
+<h4>Color</h4>
+<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
+shade that can be used as a complement when needed.</p>
+<p><a href="../style/color.html">More on Color</a></p>
+
+ </div>
+ <div class="layout-content-col span-4">
+
+ <img src="../static/content/downloads_color_swatches.png">
+
+ </div>
+ <div class="layout-content-col span-4">
+
+<p>
+ <a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a>
+</p>
+
+ </div>
+</div>
+
+
+
+
+ <div class="layout-content-row content-footer">
+ <div class="paging-links layout-content-col span-9"> </div>
+ <div class="paging-links layout-content-col span-4">
+ <a href="#" class="prev-page-link">Previous</a>
+ <a href="#" class="next-page-link">Next</a>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+ <div id="page-footer">
+
+ <p id="copyright">
+ Except as noted, this content is licensed under
+ <a href="http://creativecommons.org/licenses/by/2.5/">
+ Creative Commons Attribution 2.5</a>.<br>
+ For details and restrictions, see the
+ <a href="http://developer.android.com/license.html">Content License</a>.
+ </p>
+
+ <p>
+ <a href="http://www.android.com/terms.html">Site Terms of Service</a> –
+ <a href="http://www.android.com/privacy.html">Privacy Policy</a> –
+ <a href="http://www.android.com/branding.html">Brand Guidelines</a>
+ </p>
+
+ </div>
+ </div>
+
+ <script src="../static/jquery-1.6.2.min.js"></script>
+ <script>
+ var SITE_ROOT = '../';
+ </script>
+ <script src="../static/default.js"></script>
+
+
+ <script type="text/javascript">
+ var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+ document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+ </script>
+ <script type="text/javascript">
+ var pageTracker = _gat._getTracker("UA-5831155-1");
+ pageTracker._trackPageview();
+ </script>
+ </body>
+</html>
diff --git a/docs/html/design/get-started/creative-vision.html b/docs/html/design/get-started/creative-vision.html
index 11783c4..154f8d0 100644
--- a/docs/html/design/get-started/creative-vision.html
+++ b/docs/html/design/get-started/creative-vision.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/get-started/principles.html b/docs/html/design/get-started/principles.html
index 0d9ef20..f10a90d 100644
--- a/docs/html/design/get-started/principles.html
+++ b/docs/html/design/get-started/principles.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -106,7 +110,7 @@
best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate
with purpose.</p>
-<h2>Enchant Me</h2>
+<h2 id="enchant-me">Enchant Me</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
@@ -176,7 +180,7 @@
</div>
</div>
-<h2>Simplify My Life</h2>
+<h2 id="simplify-my-life">Simplify My Life</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
@@ -312,7 +316,7 @@
</div>
</div>
-<h2>Make Me Amazing</h2>
+<h2 id="make-me-amazing">Make Me Amazing</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
diff --git a/docs/html/design/get-started/ui-overview.html b/docs/html/design/get-started/ui-overview.html
index bd5ff9c..a4881d5 100644
--- a/docs/html/design/get-started/ui-overview.html
+++ b/docs/html/design/get-started/ui-overview.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -109,7 +113,7 @@
in your app.</p>
<p>Read on for a quick overview of the most important aspects of the Android user interface.</p>
-<h2>Home, All Apps, and Recents</h2>
+<h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2>
<div class="vspace size-1"> </div>
@@ -153,7 +157,7 @@
</div>
</div>
-<h2>System Bars</h2>
+<h2 id="system-bars">System Bars</h2>
<p>The system bars are screen areas dedicated to the display of notifications, communication of device
status, and device navigation. Typically the system bars are displayed concurrently with your app.
@@ -185,7 +189,7 @@
</div>
-<h2>Notifications</h2>
+<h2 id="notifications">Notifications</h2>
<p>Notifications are brief messages that users can access at any time from the status bar. They
provide updates, reminders, or information that's important, but not critical enough to warrant
diff --git a/docs/html/design/index.html b/docs/html/design/index.html
index 14d7b63..8583aa4 100644
--- a/docs/html/design/index.html
+++ b/docs/html/design/index.html
@@ -93,6 +93,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/patterns/actionbar.html b/docs/html/design/patterns/actionbar.html
index 911c549..1566d04 100644
--- a/docs/html/design/patterns/actionbar.html
+++ b/docs/html/design/patterns/actionbar.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -118,7 +122,8 @@
<p>If you're new to writing Android apps, note that the action bar is one of the most important design
elements you can implement. Following the guidelines described here will go a long way toward making
your app's interface consistent with the core Android apps.</p>
-<h2>General Organization</h2>
+<h2 id="organization">General Organization</h2>
+
<p>The action bar is split into four different functional areas that apply to most apps.</p>
<img src="../static/content/action_bar_basics.png">
@@ -129,8 +134,8 @@
<li class="value-1"><h4>App icon</h4>
<p>
-The app icon establishes your app's identity. It can be replaced with a different logo or branding if
-you wish.
+The app icon establishes your app's identity. It can be replaced with a different logo or branding
+if you wish.
Important: If the app is currently not displaying the top-level screen, be sure to display the Up
caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of
Up navigation, see the <a href="../patterns/navigation.html">Navigation</a> pattern.
@@ -180,12 +185,11 @@
</p>
</li>
</ol>
-
</div>
</div>
+<h2 id="adapting-rotation">Adapting to Rotation and Different Screen Sizes</h2>
-<h2>Adapting to Rotation and Different Screen Sizes</h2>
<p>One of the most important UI issues to consider when creating an app is how to adjust to screen
rotation on different screen sizes.</p>
<p>You can adapt to such changes by using <em>split action bars</em>, which allow you to distribute action bar
@@ -196,7 +200,7 @@
Split action bar showing action buttons at the bottom of the screen in vertical orientation.
</div>
-<h2>Layout Considerations for Split Action Bars</h2>
+<h2 id="considerations-split-action-bars">Layout Considerations for Split Action Bars</h2>
<div class="layout-content-row">
<div class="layout-content-col span-8 with-callouts">
@@ -222,7 +226,8 @@
</div>
</div>
-<h2>Contextual Action Bars</h2>
+<h2 id="contextual">Contextual Action Bars</h2>
+
<p>A <em>contextual action bar (CAB)</em> is a temporary action bar that overlays the app's action bar for the
duration of a particular sub-task. CABs are most typically used for tasks that involve acting on
selected data or text.</p>
@@ -244,7 +249,8 @@
<p>Use CABs whenever you allow the user to select data via long press. You can control the action
content of a CAB in order to insert the actions you would like the user to be able to perform.</p>
<p>For more information, refer to the "Selection" pattern.</p>
-<h2>Action Bar Elements</h2>
+<h2 id="elements">Action Bar Elements</h2>
+
<h4>Tabs</h4>
<p><em>Tabs</em> display app views concurrently and make it easy to explore and switch between them. Use tabs
if you expect your users to switch views frequently.</p>
@@ -326,7 +332,9 @@
<p><em>Action buttons</em> on the action bar surface your app's most important activities. Think about which
buttons will get used most often, and order them accordingly. Depending on available screen real
estate, the system shows your most important actions as action buttons and moves the rest to the
-action overflow.</p>
+action overflow. The action bar and the action overflow should only present actions to the user that
+are available. If an action is unavailable in the current context, hide it. Do not show it as
+disabled.</p>
<img src="../static/content/action_bar_pattern_action_icons.png">
<div class="figure-caption">
@@ -380,8 +388,7 @@
</p>
<p>
-<a href="../static/download/action_bar_icons-v4.0.zip">Download the Action Bar Icon
-Pack</a>
+<a href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Download the Action Bar Icon Pack</a>
</p>
@@ -436,7 +443,8 @@
The Gallery app's share action provider with extended spinner for additional sharing options.
</div>
-<h2>Action Bar Checklist</h2>
+<h2 id="checklist">Action Bar Checklist</h2>
+
<p>When planning your split action bars, ask yourself questions like these:</p>
<h4>How important is view navigation to the task?</h4>
<p>If view navigation is very important to your app, use tabs (for fastest view-switching) or spinners.</p>
diff --git a/docs/html/design/patterns/app-structure.html b/docs/html/design/patterns/app-structure.html
index fb9205b..1b48280 100644
--- a/docs/html/design/patterns/app-structure.html
+++ b/docs/html/design/patterns/app-structure.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -111,7 +115,8 @@
<li>Apps such as Gmail or Market that combine a broad set of data views with deep navigation</li>
</ul>
<p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p>
-<h2>General Structure</h2>
+<h2 id="general-structure">General Structure</h2>
+
<p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is
deep and complex, category views connect top level and detail views.</p>
@@ -139,7 +144,8 @@
</div>
</div>
-<h2>Top Level</h2>
+<h2 id="top-level">Top Level</h2>
+
<p>The layout of your start screen requires special attention. This is the first screen people see
after launching your app, so it should be an equally rewarding experience for new and frequent
visitors alike.</p>
@@ -219,7 +225,8 @@
</div>
</div>
-<h2>Categories</h2>
+<h2 id="categories">Categories</h2>
+
<p>Generally, the purpose of a deep, data-driven app is to navigate through organizational categories
to the detail level, where data can be viewed and managed. Minimize perceived navigation effort by
keeping your apps shallow.</p>
@@ -281,7 +288,8 @@
delete multiple items in the category view. Analyze which detail view actions are applicable to
collections of items. Then use multi-select to allow application of those actions to multiple items
in a category view.</p>
-<h2>Details</h2>
+<h2 id="details">Details</h2>
+
<p>The detail view allows you to view and act on your data. The layout of the detail view depends on
the data type being displayed, and therefore differs widely among apps.</p>
@@ -330,7 +338,8 @@
filmstrip control that lets people quickly jump to specific images.
</div>
-<h2>Checklist</h2>
+<h2 id="checklist">Checklist</h2>
+
<ul>
<li>
<p>Find ways to display useful content on your start screen.</p>
diff --git a/docs/html/design/patterns/compatibility.html b/docs/html/design/patterns/compatibility.html
index f18c62d..d6e59f5 100644
--- a/docs/html/design/patterns/compatibility.html
+++ b/docs/html/design/patterns/compatibility.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -110,7 +114,7 @@
</ul>
<p>Android 4.0 brings these changes for tablets to the phone platform.</p>
-<h2>Adapting Android 4.0 to Older Hardware and Apps</h2>
+<h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2>
<div class="layout-content-row">
<div class="layout-content-col span-6">
diff --git a/docs/html/design/patterns/gestures.html b/docs/html/design/patterns/gestures.html
index f8585e4..c88817f 100644
--- a/docs/html/design/patterns/gestures.html
+++ b/docs/html/design/patterns/gestures.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/patterns/index.html b/docs/html/design/patterns/index.html
index ff797db..863baa9 100644
--- a/docs/html/design/patterns/index.html
+++ b/docs/html/design/patterns/index.html
@@ -93,6 +93,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/patterns/multi-pane-layouts.html b/docs/html/design/patterns/multi-pane-layouts.html
index af05e31..7925c98 100644
--- a/docs/html/design/patterns/multi-pane-layouts.html
+++ b/docs/html/design/patterns/multi-pane-layouts.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -108,7 +112,8 @@
<p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into
one compound view when a lot of horizontal screen real estate is available and by splitting them up
when less space is available.</p>
-<h2>Combining Multiple Views Into One</h2>
+<h2 id="combining-views">Combining Multiple Views Into One</h2>
+
<p>On smaller devices your content is typically divided into a master grid or list view and a detail
view. Touching an item in the master view opens a different screen showing that item's detail
information.</p>
@@ -124,7 +129,8 @@
<p>In general, use the pane on the right to present more information about the item you selected in the
left pane. Make sure to keep the item in the left pane selected in order to establish the
relationship between the panels.</p>
-<h2>Compound Views and Orientation Changes</h2>
+<h2 id="orientation">Compound Views and Orientation Changes</h2>
+
<p>Screens should have the same functionality regardless of orientation. If you use a compound view in
one orientation, don't split it up when the user rotates the screen. There are several techniques
you can use to adjust the layout after orientation change while keeping functional parity intact.</p>
@@ -189,7 +195,8 @@
</div>
</div>
-<h2>Checklist</h2>
+<h2 id="checklist">Checklist</h2>
+
<ul>
<li>
<p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p>
diff --git a/docs/html/design/patterns/navigation.html b/docs/html/design/patterns/navigation.html
index cad3682..6287b5e 100644
--- a/docs/html/design/patterns/navigation.html
+++ b/docs/html/design/patterns/navigation.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -112,7 +116,8 @@
<img src="../static/content/navigation_with_back_and_up.png">
-<h2>Up vs. Back</h2>
+<h2 id="up-vs-back">Up vs. Back</h2>
+
<p>The Up button is used to navigate within an application based on the hierarchical relationships
between screens. For instance, if screen A displays a list of items, and selecting an item leads to
screen B (which presents that item in more detail), then screen B should offer an Up button that
@@ -134,7 +139,8 @@
<li>Back dismisses contextual action bars, and removes the highlight from the selected items</li>
<li>Back hides the onscreen keyboard (IME)</li>
</ul>
-<h2>Navigation Within Your App</h2>
+<h2 id="within-app">Navigation Within Your App</h2>
+
<h4>Navigating to screens with multiple entry points</h4>
<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached
from multiple entry points—e.g., a settings screen which can be navigated to from any screen
@@ -176,7 +182,8 @@
<img src="../static/content/navigation_between_siblings_market2.png">
-<h2>Navigation From Outside Your App</h2>
+<h2 id="from-outside">Navigation From Outside Your App</h2>
+
<p>There are two categories of navigation from outside your app to screens deep within the app's
hierarchy:</p>
<ul>
diff --git a/docs/html/design/patterns/new-4-0.html b/docs/html/design/patterns/new-4-0.html
index 272b079..2e2cbc2 100644
--- a/docs/html/design/patterns/new-4-0.html
+++ b/docs/html/design/patterns/new-4-0.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/patterns/notifications.html b/docs/html/design/patterns/notifications.html
index c5045ae..99af418 100644
--- a/docs/html/design/patterns/notifications.html
+++ b/docs/html/design/patterns/notifications.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -173,7 +177,7 @@
</div>
</div>
-<h2>Design Guidelines</h2>
+<h2 id="design-guidelines">Design Guidelines</h2>
<div class="layout-content-row">
<div class="layout-content-col span-6">
@@ -269,7 +273,7 @@
<li>Use color to distinguish your app from others. Notification icons should generally be monochrome.</li>
</ul>
-<h2>Interacting With Notifications</h2>
+<h2 id="interacting-with-notifications">Interacting With Notifications</h2>
<div class="layout-content-row">
<div class="layout-content-col span-6">
diff --git a/docs/html/design/patterns/pure-android.html b/docs/html/design/patterns/pure-android.html
index 507558a..f5a8042 100644
--- a/docs/html/design/patterns/pure-android.html
+++ b/docs/html/design/patterns/pure-android.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -227,7 +231,7 @@
</div>
</div>
-<h2>Device Independence</h2>
+<h2 id="device-independence">Device Independence</h2>
<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets
for different screen sizes and densities and make use of concepts such as multi-pane layouts to
diff --git a/docs/html/design/patterns/selection.html b/docs/html/design/patterns/selection.html
index 37dcab5..44c6a84 100644
--- a/docs/html/design/patterns/selection.html
+++ b/docs/html/design/patterns/selection.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -180,7 +184,8 @@
</div>
</div>
-<h2>Checklist</h2>
+<h2 id="checklist">Checklist</h2>
+
<ul>
<li>
<p>Whenever your app supports the selection of multiple data items, make use of the contextual action
diff --git a/docs/html/design/patterns/swipe-views.html b/docs/html/design/patterns/swipe-views.html
index 4e8cd03..acc9f39 100644
--- a/docs/html/design/patterns/swipe-views.html
+++ b/docs/html/design/patterns/swipe-views.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -107,7 +111,8 @@
vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views
allow the user to efficiently move from item to item using a simple gesture and thereby make
browsing and consuming data a more fluent experience.</p>
-<h2>Swiping Between Detail Views</h2>
+<h2 id="detail-views">Swiping Between Detail Views</h2>
+
<p>An app's data is often organized in a master/detail relationship: The user can view a list of
related data items, such as images, chats, or emails, and then pick one of the items to see the
detail contents in a separate screen.</p>
@@ -127,7 +132,7 @@
Navigating between consecutive Email messages using the swipe gesture.
</div>
-<h2>Swiping Between Tabs</h2>
+<h2 id="between-tabs">Swiping Between Tabs</h2>
<div class="layout-content-row">
<div class="layout-content-col span-5">
@@ -150,7 +155,8 @@
<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p>
<div class="vspace size-2"> </div>
-<h2>Checklist</h2>
+<h2 id="checklist">Checklist</h2>
+
<ul>
<li>
<p>Use swipe to quickly navigate between detail views or tabs.</p>
diff --git a/docs/html/design/static/content/downloads_color_swatches.png b/docs/html/design/static/content/downloads_color_swatches.png
new file mode 100644
index 0000000..af2b24f
--- /dev/null
+++ b/docs/html/design/static/content/downloads_color_swatches.png
Binary files differ
diff --git a/docs/html/design/static/content/downloads_roboto_specimen_preview.png b/docs/html/design/static/content/downloads_roboto_specimen_preview.png
new file mode 100644
index 0000000..2954cbf
--- /dev/null
+++ b/docs/html/design/static/content/downloads_roboto_specimen_preview.png
Binary files differ
diff --git a/docs/html/design/static/content/downloads_stencils.png b/docs/html/design/static/content/downloads_stencils.png
new file mode 100644
index 0000000..9e09319
--- /dev/null
+++ b/docs/html/design/static/content/downloads_stencils.png
Binary files differ
diff --git a/docs/html/design/static/default.css b/docs/html/design/static/default.css
index 42ab527..3aa1db3 100644
--- a/docs/html/design/static/default.css
+++ b/docs/html/design/static/default.css
@@ -3,8 +3,8 @@
/* clearfix idiom */
/* common mixins */
/* page layout + top-level styles */
-::-moz-selection,
::-webkit-selection,
+::-moz-selection,
::selection {
background-color: #0099cc;
color: #fff; }
@@ -256,6 +256,8 @@
position: absolute;
top: 10px;
right: 10px; }
+ #nav .nav-section-header.empty:after {
+ display: none; }
#nav li.expanded .nav-section-header {
background: rgba(0, 0, 0, 0.05); }
#nav li.expanded .nav-section-header:after {
@@ -268,9 +270,9 @@
overflow: hidden;
margin-bottom: 0; }
#nav > li > ul.animate-height {
- transition: height 0.25s ease-in;
-webkit-transition: height 0.25s ease-in;
- -moz-transition: height 0.25s ease-in; }
+ -moz-transition: height 0.25s ease-in;
+ transition: height 0.25s ease-in; }
#nav > li > ul li {
padding: 10px 10px 11px 10px; }
#nav > li.expanded > ul {
@@ -330,6 +332,39 @@
margin-left: 5px; }
/* content body */
+@-webkit-keyframes glowheader {
+ from {
+ background-color: #33b5e5;
+ color: #000;
+ border-bottom-color: #000; }
+
+ to {
+ background-color: transparent;
+ color: #33b5e5;
+ border-bottom-color: #33b5e5; } }
+
+@-moz-keyframes glowheader {
+ from {
+ background-color: #33b5e5;
+ color: #000;
+ border-bottom-color: #000; }
+
+ to {
+ background-color: transparent;
+ color: #33b5e5;
+ border-bottom-color: #33b5e5; } }
+
+@keyframes glowheader {
+ from {
+ background-color: #33b5e5;
+ color: #000;
+ border-bottom-color: #000; }
+
+ to {
+ background-color: transparent;
+ color: #33b5e5;
+ border-bottom-color: #33b5e5; } }
+
#content p,
#content ul,
#content ol,
@@ -345,6 +380,16 @@
color: #33b5e5;
border-bottom: 1px solid #33b5e5;
height: 30px; }
+ #content h2:target {
+ -webkit-animation-name: glowheader;
+ -moz-animation-name: glowheader;
+ animation-name: glowheader;
+ -webkit-animation-duration: 0.7s;
+ -moz-animation-duration: 0.7s;
+ animation-duration: 0.7s;
+ -webkit-animation-timing-function: ease-out;
+ -moz-animation-timing-function: ease-out;
+ animation-timing-function: ease-out; }
#content hr {
border: 0;
border-bottom: 1px solid #33b5e5;
@@ -569,3 +614,20 @@
margin-right: 8px; }
.video-instructions:after {
content: 'Click to replay movie.'; }
+
+/* download buttons */
+.download-button {
+ display: block;
+ margin-bottom: 5px;
+ text-decoration: none;
+ background-color: #33b5e5;
+ color: #fff !important;
+ font-weight: 500;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
+ padding: 6px 12px;
+ border-radius: 2px; }
+ .download-button:hover, .download-button:focus {
+ background-color: #0099cc;
+ color: #fff !important; }
+ .download-button:active {
+ background-color: #006699; }
diff --git a/docs/html/design/static/default.js b/docs/html/design/static/default.js
index 6721ab8..b213dd9 100644
--- a/docs/html/design/static/default.js
+++ b/docs/html/design/static/default.js
@@ -158,4 +158,12 @@
$tooltip.hide();
});
});
+
+ // Set up <h2> deeplinks
+ $('h2').click(function() {
+ var id = $(this).attr('id');
+ if (id) {
+ document.location.hash = id;
+ }
+ });
});
\ No newline at end of file
diff --git a/docs/html/design/static/download/RobotoSpecimenBook.pdf b/docs/html/design/static/download/RobotoSpecimenBook.pdf
deleted file mode 100644
index 594a366..0000000
--- a/docs/html/design/static/download/RobotoSpecimenBook.pdf
+++ /dev/null
Binary files differ
diff --git a/docs/html/design/static/download/Roboto_Hinted_20111129.zip b/docs/html/design/static/download/Roboto_Hinted_20111129.zip
deleted file mode 100644
index 3d3ab77..0000000
--- a/docs/html/design/static/download/Roboto_Hinted_20111129.zip
+++ /dev/null
Binary files differ
diff --git a/docs/html/design/static/download/action_bar_icons-v4.0.zip b/docs/html/design/static/download/action_bar_icons-v4.0.zip
deleted file mode 100644
index 4568894..0000000
--- a/docs/html/design/static/download/action_bar_icons-v4.0.zip
+++ /dev/null
Binary files differ
diff --git a/docs/html/design/static/download/color_swatches.zip b/docs/html/design/static/download/color_swatches.zip
deleted file mode 100644
index 0221d7b..0000000
--- a/docs/html/design/static/download/color_swatches.zip
+++ /dev/null
Binary files differ
diff --git a/docs/html/design/static/ico_styleguide.png b/docs/html/design/static/ico_styleguide.png
deleted file mode 100644
index c12907c..0000000
--- a/docs/html/design/static/ico_styleguide.png
+++ /dev/null
Binary files differ
diff --git a/docs/html/design/style/color.html b/docs/html/design/style/color.html
index 893e09e..bca3c45 100644
--- a/docs/html/design/style/color.html
+++ b/docs/html/design/style/color.html
@@ -173,6 +173,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -218,10 +222,11 @@
</ul>
</div>
-<h2>Palette</h2>
+<h2 id="palette">Palette</h2>
+
<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
shade that can be used as a complement when needed.</p>
-<p><a href="../static/download/color_swatches.zip">Download the swatches</a></p>
+<p><a href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Download the swatches</a></p>
<img src="../static/content/color_spectrum.png">
diff --git a/docs/html/design/style/devices-displays.html b/docs/html/design/style/devices-displays.html
index 9fba719..89e0876 100644
--- a/docs/html/design/style/devices-displays.html
+++ b/docs/html/design/style/devices-displays.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/style/iconography.html b/docs/html/design/style/iconography.html
index 5d5d200..96954de 100644
--- a/docs/html/design/style/iconography.html
+++ b/docs/html/design/style/iconography.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -191,7 +195,7 @@
</div>
-<h2 id="actionbar">Action Bar</h2>
+<h2 id="action-bar">Action Bar</h2>
<p>
@@ -211,8 +215,7 @@
</p>
<p>
-<a href="../static/download/action_bar_icons-v4.0.zip">Download the Action Bar Icon
-Pack</a>
+<a href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Download the Action Bar Icon Pack</a>
</p>
@@ -290,7 +293,7 @@
</div>
-<h2 id="small_contextual">Small / Contextual Icons</h2>
+<h2 id="small-contextual">Small / Contextual Icons</h2>
<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
diff --git a/docs/html/design/style/index.html b/docs/html/design/style/index.html
index 5ecbafa..c7ac58f 100644
--- a/docs/html/design/style/index.html
+++ b/docs/html/design/style/index.html
@@ -93,6 +93,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/style/metrics-grids.html b/docs/html/design/style/metrics-grids.html
index 17d4937..7bb9dd0 100644
--- a/docs/html/design/style/metrics-grids.html
+++ b/docs/html/design/style/metrics-grids.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -130,7 +134,7 @@
</div>
</div>
-<h2>48dp Rhythm</h2>
+<h2 id="48dp-rhythm">48dp Rhythm</h2>
<p>Touchable UI components are generally laid out along 48dp units.</p>
@@ -157,7 +161,7 @@
<h4>Mind the gaps</h4>
<p>Spacing between each UI element is 8dp.</p>
-<h2>Examples</h2>
+<h2 id="examples">Examples</h2>
<img src="../static/content/metrics_forms.png">
diff --git a/docs/html/design/style/themes.html b/docs/html/design/style/themes.html
index ada974d..a629978 100644
--- a/docs/html/design/style/themes.html
+++ b/docs/html/design/style/themes.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/style/touch-feedback.html b/docs/html/design/style/touch-feedback.html
index 0d49832..d1c08f8 100644
--- a/docs/html/design/style/touch-feedback.html
+++ b/docs/html/design/style/touch-feedback.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
diff --git a/docs/html/design/style/typography.html b/docs/html/design/style/typography.html
index d3cc769..d9b6d4b 100644
--- a/docs/html/design/style/typography.html
+++ b/docs/html/design/style/typography.html
@@ -80,6 +80,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -119,8 +123,8 @@
<img src="../static/content/typography_alphas.png">
-<p><a href="../static/download/Roboto_Hinted_20111129.zip">Download Roboto</a></p>
-<p><a href="../static/download/RobotoSpecimenBook.pdf">Specimen Book</a></p>
+<p><a href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Download Roboto</a></p>
+<p><a href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a></p>
</div>
</div>
diff --git a/docs/html/design/style/writing.html b/docs/html/design/style/writing.html
index e5f1ea8..146ce88 100644
--- a/docs/html/design/style/writing.html
+++ b/docs/html/design/style/writing.html
@@ -132,6 +132,10 @@
</ul>
</li>
+ <li class="nav-section">
+ <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
+ </li>
+
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
@@ -186,7 +190,7 @@
</li>
</ol>
-<h2>Examples</h2>
+<h2 id="examples">Examples</h2>
<ol><li class="value-1"><strong>Keep it brief.</strong> From the setup wizard:</ol>
