diff options
Diffstat (limited to 'docs/html/design/style')
-rw-r--r-- | docs/html/design/style/color.html | 296 | ||||
-rw-r--r-- | docs/html/design/style/color.jd | 134 | ||||
-rw-r--r-- | docs/html/design/style/devices-displays.html | 202 | ||||
-rw-r--r-- | docs/html/design/style/devices-displays.jd | 45 | ||||
-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.html | 175 | ||||
-rw-r--r-- | docs/html/design/style/index.jd | 29 | ||||
-rw-r--r-- | docs/html/design/style/metrics-grids.html | 218 | ||||
-rw-r--r-- | docs/html/design/style/metrics-grids.jd | 61 | ||||
-rw-r--r-- | docs/html/design/style/themes.html | 199 | ||||
-rw-r--r-- | docs/html/design/style/themes.jd | 42 | ||||
-rw-r--r-- | docs/html/design/style/touch-feedback.html | 224 | ||||
-rw-r--r-- | docs/html/design/style/touch-feedback.jd | 67 | ||||
-rw-r--r-- | docs/html/design/style/typography.html | 214 | ||||
-rw-r--r-- | docs/html/design/style/typography.jd | 56 | ||||
-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 & 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"> </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> - $(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 & 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"> </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"> </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/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"> </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 & 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"> </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"> </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"> </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/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 & 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"> </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> – - <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/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 & 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"> </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"> </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"> </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/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"> </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"> </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 & 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"> </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/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 & 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"> </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"> </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"> </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"> </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/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"> </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"> </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"> </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 & 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"> </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/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 & 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"> </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> |