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