diff options
Diffstat (limited to 'docs/html/design/style/metrics-grids.jd')
| -rw-r--r-- | docs/html/design/style/metrics-grids.jd | 90 |
1 files changed, 0 insertions, 90 deletions
diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd deleted file mode 100644 index d7b5f78..0000000 --- a/docs/html/design/style/metrics-grids.jd +++ /dev/null @@ -1,90 +0,0 @@ -page.title=Metrics and Grids -page.metaDescription=Optimize your app's UI by designing layouts based on density-independent grids. -page.tags="layout","screens" -meta.tags="multiple screens, layout, tablets" -page.image=/design/media/metrics_closeup.png -@jd:body - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/layout/metrics-keylines.html"> - <div> - <h3>Material Design</h3> - <p>Metrics and Keylines<p> - </div> -</a> - - -<p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per -inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as -falling into a particular size bucket and density bucket:</p> -<ul> - <li>The size buckets are <em>handset</em> (smaller than -600<acronym title="Density-independent pixels: One dp is one pixel on a 160 dpi (mdpi) -screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp).</li> - <li>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>, <acronym title -="Extra-high density (320 dpi)">XHDPI</acronym>, <acronym title -="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>, and <acronym title -="Extra-extra-extra!-high density (640 dpi)">XXXHDPI</acronym>.</li> -</ul> - -<p>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> - -<p>Because it's important that you design and implement your layouts for multiple densities, -the guidelines below and throught the documentation -refer to layout dimensions with <acronym title="Density-independent pixels: One dp is one pixel -on a 160 dpi (mdpi) screen.">dp</acronym> measurements instead of pixels.</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"> |