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