diff options
| author | Roman Nurik <romannurik@google.com> | 2012-02-29 11:59:32 -0800 |
|---|---|---|
| committer | Roman Nurik <romannurik@google.com> | 2012-02-29 12:15:32 -0800 |
| commit | a53b3bfaadd14aa325c6d6dc2542d7cbea66fc85 (patch) | |
| tree | ad7c32781c13eb6b4366a8aadcec8b3c9bfc789e /docs/html/design | |
| parent | f4994b3eb03e1e772d7d46e8b6dcfc88593db792 (diff) | |
| download | frameworks_base-a53b3bfaadd14aa325c6d6dc2542d7cbea66fc85.zip frameworks_base-a53b3bfaadd14aa325c6d6dc2542d7cbea66fc85.tar.gz frameworks_base-a53b3bfaadd14aa325c6d6dc2542d7cbea66fc85.tar.bz2 | |
docs: Android Design downloads section, linkable H2s.
Change-Id: I4ed3006117efd740ff5f3bc93df2ac75c2dfd2f9
Diffstat (limited to 'docs/html/design')
49 files changed, 588 insertions, 62 deletions
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 @@ Android Design - Buttons </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 @@ buttons</em>. Both can contain text labels and/or images.</p> <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 @@ align with other UI elements.</p> </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 @@ Android Design - Dialogs </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 @@ Android Design - Grid Lists </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 @@ navigation.</p> </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 @@ Android Design - Building Blocks </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 @@ Android Design - Lists </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 @@ Android Design - Pickers </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 @@ spinners.</p> </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 @@ Android Design - Progress and Activity </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 @@ Android Design - Progress and Activity <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 @@ Android Design - Scrolling </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 @@ Android Design - Scrolling <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 @@ scrolling speed is proportional to the speed of the gesture.</p> <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 @@ Android Design - Seek Bars and Sliders </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 @@ Android Design - Spinners </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 @@ Android Design - Switches </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 @@ Android Design - Switches <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 @@ turn an option off or on. Instead, use an on/off switch.</p> <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 @@ consider a spinner, which uses less space.</p> <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 @@ Android Design - Tabs </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 @@ Android Design - Text Fields </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 @@ can enter information more accurately and efficiently.</p> </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 @@ Android Design - Creative Vision </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 @@ Android Design - Design Principles </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 @@ Android Design - Design Principles 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 @@ over, place previous choices within easy reach.</p> </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 @@ focused, and unless it's critical and time-sensitive, an interruption can be tax </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 @@ Android Design - UI Overview </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 @@ enjoyable to use. At the end of this chapter we introduce the main elements for 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 @@ recently used app at the bottom.</p> </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 @@ to allow the user to enjoy full screen content without distraction.</p> </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 @@ Android Design - Welcome </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 @@ Android Design - Action Bar </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 @@ app.</p> <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 @@ your app's interface consistent with the core Android apps.</p> <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 @@ Move less often used actions to the action overflow. </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 @@ content across multiple bars located below the main action bar or at the bottom 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 @@ the top bar.</p> </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 @@ selected data or text.</p> <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 @@ tabs. Fixed tabs in the main action bar can move to the top bar when the screen <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 @@ files for further customization. </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 @@ sharing options.</p> 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 @@ Android Design - Application Structure </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 @@ Android Design - Application Structure <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 @@ facet of your app.</p> </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 @@ monotony of simple list views.</p> </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 @@ are often good reasons to act on collections of data as well.</p> 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 @@ to achieve this.</p> 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 @@ Android Design - Backwards Compatibility </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 @@ Android Design - Backwards Compatibility </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 @@ Android Design - Gestures </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 @@ Android Design - Design Patterns </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 @@ Android Design - Multi-pane Layouts </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 @@ layout by adjusting its content to varying screen sizes and orientations.</p> <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 @@ and makes navigating the app easier. </p> <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 @@ the content in the detail panel.</p> </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 @@ Android Design - Navigation with Back and Up </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 @@ the <em>Up</em> button, consisting of the app icon and a left-point caret.</p> <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 @@ return the user to the Home screen, or even to a different application.</p> <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 @@ which the user had not previously navigated through.</p> <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 @@ Android Design - New in Android 4.0 </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 @@ Android Design - Notifications </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 @@ develop a widget that they can choose to place on their home screen.</p> </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 @@ currently pending.</p> <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 @@ Android Design - Pure Android </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 @@ the platform and in order to not have the user guess as to what the meaning of t </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 @@ Android Design - Selection </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 @@ selected data items of the same kind.</p> </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 @@ Android Design - Swipe Views </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 @@ built in a hierarchical fashion, there are instances where horizontal navigation 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 @@ using the swipe gesture to navigate to the next/previous detail view.</p> 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 @@ using the swipe gesture to navigate to the next/previous detail view.</p> <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 Binary files differnew file mode 100644 index 0000000..af2b24f --- /dev/null +++ b/docs/html/design/static/content/downloads_color_swatches.png diff --git a/docs/html/design/static/content/downloads_roboto_specimen_preview.png b/docs/html/design/static/content/downloads_roboto_specimen_preview.png Binary files differnew file mode 100644 index 0000000..2954cbf --- /dev/null +++ b/docs/html/design/static/content/downloads_roboto_specimen_preview.png diff --git a/docs/html/design/static/content/downloads_stencils.png b/docs/html/design/static/content/downloads_stencils.png Binary files differnew file mode 100644 index 0000000..9e09319 --- /dev/null +++ b/docs/html/design/static/content/downloads_stencils.png 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 @@ video.with-shadow { 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 @@ video.with-shadow { 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 @@ video.with-shadow { 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 @@ video.with-shadow { 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 @@ li.no-bullet { 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 @@ $(document).ready(function() { $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 Binary files differdeleted file mode 100644 index 594a366..0000000 --- a/docs/html/design/static/download/RobotoSpecimenBook.pdf +++ /dev/null diff --git a/docs/html/design/static/download/Roboto_Hinted_20111129.zip b/docs/html/design/static/download/Roboto_Hinted_20111129.zip Binary files differdeleted file mode 100644 index 3d3ab77..0000000 --- a/docs/html/design/static/download/Roboto_Hinted_20111129.zip +++ /dev/null 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 Binary files differdeleted file mode 100644 index 4568894..0000000 --- a/docs/html/design/static/download/action_bar_icons-v4.0.zip +++ /dev/null diff --git a/docs/html/design/static/download/color_swatches.zip b/docs/html/design/static/download/color_swatches.zip Binary files differdeleted file mode 100644 index 0221d7b..0000000 --- a/docs/html/design/static/download/color_swatches.zip +++ /dev/null diff --git a/docs/html/design/static/ico_styleguide.png b/docs/html/design/static/ico_styleguide.png Binary files differdeleted file mode 100644 index c12907c..0000000 --- a/docs/html/design/static/ico_styleguide.png +++ /dev/null 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 @@ Android Design - Color </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 @@ between visual components. Note that red and green may be indistinguishable to c </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 @@ Android Design - Devices and Displays </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 @@ Android Design - Iconography </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 @@ from above, so that users perceive some depth.</p> </div> -<h2 id="actionbar">Action Bar</h2> +<h2 id="action-bar">Action Bar</h2> <p> @@ -211,8 +215,7 @@ files for further customization. </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 @@ Disabled: <strong>30%</strong> opacity</p> </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 @@ Android Design - Design Elements </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 @@ Android Design - Metrics and Grids </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 @@ Screen Sizes and Densities Device Dashboard</a>.</p> </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 @@ will be able to reliably and accurately target them with their fingers.</p> <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 @@ Android Design - Themes </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 @@ Android Design - Touch Feedback </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 @@ Android Design - Typography </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 @@ italic weights by default.</p> <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 @@ Android Design - Writing Style </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 @@ Android Design - Writing Style </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> |
