Home | History | Annotate | Download | only in multiscreen 
      1 page.title=Supporting Different Densities
      2 parent.title=Designing for Multiple Screens
      3 parent.link=index.html
      4 
      5 trainingnavtop=true
      6 previous.title=Supporting Different Screen Sizes
      7 previous.link=screensizes.html
      8 next.title=Implementing Adaptative UI Flows
      9 next.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
     29 Guidelines</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
     45 by providing different resources and using resolution-independent units of
     46 measurements.</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
     51 absolute pixels to define distances or sizes. Defining layout dimensions with
     52 pixels is a problem because different screens have different pixel densities,
     53 so the same number of pixels may correspond to different physical sizes on
     54 different 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
     56 that corresponds to the physical size of a pixel at 160 dpi. An <code>sp</code> is the same
     57 base unit, but is scaled by the user's preferred text size (its a
     58 scale-independent pixel), so you should use this measurement unit when defining
     59 text size (but never for layout sizes).</p>
     60 
     61 <p>For example, when you specify spacing between two views, use <code>dp</code> 
     62 rather 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,
     83 you should always provide your bitmap resources tailored to each of
     84 the generalized density buckets: low, medium, high and extra-high density.
     85 This will help you achieve good graphical quality and performance on all
     86 screen densities.</p>
     87 
     88 <p>To generate these images, you should start with your raw resource in
     89 vector format and generate the images for each density using the following
     90 size 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>
    100 devices, you should generate the same resource in 150x150 for <code>hdpi</code>,
    101 100x100 for <code>mdpi</code> and finally a 75x75 image for <code>ldpi</code>
    102 devices.</p>
    103 
    104 <p>Then, place the generated image files in the appropriate subdirectory
    105 under <code>res/</code> and the system will pick the correct one automatically
    106 based on the screen density of the device your application is running on:</p>
    107 
    108 <pre class="classic no-pretty-print">
    109 MyProject/
    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
    122 appropriate 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
    125 href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design
    126 Guidelines</a>.</p>
    127 
    128