1page.title=Supporting Different Densities 2page.metaDescription=Providing sets of layouts and drawable resources for specific ranges of device screens. 3meta.tags="multiple screens" 4 5parent.title=Designing for Multiple Screens 6parent.link=index.html 7 8trainingnavtop=true 9previous.title=Supporting Different Screen Sizes 10previous.link=screensizes.html 11next.title=Implementing Adaptative UI Flows 12next.link=adaptui.html 13 14@jd:body 15 16 17<!-- This is the training bar --> 18<div id="tb-wrapper"> 19<div id="tb"> 20 21<h2>This lesson teaches you to</h2> 22<ol> 23 <li><a href="#TaskUseDP">Use Density-independent Pixels</a></li> 24 <li><a href="#TaskProvideAltBmp">Provide Alternative Bitmaps</a></li> 25</ol> 26 27<h2>You should also read</h2> 28 29<ul> 30 <li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple Screens</a></li> 31 <li><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design 32Guidelines</a></li> 33</ul> 34 35<h2>Try it out</h2> 36 37<div class="download-box"> 38<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">Download 39 the sample app</a> 40<p class="filename">NewsReader.zip</p> 41</div> 42 43 44</div> 45</div> 46 47<p>This lesson shows you how to support different screen densities 48by providing different resources and using resolution-independent units of 49measurements.</p> 50 51<h2 id="TaskUseDP">Use Density-independent Pixels</h2> 52 53<p>One common pitfall you must avoid when designing your layouts is using 54absolute pixels to define distances or sizes. Defining layout dimensions with 55pixels is a problem because different screens have different pixel densities, 56so the same number of pixels may correspond to different physical sizes on 57different devices. Therefore, when specifying dimensions, always use either 58<code>dp</code> or <code>sp</code> units. A <code>dp</code> is a density-independent pixel 59that corresponds to the physical size of a pixel at 160 dpi. An <code>sp</code> is the same 60base unit, but is scaled by the user's preferred text size (it’s a 61scale-independent pixel), so you should use this measurement unit when defining 62text size (but never for layout sizes).</p> 63 64<p>For example, when you specify spacing between two views, use <code>dp</code> 65rather than <code>px</code>:</p> 66 67<pre> 68<Button android:layout_width="wrap_content" 69 android:layout_height="wrap_content" 70 android:text="@string/clickme" 71 android:layout_marginTop="20dp" /> 72</pre> 73 74<p>When specifying text size, always use <code>sp</code>:</p> 75 76<pre> 77<TextView android:layout_width="match_parent" 78 android:layout_height="wrap_content" 79 android:textSize="20sp" /> 80</pre> 81 82 83<h2 id="TaskProvideAltBmp">Provide Alternative Bitmaps</h2> 84 85<p>Since Android runs in devices with a wide variety of screen densities, 86you should always provide your bitmap resources tailored to each of 87the generalized density buckets: low, medium, high and extra-high density. 88This will help you achieve good graphical quality and performance on all 89screen densities.</p> 90 91<p>To generate these images, you should start with your raw resource in 92vector format and generate the images for each density using the following 93size scale:</p> 94 95<p><ul> 96 <li><code>xhdpi</code>: 2.0 97 <li><code>hdpi</code>: 1.5 98 <li><code>mdpi</code>: 1.0 (baseline) 99 <li><code>ldpi</code>: 0.75 100</ul></p> 101 102<p>This means that if you generate a 200x200 image for <code>xhdpi</code> 103devices, you should generate the same resource in 150x150 for <code>hdpi</code>, 104100x100 for <code>mdpi</code> and finally a 75x75 image for <code>ldpi</code> 105devices.</p> 106 107<p>Then, place the generated image files in the appropriate subdirectory 108under <code>res/</code> and the system will pick the correct one automatically 109based on the screen density of the device your application is running on:</p> 110 111<pre class="classic no-pretty-print"> 112MyProject/ 113 res/ 114 drawable-xhdpi/ 115 awesomeimage.png 116 drawable-hdpi/ 117 awesomeimage.png 118 drawable-mdpi/ 119 awesomeimage.png 120 drawable-ldpi/ 121 awesomeimage.png 122</pre> 123 124<p>Then, any time you reference <code>@drawable/awesomeimage</code>, the system selects the 125appropriate bitmap based on the screen's dpi.</p> 126 127<p>For more tips and guidelines for creating icon assets for your application, see the <a 128href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design 129Guidelines</a>.</p> 130 131
