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