1 page.title=Supporting Different Densities 2 page.metaDescription=Providing sets of layouts and drawable resources for specific ranges of device screens. 3 meta.tags="multiple screens" 4 5 parent.title=Designing for Multiple Screens 6 parent.link=index.html 7 8 trainingnavtop=true 9 previous.title=Supporting Different Screen Sizes 10 previous.link=screensizes.html 11 next.title=Implementing Adaptative UI Flows 12 next.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}design/style/iconography.html">Iconography</a></li> 32 <li><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design 33 Guidelines</a></li> 34 </ul> 35 36 <h2>Try it out</h2> 37 38 <div class="download-box"> 39 <a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">Download 40 the sample app</a> 41 <p class="filename">NewsReader.zip</p> 42 </div> 43 44 </div> 45 </div> 46 47 <p>This lesson shows you how to support different screen densities 48 by providing different resources and using resolution-independent units of 49 measurements.</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 54 absolute pixels to define distances or sizes. Defining layout dimensions with 55 pixels is a problem because different screens have different pixel densities, 56 so the same number of pixels may correspond to different physical sizes on 57 different 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 59 that corresponds to the physical size of a pixel at 160 dpi. An <code>sp</code> is the same 60 base unit, but is scaled by the user's preferred text size (its a 61 scale-independent pixel), so you should use this measurement unit when defining 62 text size (but never for layout sizes).</p> 63 64 <!-- video box --> 65 <a class="notice-developers-video left" href="https://www.youtube.com/watch?v=zhszwkcay2A"> 66 <div> 67 <h3>Video</h3> 68 <p>DesignBytes: Density-independent Pixels</p> 69 </div> 70 </a> 71 72 <br style="clear:left"> 73 74 <p>For example, when you specify spacing between two views, use <code>dp</code> 75 rather than <code>px</code>:</p> 76 77 <pre> 78 <Button android:layout_width="wrap_content" 79 android:layout_height="wrap_content" 80 android:text="@string/clickme" 81 android:layout_marginTop="20dp" /> 82 </pre> 83 84 <p>When specifying text size, always use <code>sp</code>:</p> 85 86 <pre> 87 <TextView android:layout_width="match_parent" 88 android:layout_height="wrap_content" 89 android:textSize="20sp" /> 90 </pre> 91 92 93 <h2 id="TaskProvideAltBmp">Provide Alternative Bitmaps</h2> 94 95 <p>Since Android runs in devices with a wide variety of screen densities, 96 you should always provide your bitmap resources tailored to each of 97 the generalized density buckets: low, medium, high and extra-high density. 98 This will help you achieve good graphical quality and performance on all 99 screen densities.</p> 100 101 <p>To generate these images, you should start with your raw resource in 102 vector format and generate the images for each density using the following 103 size scale:</p> 104 105 <p><ul> 106 <li><code>xhdpi</code>: 2.0 107 <li><code>hdpi</code>: 1.5 108 <li><code>mdpi</code>: 1.0 (baseline) 109 <li><code>ldpi</code>: 0.75 110 </ul></p> 111 112 <p>This means that if you generate a 200x200 image for <code>xhdpi</code> 113 devices, you should generate the same resource in 150x150 for <code>hdpi</code>, 114 100x100 for <code>mdpi</code> and finally a 75x75 image for <code>ldpi</code> 115 devices.</p> 116 117 <p>Then, place the generated image files in the appropriate subdirectory 118 under <code>res/</code> and the system will pick the correct one automatically 119 based on the screen density of the device your application is running on:</p> 120 121 <pre class="classic no-pretty-print"> 122 MyProject/ 123 res/ 124 drawable-xhdpi/ 125 awesomeimage.png 126 drawable-hdpi/ 127 awesomeimage.png 128 drawable-mdpi/ 129 awesomeimage.png 130 drawable-ldpi/ 131 awesomeimage.png 132 </pre> 133 134 <p>Then, any time you reference <code>@drawable/awesomeimage</code>, the system selects the 135 appropriate bitmap based on the screen's dpi.</p> 136 137 <p>Place your launcher icons in the <code>mipmap/</code> folders. </p> 138 139 <pre>res/... 140 mipmap-ldpi/... 141 <em>finished_launcher_asset</em>.png 142 mipmap-mdpi/... 143 <em>finished_launcher_asset</em>.png 144 mipmap-hdpi/... 145 <em>finished_launcher_asset</em>.png 146 mipmap-xhdpi/... 147 <em>finished_launcher_asset</em>.png 148 mipmap-xxhdpi/... 149 <em>finished_launcher_asset</em>.png 150 mipmap-xxxhdpi/... 151 <em>finished_launcher_asset</em>.png 152 </pre> 153 154 <p class="note"><strong>Note:</strong> You should place all launcher icons in the 155 <code>res/mipmap-[density]/</code> folders, rather than <code>drawable/</code> folders to ensure 156 launcher apps use the best resolution icon. For more information about using the mipmap folders, see 157 <a href="{@docRoot}tools/projects/index.html#mipmap">Managing Projects Overview</a>.</p> 158 159 <p>For more tips and guidelines for creating icon assets for your application, see the <a 160 href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design 161 Guidelines</a>.</p> 162 163
