• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=Supporting Different Densities
2parent.title=Designing for Multiple Screens
3parent.link=index.html
4
5trainingnavtop=true
6previous.title=Supporting Different Screen Sizes
7previous.link=screensizes.html
8next.title=Implementing Adaptative UI Flows
9next.link=adaptui.html
10
11@jd:body
12
13
14<!-- This is the training bar -->
15<div id="tb-wrapper">
16<div id="tb">
17
18<h2>This lesson teaches you to</h2>
19<ol>
20  <li><a href="#TaskUseDP">Use Density-independent Pixels</a></li>
21  <li><a href="#TaskProvideAltBmp">Provide Alternative Bitmaps</a></li>
22</ol>
23
24<h2>You should also read</h2>
25
26<ul>
27  <li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple Screens</a></li>
28  <li><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design
29Guidelines</a></li>
30</ul>
31
32<h2>Try it out</h2>
33
34<div class="download-box">
35<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">Download
36  the sample app</a>
37<p class="filename">NewsReader.zip</p>
38</div>
39
40
41</div>
42</div>
43
44<p>This lesson shows you how to support different screen densities
45by providing different resources and using resolution-independent units of
46measurements.</p>
47
48<h2 id="TaskUseDP">Use Density-independent Pixels</h2>
49
50<p>One common pitfall you must avoid when designing your layouts is using
51absolute pixels to define distances or sizes. Defining layout dimensions with
52pixels is a problem because different screens have different pixel densities,
53so the same number of pixels may correspond to different physical sizes on
54different devices. Therefore, when specifying dimensions, always use either
55<code>dp</code> or <code>sp</code> units. A <code>dp</code> is a density-independent pixel
56that corresponds to the physical size of a pixel at 160 dpi. An <code>sp</code> is the same
57base unit, but is scaled by the user's preferred text size (it’s a
58scale-independent pixel), so you should use this measurement unit when defining
59text size (but never for layout sizes).</p>
60
61<p>For example, when you specify spacing between two views, use <code>dp</code>
62rather than <code>px</code>:</p>
63
64<pre>
65&lt;Button android:layout_width="wrap_content"
66    android:layout_height="wrap_content"
67    android:text="&#64;string/clickme"
68    android:layout_marginTop="20dp" /&gt;
69</pre>
70
71<p>When specifying text size, always use <code>sp</code>:</p>
72
73<pre>
74&lt;TextView android:layout_width="match_parent"
75    android:layout_height="wrap_content"
76    android:textSize="20sp" /&gt;
77</pre>
78
79
80<h2 id="TaskProvideAltBmp">Provide Alternative Bitmaps</h2>
81
82<p>Since Android runs in devices with a wide variety of screen densities,
83you should always provide your bitmap resources tailored to each of
84the generalized density buckets: low, medium, high and extra-high density.
85This will help you achieve good graphical quality and performance on all
86screen densities.</p>
87
88<p>To generate these images, you should start with your raw resource in
89vector format and generate the images for each density using the following
90size scale:</p>
91
92<p><ul>
93  <li><code>xhdpi</code>: 2.0
94  <li><code>hdpi</code>: 1.5
95  <li><code>mdpi</code>: 1.0 (baseline)
96  <li><code>ldpi</code>: 0.75
97</ul></p>
98
99<p>This means that if you generate a 200x200 image for <code>xhdpi</code>
100devices, you should generate the same resource in 150x150 for <code>hdpi</code>,
101100x100 for <code>mdpi</code> and finally a 75x75 image for <code>ldpi</code>
102devices.</p>
103
104<p>Then, place the generated image files in the appropriate subdirectory
105under <code>res/</code> and the system will pick the correct one automatically
106based on the screen density of the device your application is running on:</p>
107
108<pre class="classic no-pretty-print">
109MyProject/
110  res/
111    drawable-xhdpi/
112        awesomeimage.png
113    drawable-hdpi/
114        awesomeimage.png
115    drawable-mdpi/
116        awesomeimage.png
117    drawable-ldpi/
118        awesomeimage.png
119</pre>
120
121<p>Then, any time you reference <code>&#64;drawable/awesomeimage</code>, the system selects the
122appropriate bitmap based on the screen's dpi.</p>
123
124<p>For more tips and guidelines for creating icon assets for your application, see the <a
125href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design
126Guidelines</a>.</p>
127
128