summaryrefslogtreecommitdiffstats
path: root/docs/html/design/style
diff options
context:
space:
mode:
Diffstat (limited to 'docs/html/design/style')
-rw-r--r--docs/html/design/style/color.html296
-rw-r--r--docs/html/design/style/color.jd134
-rw-r--r--docs/html/design/style/devices-displays.html202
-rw-r--r--docs/html/design/style/devices-displays.jd45
-rw-r--r--docs/html/design/style/iconography.jd (renamed from docs/html/design/style/iconography.html)201
-rw-r--r--docs/html/design/style/index.html175
-rw-r--r--docs/html/design/style/index.jd29
-rw-r--r--docs/html/design/style/metrics-grids.html218
-rw-r--r--docs/html/design/style/metrics-grids.jd61
-rw-r--r--docs/html/design/style/themes.html199
-rw-r--r--docs/html/design/style/themes.jd42
-rw-r--r--docs/html/design/style/touch-feedback.html224
-rw-r--r--docs/html/design/style/touch-feedback.jd67
-rw-r--r--docs/html/design/style/typography.html214
-rw-r--r--docs/html/design/style/typography.jd56
-rw-r--r--docs/html/design/style/writing.jd (renamed from docs/html/design/style/writing.html)165
16 files changed, 460 insertions, 1868 deletions
diff --git a/docs/html/design/style/color.html b/docs/html/design/style/color.html
deleted file mode 100644
index bca3c45..0000000
--- a/docs/html/design/style/color.html
+++ /dev/null
@@ -1,296 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
-
-Android Design - Color
- </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">
-
-<style>
- .color-row {
- width: 740px;
- margin-left: 10px !important;
- margin-right: 10px !important;
-
- display: box;
- display: -webkit-box;
- display: -moz-box;
-
- box-orient: horizontal;
- -webkit-box-orient: horizontal;
- -moz-box-orient: horizontal;
-
- cursor: pointer;
-
- user-select: none;
- -webkit-user-select: none;
- /* nested user-select in FF is broken as of Jan 2012, don't use it */
- }
-
- .color-row-container {
- line-height: 0; /* to remove more top space in FF for -moz-box elements */
- }
-
- .color-row-container + .color-row-container {
- margin-top: -10px !important;
- }
-
- .color-row li {
- margin-left: 0 !important;
- position: relative;
- list-style-type: none;
- height: 80px;
- display: block;
-
- box-flex: 1;
- -webkit-box-flex: 1;
- -moz-box-flex: 1;
- }
-
- .color-row li:before {
- display: none;
- }
-
- .color-row li.thin {
- height: 40px;
- }
-
- .color-row li span {
- display: none;
- position: absolute;
- top: -30px;
- left: 50%;
- margin-left: -2.5em;
- width: 5em;
- background-color: #fff;
- padding: 10px;
- font-weight: 600;
- line-height: 20px;
- text-align: center;
- box-shadow: 0 5px 5px rgba(0,0,0,0.1);
- cursor: text;
-
- user-select: text;
- -webkit-user-select: text;
- /* nested user-select in FF is broken as of Jan 2012, don't use it */
- }
-
- .color-row li:hover span {
- display: block;
- }
-
- /*.color-row li span:before {
- color: #999;
- content: 'copy ';
- }*/
-
- /* triangle callout */
- .color-row li span:after {
- content: '';
- display: block;
- position: absolute;
- left: 50%;
- bottom: -16px;
- border: 8px solid transparent;
- border-top-color: #fff;
- width: 0;
- height: 0;
- margin-left: -8px;
- }
-</style>
-
- </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 &amp; 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>Color</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>
-
-
-
-
-<p>Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast
-between visual components. Note that red and green may be indistinguishable to color-blind users.</p>
-
- <div class="color-row-container">
- <ul class="color-row">
- <li><span>#33b5e5</span></li>
- <li><span>#aa66cc</span></li>
- <li><span>#99cc00</span></li>
- <li><span>#ffbb33</span></li>
- <li><span>#ff4444</span></li>
- </ul>
- </div>
-
- <div class="color-row-container">
- <ul class="color-row">
- <li class="thin"><span>#0099cc</span></li>
- <li class="thin"><span>#9933cc</span></li>
- <li class="thin"><span>#669900</span></li>
- <li class="thin"><span>#ff8800</span></li>
- <li class="thin"><span>#cc0000</span></li>
- </ul>
- </div>
-
-<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="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">
-
-
-
-
- <div class="layout-content-row content-footer">
- <div class="paging-links layout-content-col span-9">&nbsp;</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> &ndash;
- <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
- <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>
- $(document).ready(function() {
- $('.color-row li').each(function() {
- var color = $(this).text();
- $(this).css('background-color', color);
- $(this).find('span')
- .css('color', color)
- .text(color.toUpperCase());
- });
-
- });
-</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/style/color.jd b/docs/html/design/style/color.jd
new file mode 100644
index 0000000..e25f7c6
--- /dev/null
+++ b/docs/html/design/style/color.jd
@@ -0,0 +1,134 @@
+page.title=Color
+@jd:body
+
+<style>
+ .color-row {
+ width: 740px;
+ margin-left: 10px !important;
+ margin-right: 10px !important;
+
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ box-orient: horizontal;
+
+ cursor: pointer;
+
+ -webkit-user-select: none;
+ user-select: none;
+ /* nested user-select in FF is broken as of Jan 2012, don't use it */
+ }
+
+ .color-row-container {
+ line-height: 0; /* to remove more top space in FF for -moz-box elements */
+ }
+
+ .color-row-container + .color-row-container {
+ margin-top: -10px !important;
+ }
+
+ .color-row li {
+ margin-left: 0 !important;
+ position: relative;
+ list-style-type: none;
+ height: 80px;
+ display: block;
+
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-flex: 1;
+ }
+
+ .color-row li:before {
+ display: none;
+ }
+
+ .color-row li.thin {
+ height: 40px;
+ }
+
+ .color-row li span {
+ display: none;
+ position: absolute;
+ top: -30px;
+ left: 50%;
+ margin-left: -2.5em;
+ width: 5em;
+ background-color: #fff;
+ padding: 10px;
+ font-weight: 600;
+ line-height: 20px;
+ text-align: center;
+ box-shadow: 0 5px 5px rgba(0,0,0,0.1);
+ cursor: text;
+
+ -webkit-user-select: text;
+ user-select: text;
+ /* nested user-select in FF is broken as of Jan 2012, don't use it */
+ }
+
+ .color-row li:hover span {
+ display: block;
+ }
+
+ /* triangle callout */
+ .color-row li span:after {
+ content: '';
+ display: block;
+ position: absolute;
+ left: 50%;
+ bottom: -16px;
+ border: 8px solid transparent;
+ border-top-color: #fff;
+ width: 0;
+ height: 0;
+ margin-left: -8px;
+ }
+</style>
+
+<p>Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast
+between visual components. Note that red and green may be indistinguishable to color-blind users.</p>
+
+ <div class="color-row-container">
+ <ul class="color-row">
+ <li><span>#33b5e5</span></li>
+ <li><span>#aa66cc</span></li>
+ <li><span>#99cc00</span></li>
+ <li><span>#ffbb33</span></li>
+ <li><span>#ff4444</span></li>
+ </ul>
+ </div>
+
+ <div class="color-row-container">
+ <ul class="color-row">
+ <li class="thin"><span>#0099cc</span></li>
+ <li class="thin"><span>#9933cc</span></li>
+ <li class="thin"><span>#669900</span></li>
+ <li class="thin"><span>#ff8800</span></li>
+ <li class="thin"><span>#cc0000</span></li>
+ </ul>
+ </div>
+
+<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="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Download the swatches</a></p>
+
+<img src="{@docRoot}design/media/color_spectrum.png">
+
+<script>
+ $(document).ready(function() {
+ $('.color-row li').each(function() {
+ var color = $(this).text();
+ $(this).css('background-color', color);
+ $(this).find('span')
+ .css('color', color)
+ .text(color.toUpperCase());
+ });
+
+ });
+</script>
diff --git a/docs/html/design/style/devices-displays.html b/docs/html/design/style/devices-displays.html
deleted file mode 100644
index 89e0876..0000000
--- a/docs/html/design/style/devices-displays.html
+++ /dev/null
@@ -1,202 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
-
-Android Design - Devices and Displays
- </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 &amp; 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>Devices and Displays</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>
-
-
-
-
-<p>Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and
-form factors. By taking advantage of Android's flexible layout system, you can create apps that
-gracefully scale from large tablets to smaller phones.</p>
-
-<img src="../static/content/devices_displays_main.png">
-
-<div class="vspace size-2">&nbsp;</div>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-4">
-
-<h4>Be flexible</h4>
-<p>Stretch and compress your layouts to accommodate various heights and widths.</p>
-
- </div>
- <div class="layout-content-col span-5">
-
-<h4>Optimize layouts</h4>
-<p>On larger devices, take advantage of extra screen real estate. Create compound views that combine
-multiple views to reveal more content and ease navigation.</p>
-
- </div>
- <div class="layout-content-col span-4">
-
-<h4>Assets for all</h4>
-<p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to
-ensure that your app looks great on any device.</p>
-
- </div>
-</div>
-
-<div style="text-align:center">
- <img src="../static/content/devices_displays_density.png">
-</div>
-
-<h4>Strategies</h4>
-<p>So where do you begin when designing for multiple screens? One approach is to work in the base
-standard (medium size, <acronym title="Medium density (160 dpi)">MDPI</acronym>) and scale it up or
-down for the other buckets. Another approach is to start with the device with the largest screen
-size, and then scale down and figure out the UI compromises you'll need to make on smaller screens.</p>
-<p>For more detailed information on this topic, please visit <a href="http://developer.android.com/guide/practices/screens_support.html">Supporting Multiple
-Screens</a>.</p>
-
-
-
-
- <div class="layout-content-row content-footer">
- <div class="paging-links layout-content-col span-9">&nbsp;</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> &ndash;
- <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
- <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/style/devices-displays.jd b/docs/html/design/style/devices-displays.jd
new file mode 100644
index 0000000..e5fe26d
--- /dev/null
+++ b/docs/html/design/style/devices-displays.jd
@@ -0,0 +1,45 @@
+page.title=Devices and Displays
+@jd:body
+
+<p>Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and
+form factors. By taking advantage of Android's flexible layout system, you can create apps that
+gracefully scale from large tablets to smaller phones.</p>
+
+<img src="{@docRoot}design/media/devices_displays_main.png">
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-4">
+
+<h4>Be flexible</h4>
+<p>Stretch and compress your layouts to accommodate various heights and widths.</p>
+
+ </div>
+ <div class="layout-content-col span-5">
+
+<h4>Optimize layouts</h4>
+<p>On larger devices, take advantage of extra screen real estate. Create compound views that combine
+multiple views to reveal more content and ease navigation.</p>
+
+ </div>
+ <div class="layout-content-col span-4">
+
+<h4>Assets for all</h4>
+<p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to
+ensure that your app looks great on any device.</p>
+
+ </div>
+</div>
+
+<div style="text-align:center">
+ <img src="{@docRoot}design/media/devices_displays_density.png">
+</div>
+
+<h4>Strategies</h4>
+<p>So where do you begin when designing for multiple screens? One approach is to work in the base
+standard (medium size, <acronym title="Medium density (160 dpi)">MDPI</acronym>) and scale it up or
+down for the other buckets. Another approach is to start with the device with the largest screen
+size, and then scale down and figure out the UI compromises you'll need to make on smaller screens.</p>
+<p>For more detailed information on this topic, please visit <a href="http://developer.android.com/guide/practices/screens_support.html">Supporting Multiple
+Screens</a>.</p>
diff --git a/docs/html/design/style/iconography.html b/docs/html/design/style/iconography.jd
index 0b2852e..775e45d 100644
--- a/docs/html/design/style/iconography.html
+++ b/docs/html/design/style/iconography.jd
@@ -1,112 +1,7 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
-
-Android Design - Iconography
- </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 &amp; 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>Iconography</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>
-
-
-
-
-<img src="../static/content/iconography_overview.png">
+page.title=Iconography
+@jd:body
+
+<img src="{@docRoot}design/media/iconography_overview.png">
<p>An icon is a graphic that takes up a small portion of screen real estate and provides a quick,
intuitive representation of an action, a status, or an app.</p>
@@ -122,17 +17,17 @@ any type of background.</p>
<div class="layout-content-row">
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_launcher_size.png">
+ <img src="{@docRoot}design/media/iconography_launcher_size.png">
</div>
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_launcher_focal.png">
+ <img src="{@docRoot}design/media/iconography_launcher_focal.png">
</div>
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_launcher_style.png">
+ <img src="{@docRoot}design/media/iconography_launcher_style.png">
</div>
</div>
@@ -177,7 +72,7 @@ from above, so that users perceive some depth.</p>
</div>
<div class="layout-content-col span-7">
- <img src="../static/content/iconography_launcher_example.png">
+ <img src="{@docRoot}design/media/iconography_launcher_example.png">
</div>
<!-- 2 free columns -->
@@ -186,7 +81,7 @@ from above, so that users perceive some depth.</p>
<div class="layout-content-row">
<div class="layout-content-col span-12">
- <img src="../static/content/iconography_launcher_example2.png">
+ <img src="{@docRoot}design/media/iconography_launcher_example2.png">
<div class="vspace size-2">&nbsp;</div>
@@ -222,17 +117,17 @@ files for further customization.
<div class="layout-content-row">
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_actionbar_size.png">
+ <img src="{@docRoot}design/media/iconography_actionbar_size.png">
</div>
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_actionbar_focal.png">
+ <img src="{@docRoot}design/media/iconography_actionbar_focal.png">
</div>
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_actionbar_style.png">
+ <img src="{@docRoot}design/media/iconography_actionbar_style.png">
</div>
</div>
@@ -287,7 +182,7 @@ Disabled: <strong>30%</strong> opacity</p>
</div>
<div class="layout-content-col span-9">
- <img src="../static/content/iconography_actionbar_colors.png">
+ <img src="{@docRoot}design/media/iconography_actionbar_colors.png">
</div>
</div>
@@ -303,17 +198,17 @@ important.</p>
<div class="layout-content-row">
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_small_size.png">
+ <img src="{@docRoot}design/media/iconography_small_size.png">
</div>
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_small_focal.png">
+ <img src="{@docRoot}design/media/iconography_small_focal.png">
</div>
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_small_style.png">
+ <img src="{@docRoot}design/media/iconography_small_style.png">
</div>
</div>
@@ -354,7 +249,7 @@ metaphor so that a user can easily recognize and understand its purpose.</p>
<div class="layout-content-row">
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_small_colors.png">
+ <img src="{@docRoot}design/media/iconography_small_colors.png">
<div class="vspace size-2">&nbsp;</div>
@@ -366,7 +261,7 @@ the background.</p>
</div>
<div class="layout-content-col span-7">
- <img src="../static/content/iconography_small_example.png">
+ <img src="{@docRoot}design/media/iconography_small_example.png">
</div>
<!-- 2 free columns -->
@@ -382,17 +277,17 @@ whenever a new notification is available.</p>
<div class="layout-content-row">
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_notification_size.png">
+ <img src="{@docRoot}design/media/iconography_notification_size.png">
</div>
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_notification_focal.png">
+ <img src="{@docRoot}design/media/iconography_notification_focal.png">
</div>
<div class="layout-content-col span-4">
- <img src="../static/content/iconography_notification_style.png">
+ <img src="{@docRoot}design/media/iconography_notification_style.png">
</div>
</div>
@@ -438,60 +333,8 @@ whenever a new notification is available.</p>
</div>
<div class="layout-content-col span-7">
- <img src="../static/content/iconography_notification_example.png">
+ <img src="{@docRoot}design/media/iconography_notification_example.png">
</div>
<!-- 2 free columns -->
</div>
-
-
-
-
- <div class="layout-content-row content-footer">
- <div class="paging-links layout-content-col span-9">&nbsp;</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> &ndash;
- <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
- <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/style/index.html b/docs/html/design/style/index.html
deleted file mode 100644
index c7ac58f..0000000
--- a/docs/html/design/style/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
-
-Android Design - Design Elements
- </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">
-
-<style>
-#landing-graphic-container {
- position: relative;
-}
-
-#text-overlay {
- position: absolute;
- left: 10px;
- top: 402px;
- width: 220px;
-}
-</style>
-
- </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 &amp; 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 just-links">
- <div class="layout-content-col span-9">&nbsp;</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 id="landing-graphic-container">
- <div id="text-overlay">
- Build visually compelling apps that look great on any device.
- <br><br>
- <a href="../style/devices-displays.html" class="landing-page-link">Devices and Displays</a>
- </div>
-
- <a href="../style/devices-displays.html">
- <img src="../static/content/design_elements_landing.png">
- </a>
-</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> &ndash;
- <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
- <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/style/index.jd b/docs/html/design/style/index.jd
new file mode 100644
index 0000000..d346aea
--- /dev/null
+++ b/docs/html/design/style/index.jd
@@ -0,0 +1,29 @@
+page.title=Style
+header.justLinks=1
+footer.hide=1
+@jd:body
+
+<style>
+#landing-graphic-container {
+ position: relative;
+}
+
+#text-overlay {
+ position: absolute;
+ left: 10px;
+ top: 402px;
+ width: 220px;
+}
+</style>
+
+<div id="landing-graphic-container">
+ <div id="text-overlay">
+ Build visually compelling apps that look great on any device.
+ <br><br>
+ <a href="{@docRoot}design/style/devices-displays.html" class="landing-page-link">Devices and Displays</a>
+ </div>
+
+ <a href="{@docRoot}design/style/devices-displays.html">
+ <img src="{@docRoot}design/media/design_elements_landing.png">
+ </a>
+</div>
diff --git a/docs/html/design/style/metrics-grids.html b/docs/html/design/style/metrics-grids.html
deleted file mode 100644
index 7bb9dd0..0000000
--- a/docs/html/design/style/metrics-grids.html
+++ /dev/null
@@ -1,218 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
-
-Android Design - Metrics and Grids
- </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 &amp; 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>Metrics and Grids</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>
-
-
-
-
-<p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per
-inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as
-falling into a particular size bucket and density bucket. The size buckets are <em>handset</em> (smaller than
-600<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi
-screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp). The density buckets are <acronym
-title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160
-dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, and <acronym title
-="Extra-high density (320 dpi)">XHDPI</acronym>. Optimize your application's UI by designing
-alternative layouts for some of the different size buckets, and provide alternative bitmap images
-for different density buckets.</p>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-8">
-
- <img src="../static/content/metrics_diagram.png">
-
- </div>
- <div class="layout-content-col span-5">
-
-<h4>Space considerations</h4>
-<p>Devices vary in the amount of density-independent pixels (dp) they can display.</p>
-<p>To see more, visit the
-<a href="http://developer.android.com/resources/dashboard/screens.html" target="_blank">
-Screen Sizes and Densities Device Dashboard</a>.</p>
-
- </div>
-</div>
-
-<h2 id="48dp-rhythm">48dp Rhythm</h2>
-
-<p>Touchable UI components are generally laid out along 48dp units.</p>
-
-<img src="../static/content/metrics_48.png">
-
-<div class="vspace size-2">&nbsp;</div>
-
-<h4>Why 48dp?</h4>
-<p>On average, 48dp translate to a physical size of about 9mm (with some variability). This is
-comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users
-will be able to reliably and accurately target them with their fingers.</p>
-<p>If you design your elements to be at least 48dp high and wide you can guarantee that:</p>
-<ul>
-<li>your targets will never be smaller than the minimum recommended target size of 7mm regardless of
- what screen they are displayed on.</li>
-<li>you strike a good compromise between overall information density on the one hand, and
- targetability of UI elements on the other.</li>
-</ul>
-
-<img src="../static/content/metrics_closeup.png">
-
-<div class="vspace size-2">&nbsp;</div>
-
-<h4>Mind the gaps</h4>
-<p>Spacing between each UI element is 8dp.</p>
-
-<h2 id="examples">Examples</h2>
-
-<img src="../static/content/metrics_forms.png">
-
-
-
-
- <div class="layout-content-row content-footer">
- <div class="paging-links layout-content-col span-9">&nbsp;</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> &ndash;
- <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
- <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/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd
new file mode 100644
index 0000000..e2b9ab5
--- /dev/null
+++ b/docs/html/design/style/metrics-grids.jd
@@ -0,0 +1,61 @@
+page.title=Metrics and Grids
+@jd:body
+
+<p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per
+inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as
+falling into a particular size bucket and density bucket. The size buckets are <em>handset</em> (smaller than
+600<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi
+screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp). The density buckets are <acronym
+title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160
+dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, and <acronym title
+="Extra-high density (320 dpi)">XHDPI</acronym>. Optimize your application's UI by designing
+alternative layouts for some of the different size buckets, and provide alternative bitmap images
+for different density buckets.</p>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-8">
+
+ <img src="{@docRoot}design/media/metrics_diagram.png">
+
+ </div>
+ <div class="layout-content-col span-5">
+
+<h4>Space considerations</h4>
+<p>Devices vary in the amount of density-independent pixels (dp) they can display.</p>
+<p>To see more, visit the
+<a href="http://developer.android.com/resources/dashboard/screens.html" target="_blank">
+Screen Sizes and Densities Device Dashboard</a>.</p>
+
+ </div>
+</div>
+
+<h2 id="48dp-rhythm">48dp Rhythm</h2>
+
+<p>Touchable UI components are generally laid out along 48dp units.</p>
+
+<img src="{@docRoot}design/media/metrics_48.png">
+
+<div class="vspace size-2">&nbsp;</div>
+
+<h4>Why 48dp?</h4>
+<p>On average, 48dp translate to a physical size of about 9mm (with some variability). This is
+comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users
+will be able to reliably and accurately target them with their fingers.</p>
+<p>If you design your elements to be at least 48dp high and wide you can guarantee that:</p>
+<ul>
+<li>your targets will never be smaller than the minimum recommended target size of 7mm regardless of
+ what screen they are displayed on.</li>
+<li>you strike a good compromise between overall information density on the one hand, and
+ targetability of UI elements on the other.</li>
+</ul>
+
+<img src="{@docRoot}design/media/metrics_closeup.png">
+
+<div class="vspace size-2">&nbsp;</div>
+
+<h4>Mind the gaps</h4>
+<p>Spacing between each UI element is 8dp.</p>
+
+<h2 id="examples">Examples</h2>
+
+<img src="{@docRoot}design/media/metrics_forms.png">
diff --git a/docs/html/design/style/themes.html b/docs/html/design/style/themes.html
deleted file mode 100644
index a629978..0000000
--- a/docs/html/design/style/themes.html
+++ /dev/null
@@ -1,199 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
-
-Android Design - Themes
- </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 &amp; 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>Themes</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-5">
-
- <img src="../static/content/themes_holo_light.png">
- <div class="figure-caption">
- Gmail in Holo Light.
- </div>
-
- <img src="../static/content/themes_holo_dark.png">
- <div class="figure-caption">
- Settings in Holo Dark.
- </div>
-
- <img src="../static/content/themes_holo_inverse.png">
- <div class="figure-caption">
- Talk in Holo Light with dark action bar.
- </div>
-
- </div>
- <div class="layout-content-col span-7">
-
-<p>Themes are Android's mechanism for applying a consistent style to an app or activity. The style
-specifies the visual properties of the elements that make up your user interface, such as color,
-height, padding and font size. To promote greater cohesion between all apps on the platform, Android
-provides three system themes that you can choose from when building apps for Ice Cream Sandwich:</p>
-<ul>
-<li>Holo Light</li>
-<li>Holo Dark</li>
-<li>Holo Light with dark action bars</li>
-</ul>
-<p>Applying these themes will go a long way in helping you to build apps that fit right into the
-general visual language of Android.</p>
-<p>Pick the system theme that best matches the needs and design aesthetics for your app. If your
-desire is to have a more distinct look for your app, using one of the system themes as a starting
-point for your customizations is a good idea. The system themes provide a solid foundation on top
-of which you can selectively implement your own visual stylings.</p>
-
- </div>
-</div>
-
-
-
-
- <div class="layout-content-row content-footer">
- <div class="paging-links layout-content-col span-9">&nbsp;</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> &ndash;
- <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
- <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/style/themes.jd b/docs/html/design/style/themes.jd
new file mode 100644
index 0000000..d4a6acf
--- /dev/null
+++ b/docs/html/design/style/themes.jd
@@ -0,0 +1,42 @@
+page.title=Themes
+@jd:body
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-5">
+
+ <img src="{@docRoot}design/media/themes_holo_light.png">
+ <div class="figure-caption">
+ Gmail in Holo Light.
+ </div>
+
+ <img src="{@docRoot}design/media/themes_holo_dark.png">
+ <div class="figure-caption">
+ Settings in Holo Dark.
+ </div>
+
+ <img src="{@docRoot}design/media/themes_holo_inverse.png">
+ <div class="figure-caption">
+ Talk in Holo Light with dark action bar.
+ </div>
+
+ </div>
+ <div class="layout-content-col span-7">
+
+<p>Themes are Android's mechanism for applying a consistent style to an app or activity. The style
+specifies the visual properties of the elements that make up your user interface, such as color,
+height, padding and font size. To promote greater cohesion between all apps on the platform, Android
+provides three system themes that you can choose from when building apps for Ice Cream Sandwich:</p>
+<ul>
+<li>Holo Light</li>
+<li>Holo Dark</li>
+<li>Holo Light with dark action bars</li>
+</ul>
+<p>Applying these themes will go a long way in helping you to build apps that fit right into the
+general visual language of Android.</p>
+<p>Pick the system theme that best matches the needs and design aesthetics for your app. If your
+desire is to have a more distinct look for your app, using one of the system themes as a starting
+point for your customizations is a good idea. The system themes provide a solid foundation on top
+of which you can selectively implement your own visual stylings.</p>
+
+ </div>
+</div>
diff --git a/docs/html/design/style/touch-feedback.html b/docs/html/design/style/touch-feedback.html
deleted file mode 100644
index d1c08f8..0000000
--- a/docs/html/design/style/touch-feedback.html
+++ /dev/null
@@ -1,224 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
-
-Android Design - Touch Feedback
- </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 &amp; 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>Touch Feedback</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" style="margin-bottom: -100px">
- <div class="layout-content-col span-7">
-
-<p>Use color and illumination to respond to touches, reinforce the resulting behaviors of gestures, and
-indicate what actions are enabled and disabled.</p>
-<p>Whenever a user touches an actionable area in your app, provide a visual response. This lets the
-user know which object was touched and that your app is "listening".</p>
-
- </div>
- <div class="layout-content-col span-6">
-
- <img src="../static/content/touch_feedback_reaction_response.png">
-
- </div>
-</div>
-
-<h4>States</h4>
-
-<div class="vspace size-1">&nbsp;</div>
-
-<img src="../static/content/touch_feedback_states.png">
-<div class="figure-caption">
- Most of Android's UI elements have touch-feedback built in, including states that indicate
- whether touching the element will have any effect.
-</div>
-
-<div class="vspace size-4">&nbsp;</div>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-4">
-
-<h4>Communication</h4>
-<p>When your objects react to more complex gestures, help users understand what the outcome of the
-operation will be. For example, in Recents, when you start swiping a thumbnail left or right, it
-starts to dim. This helps the user understand that swiping will cause the item to be removed.</p>
-
- </div>
- <div class="layout-content-col span-9">
-
- <img src="../static/content/touch_feedback_manipulation.png">
-
- </div>
-</div>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-6">
-
- <img src="../static/content/touch_feedback_communication.png">
-
- </div>
- <div class="layout-content-col span-6">
-
-<div class="vspace size-3">&nbsp;</div>
-
-<h4>Boundaries</h4>
-<p>When users try to scroll past the upper or lower limit of a scrollable area, communicate the
-boundary with a visual cue. For example, if a user attempts to scroll past the first home screen
-panel, the screen content tilts to the right to indicate that further navigation in this direction
-is not possible. Many of Android's scrollable UI widgets (e.g. lists or grid lists) already have
-support for boundary feedback built in. If you are building custom, keep boundary feedback in mind
-and provide it from within your app.</p>
-
- </div>
-</div>
-
-
-
-
- <div class="layout-content-row content-footer">
- <div class="paging-links layout-content-col span-9">&nbsp;</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> &ndash;
- <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
- <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/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd
new file mode 100644
index 0000000..5fe72a7
--- /dev/null
+++ b/docs/html/design/style/touch-feedback.jd
@@ -0,0 +1,67 @@
+page.title=Touch Feedback
+@jd:body
+
+<div class="layout-content-row" style="margin-bottom: -100px">
+ <div class="layout-content-col span-7">
+
+<p>Use color and illumination to respond to touches, reinforce the resulting behaviors of gestures, and
+indicate what actions are enabled and disabled.</p>
+<p>Whenever a user touches an actionable area in your app, provide a visual response. This lets the
+user know which object was touched and that your app is "listening".</p>
+
+ </div>
+ <div class="layout-content-col span-6">
+
+ <img src="{@docRoot}design/media/touch_feedback_reaction_response.png">
+
+ </div>
+</div>
+
+<h4>States</h4>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<img src="{@docRoot}design/media/touch_feedback_states.png">
+<div class="figure-caption">
+ Most of Android's UI elements have touch-feedback built in, including states that indicate
+ whether touching the element will have any effect.
+</div>
+
+<div class="vspace size-4">&nbsp;</div>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-4">
+
+<h4>Communication</h4>
+<p>When your objects react to more complex gestures, help users understand what the outcome of the
+operation will be. For example, in Recents, when you start swiping a thumbnail left or right, it
+starts to dim. This helps the user understand that swiping will cause the item to be removed.</p>
+
+ </div>
+ <div class="layout-content-col span-9">
+
+ <img src="{@docRoot}design/media/touch_feedback_manipulation.png">
+
+ </div>
+</div>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+
+ <img src="{@docRoot}design/media/touch_feedback_communication.png">
+
+ </div>
+ <div class="layout-content-col span-6">
+
+<div class="vspace size-3">&nbsp;</div>
+
+<h4>Boundaries</h4>
+<p>When users try to scroll past the upper or lower limit of a scrollable area, communicate the
+boundary with a visual cue. For example, if a user attempts to scroll past the first home screen
+panel, the screen content tilts to the right to indicate that further navigation in this direction
+is not possible. Many of Android's scrollable UI widgets (e.g. lists or grid lists) already have
+support for boundary feedback built in. If you are building custom, keep boundary feedback in mind
+and provide it from within your app.</p>
+
+ </div>
+</div>
diff --git a/docs/html/design/style/typography.html b/docs/html/design/style/typography.html
deleted file mode 100644
index d9b6d4b..0000000
--- a/docs/html/design/style/typography.html
+++ /dev/null
@@ -1,214 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
-
-Android Design - Typography
- </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 &amp; 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>Typography</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-8">
-
- <img src="../static/content/typography_main.png">
-
- </div>
- <div class="layout-content-col span-5">
-
-<p>The Android design language relies on traditional typographic tools such as scale, space, rhythm,
-and alignment with an underlying grid. Successful deployment of these tools is essential to help
-users quickly understand a screen of information. To support such use of typography, Ice Cream
-Sandwich introduced a new type family named Roboto, created specifically for the requirements of UI
-and high-resolution screens. The current TextView framework supports regular, bold, italic, and bold
-italic weights by default.</p>
-
- <img src="../static/content/typography_alphas.png">
-
-<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>
-
-<hr>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-6">
-
-<h4>Default type colors</h4>
-<p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and
-<code>textColorSecondary</code>. For light themes use <code>textColorPrimaryInverse</code> and
-<code>textColorSecondaryInverse</code>. The framework text color styles also support variants for
-touch feedback states when used inside UI elements.</p>
-
- <img src="../static/content/typography_defaults.png">
-
- </div>
- <div class="layout-content-col span-6">
-
-<h4>Typographic Scale</h4>
-<p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too
-many different sizes in the same UI can be messy. The Android framework uses the following limited
-set of type sizes:</p>
-
-<img src="../static/content/typography_sizes.png">
-
-<p>Users can select a system-wide scaling factor for text in the Settings app. In order to support
-these accessibility features, type should be specified in scale-independent pixels
-(<acronym title="Scale-independent pixels. One sp is one pixel on a 160 dpi screen if the user's global text scale is set to 100%.">sp</acronym>)
-wherever possible. Layouts supporting scalable types should be tested against these settings.</p>
-
- </div>
-</div>
-
-
-
-
-
- <div class="layout-content-row content-footer">
- <div class="paging-links layout-content-col span-9">&nbsp;</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> &ndash;
- <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
- <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/style/typography.jd b/docs/html/design/style/typography.jd
new file mode 100644
index 0000000..db2fb5f
--- /dev/null
+++ b/docs/html/design/style/typography.jd
@@ -0,0 +1,56 @@
+page.title=Typography
+@jd:body
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-8">
+
+ <img src="{@docRoot}design/media/typography_main.png">
+
+ </div>
+ <div class="layout-content-col span-5">
+
+<p>The Android design language relies on traditional typographic tools such as scale, space, rhythm,
+and alignment with an underlying grid. Successful deployment of these tools is essential to help
+users quickly understand a screen of information. To support such use of typography, Ice Cream
+Sandwich introduced a new type family named Roboto, created specifically for the requirements of UI
+and high-resolution screens. The current TextView framework supports regular, bold, italic, and bold
+italic weights by default.</p>
+
+ <img src="{@docRoot}design/media/typography_alphas.png">
+
+<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>
+
+<hr>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+
+<h4>Default type colors</h4>
+<p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and
+<code>textColorSecondary</code>. For light themes use <code>textColorPrimaryInverse</code> and
+<code>textColorSecondaryInverse</code>. The framework text color styles also support variants for
+touch feedback states when used inside UI elements.</p>
+
+ <img src="{@docRoot}design/media/typography_defaults.png">
+
+ </div>
+ <div class="layout-content-col span-6">
+
+<h4>Typographic Scale</h4>
+<p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too
+many different sizes in the same UI can be messy. The Android framework uses the following limited
+set of type sizes:</p>
+
+<img src="{@docRoot}design/media/typography_sizes.png">
+
+<p>Users can select a system-wide scaling factor for text in the Settings app. In order to support
+these accessibility features, type should be specified in scale-independent pixels
+(<acronym title="Scale-independent pixels. One sp is one pixel on a 160 dpi screen if the user's global text scale is set to 100%.">sp</acronym>)
+wherever possible. Layouts supporting scalable types should be tested against these settings.</p>
+
+ </div>
+</div>
diff --git a/docs/html/design/style/writing.html b/docs/html/design/style/writing.jd
index 146ce88..80fd03e 100644
--- a/docs/html/design/style/writing.html
+++ b/docs/html/design/style/writing.jd
@@ -1,15 +1,5 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
-
-Android Design - Writing Style
- </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">
+page.title=Writing Style
+@jd:body
<style>
@@ -54,110 +44,15 @@ Android Design - Writing Style
}
.example_label.bad {
- background-image: url(../static/ico_wrong.png);
+ background-image: url({@docRoot}assets/design/ico_wrong.png);
}
.example_label.good {
- background-image: url(../static/ico_good.png);
+ background-image: url({@docRoot}assets/design/ico_good.png);
}
</style>
- </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 &amp; 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>Writing Style</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>
-
-
-
-
<p>When choosing words for your app:</p>
<ol>
<li>
@@ -433,55 +328,3 @@ crashes:</ol>
</div>
</div>
-
-
-
-
- <div class="layout-content-row content-footer">
- <div class="paging-links layout-content-col span-9">&nbsp;</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> &ndash;
- <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
- <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>