Scott Main | 801fda5 | 2011-12-09 17:27:21 -0800 | [diff] [blame] | 1 | page.title=Supporting Different Densities |
Dirk Dougherty | 3506ac8 | 2014-02-21 11:15:52 -0800 | [diff] [blame] | 2 | page.metaDescription=Providing sets of layouts and drawable resources for specific ranges of device screens. |
| 3 | meta.tags="multiple screens" |
| 4 | |
Scott Main | 801fda5 | 2011-12-09 17:27:21 -0800 | [diff] [blame] | 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 --> |
Eric Gilmore | fe7b93f | 2014-12-17 15:25:51 -0800 | [diff] [blame] | 18 | <div id="tb-wrapper"> |
| 19 | <div id="tb"> |
Scott Main | 801fda5 | 2011-12-09 17:27:21 -0800 | [diff] [blame] | 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> |
Rich Slogar | 6922370 | 2015-02-09 11:40:44 -0800 | [diff] [blame] | 31 | <li><a href="{@docRoot}design/style/iconography.html">Iconography</a></li> |
Scott Main | 801fda5 | 2011-12-09 17:27:21 -0800 | [diff] [blame] | 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> |
Eric Gilmore | fe7b93f | 2014-12-17 15:25:51 -0800 | [diff] [blame] | 37 | |
| 38 | <div class="download-box"> |
Scott Main | 801fda5 | 2011-12-09 17:27:21 -0800 | [diff] [blame] | 39 | <a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">Download |
| 40 | the sample app</a> |
Eric Gilmore | fe7b93f | 2014-12-17 15:25:51 -0800 | [diff] [blame] | 41 | <p class="filename">NewsReader.zip</p> |
| 42 | </div> |
| 43 | |
| 44 | </div> |
| 45 | </div> |
Scott Main | 801fda5 | 2011-12-09 17:27:21 -0800 | [diff] [blame] | 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 |
Eric Gilmore | fe7b93f | 2014-12-17 15:25:51 -0800 | [diff] [blame] | 57 | different devices. Therefore, when specifying dimensions, always use either |
Scott Main | 801fda5 | 2011-12-09 17:27:21 -0800 | [diff] [blame] | 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 (it’s a |
| 61 | scale-independent pixel), so you should use this measurement unit when defining |
| 62 | text size (but never for layout sizes).</p> |
| 63 | |
Eric Gilmore | fe7b93f | 2014-12-17 15:25:51 -0800 | [diff] [blame] | 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> |
Scott Main | 801fda5 | 2011-12-09 17:27:21 -0800 | [diff] [blame] | 75 | rather than <code>px</code>:</p> |
| 76 | |
| 77 | <pre> |
Eric Gilmore | fe7b93f | 2014-12-17 15:25:51 -0800 | [diff] [blame] | 78 | <Button android:layout_width="wrap_content" |
| 79 | android:layout_height="wrap_content" |
Scott Main | 801fda5 | 2011-12-09 17:27:21 -0800 | [diff] [blame] | 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> |
Eric Gilmore | fe7b93f | 2014-12-17 15:25:51 -0800 | [diff] [blame] | 87 | <TextView android:layout_width="match_parent" |
| 88 | android:layout_height="wrap_content" |
Scott Main | 801fda5 | 2011-12-09 17:27:21 -0800 | [diff] [blame] | 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 | |
Rich Slogar | 6922370 | 2015-02-09 11:40:44 -0800 | [diff] [blame] | 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 |
Rich Slogar | 0f44b94 | 2015-02-19 10:48:37 -0800 | [diff] [blame^] | 157 | <a href="{@docRoot}tools/projects/index.html#mipmap">Managing Projects Overview</a>.</p> |
Rich Slogar | 6922370 | 2015-02-09 11:40:44 -0800 | [diff] [blame] | 158 | |
Scott Main | 801fda5 | 2011-12-09 17:27:21 -0800 | [diff] [blame] | 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 | |