docs/html/training/multiscreen/screendensities.jd

page.title=Supporting Different Densities
page.metaDescription=Providing sets of layouts and drawable resources for specific ranges of device screens.
meta.tags="multiple screens"

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}design/style/iconography.html">Iconography</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>

 <!-- video box -->
<a class="notice-developers-video left" href="https://www.youtube.com/watch?v=zhszwkcay2A">
<div>
    <h3>Video</h3>
    <p>DesignBytes: Density-independent Pixels</p>
</div>
</a>

<br style="clear:left">

<p>For example, when you specify spacing between two views, use <code>dp</code>
rather than <code>px</code>:</p>

<pre>
&lt;Button android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="&#64;string/clickme"
    android:layout_marginTop="20dp" /&gt;
</pre>

<p>When specifying text size, always use <code>sp</code>:</p>

<pre>
&lt;TextView android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="20sp" /&gt;
</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>&#64;drawable/awesomeimage</code>, the system selects the
appropriate bitmap based on the screen's dpi.</p>

<p>Place your launcher icons in the <code>mipmap/</code> folders. </p>

<pre>res/...
    mipmap-ldpi/...
        <em>finished_launcher_asset</em>.png
    mipmap-mdpi/...
        <em>finished_launcher_asset</em>.png
    mipmap-hdpi/...
        <em>finished_launcher_asset</em>.png
    mipmap-xhdpi/...
        <em>finished_launcher_asset</em>.png
    mipmap-xxhdpi/...
        <em>finished_launcher_asset</em>.png
    mipmap-xxxhdpi/...
        <em>finished_launcher_asset</em>.png
</pre>

<p class="note"><strong>Note:</strong> You should place all launcher icons in the
<code>res/mipmap-[density]/</code> folders, rather than <code>drawable/</code> folders to ensure
launcher apps use the best resolution icon. For more information about using the mipmap folders, see
<a href="{@docRoot}tools/projects/index.html#mipmap">Managing Projects Overview</a>.</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>