1page.title=Supporting Different Densities
2page.metaDescription=Providing sets of layouts and drawable resources for specific ranges of device screens.
3meta.tags="multiple screens"
4
5parent.title=Designing for Multiple Screens
6parent.link=index.html
7
8trainingnavtop=true
9previous.title=Supporting Different Screen Sizes
10previous.link=screensizes.html
11next.title=Implementing Adaptative UI Flows
12next.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
33Guidelines</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
48by providing different resources and using resolution-independent units of
49measurements.</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
54absolute pixels to define distances or sizes. Defining layout dimensions with
55pixels is a problem because different screens have different pixel densities,
56so the same number of pixels may correspond to different physical sizes on
57different 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
59that corresponds to the physical size of a pixel at 160 dpi. An <code>sp</code> is the same
60base unit, but is scaled by the user's preferred text size (it’s a
61scale-independent pixel), so you should use this measurement unit when defining
62text 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>
75rather than <code>px</code>:</p>
76
77<pre>
78&lt;Button android:layout_width="wrap_content"
79    android:layout_height="wrap_content"
80    android:text="&#64;string/clickme"
81    android:layout_marginTop="20dp" /&gt;
82</pre>
83
84<p>When specifying text size, always use <code>sp</code>:</p>
85
86<pre>
87&lt;TextView android:layout_width="match_parent"
88    android:layout_height="wrap_content"
89    android:textSize="20sp" /&gt;
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,
96you should always provide your bitmap resources tailored to each of
97the generalized density buckets: low, medium, high and extra-high density.
98This will help you achieve good graphical quality and performance on all
99screen densities.</p>
100
101<p>To generate these images, you should start with your raw resource in
102vector format and generate the images for each density using the following
103size 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>
113devices, you should generate the same resource in 150x150 for <code>hdpi</code>,
114100x100 for <code>mdpi</code> and finally a 75x75 image for <code>ldpi</code>
115devices.</p>
116
117<p>Then, place the generated image files in the appropriate subdirectory
118under <code>res/</code> and the system will pick the correct one automatically
119based on the screen density of the device your application is running on:</p>
120
121<pre class="classic no-pretty-print">
122MyProject/
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>&#64;drawable/awesomeimage</code>, the system selects the
135appropriate 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
156launcher 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
160href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design
161Guidelines</a>.</p>
162
163