page.title=Supporting Different Screens
page.tags=layouts
helpoutsWidget=true
trainingnavtop=true
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>This lesson teaches you to</h2>
<ol>
<li><a href="#create-layouts">Create Different Layouts</a></li>
<li><a href="#create-bitmaps">Create Different Bitmaps</a></li>
</ol>
<h2>You should also read</h2>
<ul>
<li><a href="{@docRoot}training/multiscreen/index.html">Designing for Multiple
Screens</a></li>
<li><a href="{@docRoot}guide/topics/resources/providing-resources.html">Providing
Resources</a></li>
<li><a href="{@docRoot}design/style/iconography.html">Iconography design guide</a></li>
</ul>
</div>
</div>
<p>Android categorizes device screens using two general properties: size and density. You should
expect that your app will be installed on devices with screens that range in both size
and density. As such, you should include some alternative resources that optimize your app’s
appearance for different screen sizes and densities.</p>
<ul>
<li>There are four generalized sizes: small, normal, large, xlarge</li>
<li>And four generalized densities: low (ldpi), medium (mdpi), high (hdpi), extra high
(xhdpi)</li>
</ul>
<p>To declare different layouts and bitmaps you'd like to use for different screens, you must place
these alternative resources in separate directories, similar to how you do for different language
strings.</p>
<p>Also be aware that the screens orientation (landscape or portrait) is considered a variation of
screen size, so many apps should revise the layout to optimize the user experience in each
orientation.</p>
<h2 id="create-layouts">Create Different Layouts</h2>
<p>To optimize your user experience on different screen sizes, you should create a unique layout XML
file for each screen size you want to support. Each layout should be
saved into the appropriate resources directory, named with a <code>-<screen_size></code>
suffix. For example, a unique layout for large screens should be saved under
<code>res/layout-large/</code>.</p>
<p class="note"><strong>Note:</strong> Android automatically scales your layout in order to
properly fit the screen. Thus, your layouts for different screen sizes don't
need to worry about the absolute size of UI elements but instead focus on the layout structure that
affects the user experience (such as the size or position of important views relative to sibling
views).</p>
<p>For example, this project includes a default layout and an alternative layout for <em>large</em>
screens:</p>
<pre class="classic no-pretty-print">
MyProject/
res/
layout/
main.xml
layout-large/
main.xml
</pre>
<p>The file names must be exactly the same, but their contents are different in order to provide
an optimized UI for the corresponding screen size.</p>
<p>Simply reference the layout file in your app as usual:</p>
<pre>
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
</pre>
<p>The system loads the layout file from the appropriate layout directory based on screen size of
the device on which your app is running. More information about how Android selects the
appropriate resource is available in the <a
href="{@docRoot}guide/topics/resources/providing-resources.html#BestMatch">Providing Resources</a>
guide.</p>
<p>As another example, here's a project with an alternative layout for landscape orientation:</p>
<pre class="classic no-pretty-print">
MyProject/
res/
layout/
main.xml
layout-land/
main.xml
</pre>
<p>By default, the <code>layout/main.xml</code> file is used for portrait orientation.</p>
<p>If you want to provide a special layout for landscape, including while on large screens, then
you need to use both the <code>large</code> and <code>land</code> qualifier:</p>
<pre class="classic no-pretty-print">
MyProject/
res/
layout/ # default (portrait)
main.xml
layout-land/ # landscape
main.xml
layout-large/ # large (portrait)
main.xml
layout-large-land/ # large landscape
main.xml
</pre>
<p class="note"><strong>Note:</strong> Android 3.2 and above supports an advanced method of
defining screen sizes that allows you to specify resources for screen sizes based on
the minimum width and height in terms of density-independent pixels. This lesson does not cover
this new technique. For more information, read <a
href="{@docRoot}training/multiscreen/index.html">Designing for Multiple
Screens</a>.</p>
<h2 id="create-bitmaps">Create Different Bitmaps</h2>
<p>You should always provide bitmap resources that are properly scaled to each of the generalized
density buckets: low, medium, high and extra-high density. This helps you achieve good graphical
quality and performance on all screen densities.</p>
<p>To generate these images, you should start with your raw resource in vector format and generate
the images for each density using the following size scale:</p>
<ul>
<li>xhdpi: 2.0</li>
<li>hdpi: 1.5</li>
<li>mdpi: 1.0 (baseline)</li>
<li>ldpi: 0.75</li>
</ul>
<p>This means that if you generate a 200x200 image for xhdpi devices, you should generate the same
resource in 150x150 for hdpi, 100x100 for mdpi, and 75x75 for ldpi devices.</p>
<p>Then, place the files in the appropriate drawable resource directory:</p>
<pre class="classic no-pretty-print">
MyProject/
res/
drawable-xhdpi/
awesomeimage.png
drawable-hdpi/
awesomeimage.png
drawable-mdpi/
awesomeimage.png
drawable-ldpi/
awesomeimage.png
</pre>
<p>Any time you reference <code>@drawable/awesomeimage</code>, the system selects the
appropriate bitmap based on the screen's density.</p>
<p class="note"><strong>Note:</strong> Low-density (ldpi) resources aren’t always necessary. When
you provide hdpi assets, the system scales them down by one half to properly fit ldpi
screens.</p>
<p>For more tips and guidelines about creating icon assets for your app, see the
<a href="{@docRoot}design/style/iconography.html">Iconography design guide</a>.</p>