Home | History | Annotate | Download | only in supporting-devices 
      1 page.title=Supporting Different Screens
      2 parent.title=Supporting Different Devices
      3 parent.link=index.html
      4 
      5 trainingnavtop=true
      6 previous.title=Supporting Different Languages
      7 previous.link=languages.html
      8 next.title=Supporting Different Platform Versions
      9 next.link=platforms.html
     10 
     11 @jd:body
     12 
     13 <div id="tb-wrapper">
     14   <div id="tb">
     15     
     16     <h2>This lesson teaches you to</h2>
     17     <ol>
     18       <li><a href="#create-layouts">Create Different Layouts</a></li>
     19       <li><a href="#create-bitmaps">Create Different Bitmaps</a></li>
     20     </ol>
     21     
     22     <h2>You should also read</h2>
     23     <ul>
     24       <li><a href="{@docRoot}training/multiscreen/index.html">Designing for Multiple
     25 Screens</a></li>
     26       <li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
     27 Screens</a></li>
     28       <li><a href="{@docRoot}design/style/iconography.html">Iconography design guide</a></li>
     29     </ul>
     30   </div>
     31 </div>
     32 
     33 <p>Android categorizes device screens using two general properties:  size and density.  You should 
     34 expect that your app will be installed on devices with screens that range in both size 
     35 and density. As such, you should include some alternative resources that optimize your apps 
     36 appearance for different screen sizes and densities.</p>
     37 
     38 <ul>
     39   <li>There are four generalized sizes: small, normal, large, xlarge</li>
     40   <li>And four generalized densities: low (ldpi), medium (mdpi), high (hdpi), extra high
     41 (xhdpi)</li>
     42 </ul>
     43 
     44 <p>To declare different layouts and bitmaps you'd like to use for different screens, you must place
     45 these alternative resources in separate directories, similar to how you do for different language
     46 strings.</p>
     47 
     48 <p>Also be aware that the screens orientation (landscape or portrait) is considered a variation of
     49 screen size, so many apps should revise the layout to optimize the user experience in each
     50 orientation.</p>
     51 
     52 
     53 <h2 id="create-layouts">Create Different Layouts</h2> 
     54 
     55 <p>To optimize your user experience on different screen sizes, you should create a unique layout XML
     56 file for each screen size you want to support. Each layout should be 
     57 saved into the appropriate resources directory, named with a <code>-&lt;screen_size></code> 
     58 suffix.  For example, a unique layout for large screens should be saved under 
     59 <code>res/layout-large/</code>.</p>
     60 
     61 <p class="note"><strong>Note:</strong> Android automatically scales your layout in order to
     62 properly fit the screen. Thus, your layouts for different screen sizes don't
     63 need to worry about the absolute size of UI elements but instead focus on the layout structure that
     64 affects the user experience (such as the size or position of important views relative to sibling
     65 views).</p>
     66 
     67 <p>For example, this project includes a default layout and an alternative layout for <em>large</em>
     68 screens:</p>
     69 
     70 <pre class="classic no-pretty-print">
     71 MyProject/
     72     res/
     73         layout/
     74             main.xml
     75         layout-large/
     76             main.xml
     77 </pre>
     78 
     79 <p>The file names must be exactly the same, but their contents are different in order to provide
     80 an optimized UI for the corresponding screen size.</p>
     81 
     82 <p>Simply reference the layout file in your app as usual:</p>
     83 
     84 <pre>
     85 &#64;Override
     86  protected void onCreate(Bundle savedInstanceState) {
     87      super.onCreate(savedInstanceState);
     88      setContentView(R.layout.main);
     89 }
     90 </pre>
     91 
     92 <p>The system loads the layout file from the appropriate layout directory based on screen size of 
     93 the device on which your app is running. More information about how Android selects the
     94 appropriate resource is available in the <a
     95 href="{@docRoot}guide/topics/resources/providing-resources.html#BestMatch">Providing Resources</a>
     96 guide.</p>
     97 
     98 <p>As another example, here's a project with an alternative layout for landscape orientation:</p>
     99 
    100 <pre class="classic no-pretty-print">
    101 MyProject/
    102     res/
    103         layout/
    104             main.xml
    105         layout-land/
    106             main.xml
    107 </pre>
    108 
    109 <p>By default, the <code>layout/main.xml</code> file is used for portrait orientation.</p>
    110 
    111 <p>If you want a provide a special layout for landscape, including while on large screens, then
    112 you need to use both the <code>large</code> and <code>land</code> qualifier:</p>
    113 
    114 <pre class="classic no-pretty-print">
    115 MyProject/
    116     res/
    117         layout/              # default (portrait)
    118             main.xml
    119         layout-land/         # landscape
    120             main.xml
    121         layout-large/        # large (portrait)
    122             main.xml
    123         layout-large-land/   # large landscape
    124             main.xml
    125 </pre>
    126 
    127 <p class="note"><strong>Note:</strong> Android 3.2 and above supports an advanced method of 
    128 defining screen sizes that allows you to specify resources for screen sizes based on
    129 the minimum width and height in terms of density-independent pixels. This lesson does not cover
    130 this new technique. For more information, read <a
    131 href="{@docRoot}training/multiscreen/index.html">Designing for Multiple
    132 Screens</a>.</p>
    133 
    134 
    135  
    136 <h2 id="create-bitmaps">Create Different Bitmaps</h2>
    137 
    138 <p>You should always provide bitmap resources that are properly scaled to each of the generalized
    139 density buckets: low, medium, high and extra-high density. This helps you achieve good graphical
    140 quality and performance on all screen densities.</p>
    141 
    142 <p>To generate these images, you should start with your raw resource in vector format and generate 
    143 the images for each density using the following size scale:</p>
    144 <ul>
    145 <li>xhdpi: 2.0</li>
    146 <li>hdpi: 1.5</li>
    147 <li>mdpi: 1.0 (baseline)</li>
    148 <li>ldpi: 0.75</li>
    149 </ul>
    150 
    151 <p>This means that if you generate a 200x200 image for xhdpi devices, you should generate the same 
    152 resource in 150x150 for hdpi, 100x100 for mdpi, and 75x75 for ldpi devices.</p>
    153 
    154 <p>Then, place the files in the appropriate drawable resource directory:</p>
    155 
    156 <pre class="classic no-pretty-print">
    157 MyProject/
    158     res/
    159         drawable-xhdpi/
    160             awesomeimage.png
    161         drawable-hdpi/
    162             awesomeimage.png
    163         drawable-mdpi/
    164             awesomeimage.png
    165         drawable-ldpi/
    166             awesomeimage.png
    167 </pre>
    168 
    169 <p>Any time you reference <code>@drawable/awesomeimage</code>, the system selects the 
    170 appropriate bitmap based on the screen's density.</p>
    171 
    172 <p class="note"><strong>Note:</strong> Low-density (ldpi) resources arent always necessary.  When
    173 you provide hdpi assets, the system scales them down by one half to properly fit ldpi
    174 screens.</p>
    175 
    176 <p>For more tips and guidelines about creating icon assets for your app, see the 
    177 <a href="{@docRoot}design/style/iconography.html">Iconography design guide</a>.</p>
    178 
    179 
    180 
    181