Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Metrics and Grids |
Joe Fernandez | 33baa5a | 2013-11-14 11:41:19 -0800 | [diff] [blame] | 2 | page.tags=layout,screens |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
| 5 | <p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per |
| 6 | inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as |
Scott Main | 65b2f3e | 2013-06-03 12:39:06 -0700 | [diff] [blame] | 7 | falling into a particular size bucket and density bucket:</p> |
| 8 | <ul> |
| 9 | <li>The size buckets are <em>handset</em> (smaller than |
| 10 | 600<acronym title="Density-independent pixels: One dp is one pixel on a 160 dpi (mdpi) |
| 11 | screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp).</li> |
| 12 | <li>The density buckets are <acronym |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 13 | title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160 |
Scott Main | 65b2f3e | 2013-06-03 12:39:06 -0700 | [diff] [blame] | 14 | dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, <acronym title |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 15 | ="Extra-high density (320 dpi)">XHDPI</acronym>, <acronym title |
| 16 | ="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>, and <acronym title |
| 17 | ="Extra-extra-extra!-high density (640 dpi)">XXXHDPI</acronym>.</li> |
Scott Main | 65b2f3e | 2013-06-03 12:39:06 -0700 | [diff] [blame] | 18 | </ul> |
| 19 | |
| 20 | <p>Optimize your application's UI by designing |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 21 | alternative layouts for some of the different size buckets, and provide alternative bitmap images |
| 22 | for different density buckets.</p> |
| 23 | |
Scott Main | 65b2f3e | 2013-06-03 12:39:06 -0700 | [diff] [blame] | 24 | <p>Because it's important that you design and implement your layouts for multiple densities, |
| 25 | the guidelines below and throught the documentation |
| 26 | refer to layout dimensions with <acronym title="Density-independent pixels: One dp is one pixel |
| 27 | on a 160 dpi (mdpi) screen.">dp</acronym> measurements instead of pixels.</p> |
| 28 | |
| 29 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 30 | <div class="layout-content-row"> |
| 31 | <div class="layout-content-col span-8"> |
| 32 | |
| 33 | <img src="{@docRoot}design/media/metrics_diagram.png"> |
| 34 | |
| 35 | </div> |
| 36 | <div class="layout-content-col span-5"> |
| 37 | |
| 38 | <h4>Space considerations</h4> |
| 39 | <p>Devices vary in the amount of density-independent pixels (dp) they can display.</p> |
| 40 | <p>To see more, visit the |
| 41 | <a href="http://developer.android.com/resources/dashboard/screens.html" target="_blank"> |
| 42 | Screen Sizes and Densities Device Dashboard</a>.</p> |
| 43 | |
| 44 | </div> |
| 45 | </div> |
| 46 | |
Scott Main | 65b2f3e | 2013-06-03 12:39:06 -0700 | [diff] [blame] | 47 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 48 | <h2 id="48dp-rhythm">48dp Rhythm</h2> |
| 49 | |
| 50 | <p>Touchable UI components are generally laid out along 48dp units.</p> |
| 51 | |
| 52 | <img src="{@docRoot}design/media/metrics_48.png"> |
| 53 | |
| 54 | <div class="vspace size-2"> </div> |
| 55 | |
| 56 | <h4>Why 48dp?</h4> |
| 57 | <p>On average, 48dp translate to a physical size of about 9mm (with some variability). This is |
| 58 | comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users |
| 59 | will be able to reliably and accurately target them with their fingers.</p> |
| 60 | <p>If you design your elements to be at least 48dp high and wide you can guarantee that:</p> |
| 61 | <ul> |
| 62 | <li>your targets will never be smaller than the minimum recommended target size of 7mm regardless of |
| 63 | what screen they are displayed on.</li> |
| 64 | <li>you strike a good compromise between overall information density on the one hand, and |
| 65 | targetability of UI elements on the other.</li> |
| 66 | </ul> |
| 67 | |
| 68 | <img src="{@docRoot}design/media/metrics_closeup.png"> |
| 69 | |
| 70 | <div class="vspace size-2"> </div> |
| 71 | |
| 72 | <h4>Mind the gaps</h4> |
| 73 | <p>Spacing between each UI element is 8dp.</p> |
| 74 | |
| 75 | <h2 id="examples">Examples</h2> |
| 76 | |
| 77 | <img src="{@docRoot}design/media/metrics_forms.png"> |