1 page.title=Supporting Different Screens 2 page.tags=layouts 3 helpoutsWidget=true 4 5 trainingnavtop=true 6 7 @jd:body 8 9 <div id="tb-wrapper"> 10 <div id="tb"> 11 12 <h2>This lesson teaches you to</h2> 13 <ol> 14 <li><a href="#create-layouts">Create Different Layouts</a></li> 15 <li><a href="#create-bitmaps">Create Different Bitmaps</a></li> 16 </ol> 17 18 <h2>You should also read</h2> 19 <ul> 20 <li><a href="{@docRoot}training/multiscreen/index.html">Designing for Multiple 21 Screens</a></li> 22 <li><a href="{@docRoot}guide/topics/resources/providing-resources.html">Providing 23 Resources</a></li> 24 <li><a href="{@docRoot}design/style/iconography.html">Iconography design guide</a></li> 25 </ul> 26 </div> 27 </div> 28 29 <p>Android categorizes device screens using two general properties: size and density. You should 30 expect that your app will be installed on devices with screens that range in both size 31 and density. As such, you should include some alternative resources that optimize your apps 32 appearance for different screen sizes and densities.</p> 33 34 <ul> 35 <li>There are four generalized sizes: small, normal, large, xlarge</li> 36 <li>And four generalized densities: low (ldpi), medium (mdpi), high (hdpi), extra high 37 (xhdpi)</li> 38 </ul> 39 40 <p>To declare different layouts and bitmaps you'd like to use for different screens, you must place 41 these alternative resources in separate directories, similar to how you do for different language 42 strings.</p> 43 44 <p>Also be aware that the screens orientation (landscape or portrait) is considered a variation of 45 screen size, so many apps should revise the layout to optimize the user experience in each 46 orientation.</p> 47 48 49 <h2 id="create-layouts">Create Different Layouts</h2> 50 51 <p>To optimize your user experience on different screen sizes, you should create a unique layout XML 52 file for each screen size you want to support. Each layout should be 53 saved into the appropriate resources directory, named with a <code>-<screen_size></code> 54 suffix. For example, a unique layout for large screens should be saved under 55 <code>res/layout-large/</code>.</p> 56 57 <p class="note"><strong>Note:</strong> Android automatically scales your layout in order to 58 properly fit the screen. Thus, your layouts for different screen sizes don't 59 need to worry about the absolute size of UI elements but instead focus on the layout structure that 60 affects the user experience (such as the size or position of important views relative to sibling 61 views).</p> 62 63 <p>For example, this project includes a default layout and an alternative layout for <em>large</em> 64 screens:</p> 65 66 <pre class="classic no-pretty-print"> 67 MyProject/ 68 res/ 69 layout/ 70 main.xml 71 layout-large/ 72 main.xml 73 </pre> 74 75 <p>The file names must be exactly the same, but their contents are different in order to provide 76 an optimized UI for the corresponding screen size.</p> 77 78 <p>Simply reference the layout file in your app as usual:</p> 79 80 <pre> 81 @Override 82 protected void onCreate(Bundle savedInstanceState) { 83 super.onCreate(savedInstanceState); 84 setContentView(R.layout.main); 85 } 86 </pre> 87 88 <p>The system loads the layout file from the appropriate layout directory based on screen size of 89 the device on which your app is running. More information about how Android selects the 90 appropriate resource is available in the <a 91 href="{@docRoot}guide/topics/resources/providing-resources.html#BestMatch">Providing Resources</a> 92 guide.</p> 93 94 <p>As another example, here's a project with an alternative layout for landscape orientation:</p> 95 96 <pre class="classic no-pretty-print"> 97 MyProject/ 98 res/ 99 layout/ 100 main.xml 101 layout-land/ 102 main.xml 103 </pre> 104 105 <p>By default, the <code>layout/main.xml</code> file is used for portrait orientation.</p> 106 107 <p>If you want to provide a special layout for landscape, including while on large screens, then 108 you need to use both the <code>large</code> and <code>land</code> qualifier:</p> 109 110 <pre class="classic no-pretty-print"> 111 MyProject/ 112 res/ 113 layout/ # default (portrait) 114 main.xml 115 layout-land/ # landscape 116 main.xml 117 layout-large/ # large (portrait) 118 main.xml 119 layout-large-land/ # large landscape 120 main.xml 121 </pre> 122 123 <p class="note"><strong>Note:</strong> Android 3.2 and above supports an advanced method of 124 defining screen sizes that allows you to specify resources for screen sizes based on 125 the minimum width and height in terms of density-independent pixels. This lesson does not cover 126 this new technique. For more information, read <a 127 href="{@docRoot}training/multiscreen/index.html">Designing for Multiple 128 Screens</a>.</p> 129 130 131 132 <h2 id="create-bitmaps">Create Different Bitmaps</h2> 133 134 <p>You should always provide bitmap resources that are properly scaled to each of the generalized 135 density buckets: low, medium, high and extra-high density. This helps you achieve good graphical 136 quality and performance on all screen densities.</p> 137 138 <p>To generate these images, you should start with your raw resource in vector format and generate 139 the images for each density using the following size scale:</p> 140 <ul> 141 <li>xhdpi: 2.0</li> 142 <li>hdpi: 1.5</li> 143 <li>mdpi: 1.0 (baseline)</li> 144 <li>ldpi: 0.75</li> 145 </ul> 146 147 <p>This means that if you generate a 200x200 image for xhdpi devices, you should generate the same 148 resource in 150x150 for hdpi, 100x100 for mdpi, and 75x75 for ldpi devices.</p> 149 150 <p>Then, place the files in the appropriate drawable resource directory:</p> 151 152 <pre class="classic no-pretty-print"> 153 MyProject/ 154 res/ 155 drawable-xhdpi/ 156 awesomeimage.png 157 drawable-hdpi/ 158 awesomeimage.png 159 drawable-mdpi/ 160 awesomeimage.png 161 drawable-ldpi/ 162 awesomeimage.png 163 </pre> 164 165 <p>Any time you reference <code>@drawable/awesomeimage</code>, the system selects the 166 appropriate bitmap based on the screen's density.</p> 167 168 <p class="note"><strong>Note:</strong> Low-density (ldpi) resources arent always necessary. When 169 you provide hdpi assets, the system scales them down by one half to properly fit ldpi 170 screens.</p> 171 172 <p>For more tips and guidelines about creating icon assets for your app, see the 173 <a href="{@docRoot}design/style/iconography.html">Iconography design guide</a>.</p> 174 175 176 177
