1page.title=Supporting Different Screens
2page.tags=layouts
3helpoutsWidget=true
4
5trainingnavtop=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
21Screens</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
30expect that your app will be installed on devices with screens that range in both size
31and density. As such, you should include some alternative resources that optimize your app’s
32appearance 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
41these alternative resources in separate directories, similar to how you do for different language
42strings.</p>
43
44<p>Also be aware that the screens orientation (landscape or portrait) is considered a variation of
45screen size, so many apps should revise the layout to optimize the user experience in each
46orientation.</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
52file for each screen size you want to support. Each layout should be
53saved into the appropriate resources directory, named with a <code>-&lt;screen_size></code>
54suffix.  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
58properly fit the screen. Thus, your layouts for different screen sizes don't
59need to worry about the absolute size of UI elements but instead focus on the layout structure that
60affects the user experience (such as the size or position of important views relative to sibling
61views).</p>
62
63<p>For example, this project includes a default layout and an alternative layout for <em>large</em>
64screens:</p>
65
66<pre class="classic no-pretty-print">
67MyProject/
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
76an 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&#64;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
89the device on which your app is running. More information about how Android selects the
90appropriate resource is available in the <a
91href="{@docRoot}guide/topics/resources/providing-resources.html#BestMatch">Providing Resources</a>
92guide.</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">
97MyProject/
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
108you need to use both the <code>large</code> and <code>land</code> qualifier:</p>
109
110<pre class="classic no-pretty-print">
111MyProject/
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
124defining screen sizes that allows you to specify resources for screen sizes based on
125the minimum width and height in terms of density-independent pixels. This lesson does not cover
126this new technique. For more information, read <a
127href="{@docRoot}training/multiscreen/index.html">Designing for Multiple
128Screens</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
135density buckets: low, medium, high and extra-high density. This helps you achieve good graphical
136quality 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
139the 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
148resource 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">
153MyProject/
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
166appropriate bitmap based on the screen's density.</p>
167
168<p class="note"><strong>Note:</strong> Low-density (ldpi) resources aren’t always necessary.  When
169you provide hdpi assets, the system scales them down by one half to properly fit ldpi
170screens.</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