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</div> 44</div> 45 46<p>This lesson shows you how to support different screen densities 47by providing different resources and using resolution-independent units of 48measurements.</p> 49 50<h2 id="TaskUseDP">Use Density-independent Pixels</h2> 51 52<p>One common pitfall you must avoid when designing your layouts is using 53absolute pixels to define distances or sizes. Defining layout dimensions with 54pixels is a problem because different screens have different pixel densities, 55so the same number of pixels may correspond to different physical sizes on 56different devices. Therefore, when specifying dimensions, always use either 57<code>dp</code> or <code>sp</code> units. A <code>dp</code> is a density-independent pixel 58that corresponds to the physical size of a pixel at 160 dpi. An <code>sp</code> is the same 59base unit, but is scaled by the user's preferred text size (it’s a 60scale-independent pixel), so you should use this measurement unit when defining 61text size (but never for layout sizes).</p> 62 63 <!-- video box --> 64<a class="notice-developers-video left" href="https://www.youtube.com/watch?v=zhszwkcay2A"> 65<div> 66 <h3>Video</h3> 67 <p>DesignBytes: Density-independent Pixels</p> 68</div> 69</a> 70 71<br style="clear:left"> 72 73<p>For example, when you specify spacing between two views, use <code>dp</code> 74rather than <code>px</code>:</p> 75 76<pre> 77<Button android:layout_width="wrap_content" 78 android:layout_height="wrap_content" 79 android:text="@string/clickme" 80 android:layout_marginTop="20dp" /> 81</pre> 82 83<p>When specifying text size, always use <code>sp</code>:</p> 84 85<pre> 86<TextView android:layout_width="match_parent" 87 android:layout_height="wrap_content" 88 android:textSize="20sp" /> 89</pre> 90 91 92<h2 id="TaskProvideAltBmp">Provide Alternative Bitmaps</h2> 93 94<p>Since Android runs in devices with a wide variety of screen densities, 95you should always provide your bitmap resources tailored to each of 96the generalized density buckets: low, medium, high and extra-high density. 97This will help you achieve good graphical quality and performance on all 98screen densities.</p> 99 100<p>To generate these images, you should start with your raw resource in 101vector format and generate the images for each density using the following 102size scale:</p> 103 104<p><ul> 105 <li><code>xhdpi</code>: 2.0 106 <li><code>hdpi</code>: 1.5 107 <li><code>mdpi</code>: 1.0 (baseline) 108 <li><code>ldpi</code>: 0.75 109</ul></p> 110 111<p>This means that if you generate a 200x200 image for <code>xhdpi</code> 112devices, you should generate the same resource in 150x150 for <code>hdpi</code>, 113100x100 for <code>mdpi</code> and finally a 75x75 image for <code>ldpi</code> 114devices.</p> 115 116<p>Then, place the generated image files in the appropriate subdirectory 117under <code>res/</code> and the system will pick the correct one automatically 118based on the screen density of the device your application is running on:</p> 119 120<pre class="classic no-pretty-print"> 121MyProject/ 122 res/ 123 drawable-xhdpi/ 124 awesomeimage.png 125 drawable-hdpi/ 126 awesomeimage.png 127 drawable-mdpi/ 128 awesomeimage.png 129 drawable-ldpi/ 130 awesomeimage.png 131</pre> 132 133<p>Then, any time you reference <code>@drawable/awesomeimage</code>, the system selects the 134appropriate bitmap based on the screen's dpi.</p> 135 136<p>For more tips and guidelines for creating icon assets for your application, see the <a 137href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design 138Guidelines</a>.</p> 139 140
