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