801fda548c
This change adds the text for the AndroidU lesson "Designing for Multiple Screens", which shows how to write applications that adapt properly to screen size, density and orientation for maximum compatibility. Update makefile and resources-data.js for rendering source in HTML Add ZIP file for sample Change-Id: I671bb3063d5bf02681bc547ffe5262a9df22037a
128 lines
4.2 KiB
Plaintext
128 lines
4.2 KiB
Plaintext
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>
|
||
|