Home | History | Annotate | Download | only in practices
      1 page.title=Supporting Multiple Screens
      2 @jd:body
      3 
      4 <div id="qv-wrapper">
      5 <div id="qv">
      6 
      7   <h2>Quickview</h2>
      8   <ul>
      9     <li>Android runs on devices that have different screen sizes and densities.</li>
     10     <li>The screen on which your application is displayed can affect its user interface.</li>
     11     <li>The system handles most of the work of adapting your app to the current screen.</li>
     12     <li>You should create screen-specific resources for precise control of your UI. </li>
     13   </ul>
     14 
     15   <h2>In this document</h2>
     16   <ol>
     17     <li><a href="#overview">Overview of Screen Support</a>
     18       <ol>
     19         <li><a href="#terms">Terms and concepts</a></li>
     20         <li><a href="#range">Range of screens supported</a></li>
     21         <li><a href="#density-independence">Density independence</a></li>
     22       </ol></li>
     23     <li><a href="#support">How to Support Multiple Screens</a>
     24       <ol>
     25         <li><a href="#qualifiers">Using configuration qualifiers</a></li>
     26         <li><a href="#DesigningResources">Designing alternative layouts and drawables</a></li>
     27       </ol></li>
     28     <li><a href="#DeclaringTabletLayouts">Declaring Tablet Layouts for Android 3.2</a> <span
     29 class="new">new!</span>
     30       <ol>
     31         <li><a href="#NewQualifiers">Using new size qualifiers</a></li>
     32         <li><a href="#ConfigurationExamples">Configuration examples</a></li>
     33         <li><a href="#DeclaringScreenSizeSupport">Declaring screen size support</a></li>
     34       </ol></li>
     35     <li><a href="#screen-independence">Best Practices</a></li>
     36     <li><a href="#DensityConsiderations">Additional Density Considerations</a>
     37       <ol>
     38         <li><a href="#scaling">Scaling Bitmap objects created at runtime</a></li>
     39         <li><a href="#dips-pels">Converting dp units to pixel units</a></li>
     40       </ol></li>
     41     <li><a href="#testing">How to Test Your Application on Multiple Screens</a></li>
     42   </ol>
     43 
     44   <h2>Related samples</h2>
     45   <ol>
     46     <li><a href="{@docRoot}resources/samples/MultiResolution/index.html">Multiple
     47 Resolutions</a></li>
     48   </ol>
     49 
     50   <h2>See also</h2>
     51   <ol>
     52     <li><a
     53 href="http://android-developers.blogspot.com/2011/09/thinking-like-web-designer.html">Thinking
     54 Like a Web Designer</a></li>
     55     <li><a
     56 href="{@docRoot}guide/topics/resources/providing-resources.html#AlternativeResources">
     57 Providing Alternative Resources</a></li>
     58     <li><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design
     59 Guidelines</a></li>
     60     <li><a href="{@docRoot}tools/devices/index.html">Managing Virtual Devices</a></li>
     61   </ol>
     62 
     63 </div>
     64 </div>
     65 
     66 <p>Android runs on a variety of devices that offer different screen sizes and densities. For
     67 applications, the Android system provides a consistent development environment across devices and
     68 handles most of the work to adjust each application's user interface to the screen on which it is
     69 displayed. At the same time, the system provides APIs that allow you to control your
     70 application's UI for specific screen sizes and densities, in order to optimize your UI
     71 design for different screen configurations. For example, you might want a UI for tablets
     72 that's different from the UI for handsets.</p>
     73 
     74 <p>Although the system performs scaling and resizing to make your application work on
     75 different screens, you should make the effort to optimize your application for different screen
     76 sizes and densities. In doing so, you maximize the user experience for all devices and your users
     77 believe that your application was actually designed for <em>their</em> devices&mdash;rather than
     78 simply stretched to fit the screen on their devices.</p>
     79 
     80 <p>By following the practices described in this document, you can create an application that
     81 displays properly and provides an optimized user experience on all supported screen configurations,
     82 using a single {@code .apk} file.</p>
     83 
     84 <p class="note"><strong>Note:</strong> The information in this document assumes that your
     85 application is designed for Android 1.6 (API Level 4) or higher. If your application supports
     86 Android 1.5 or lower, please first read <a
     87 href="{@docRoot}guide/practices/screens-support-1.5.html">Strategies for Android 1.5</a>.
     88 <br/><br/>
     89 Also, be aware that <strong>Android 3.2 has introduced new APIs</strong> that allow you to more
     90 precisely control the layout resources your application uses for different screen sizes. These new
     91 features are especially important if you're developing an application that's optimized for tablets.
     92 For details, see the section about <a href="#DeclaringTabletLayouts">Declaring Tablet Layouts for
     93 Android 3.2</a>.
     94 </p>
     95 
     96 
     97 
     98 <h2 id="overview">Overview of Screens Support</h2>
     99 
    100 <p>This section provides an overview of Android's support for multiple screens, including: an
    101 introduction to the terms and concepts used in this document and in the API, a summary of the screen
    102 configurations that the system supports, and an overview of the API and underlying
    103 screen-compatibility features.</p>
    104 
    105 <h3 id="terms">Terms and concepts</h3>
    106 
    107 <dl>
    108 <dt><em>Screen size</em></dt>
    109   <dd>Actual physical size, measured as the screen's diagonal.
    110 
    111   <p>For simplicity, Android groups all actual screen sizes into four generalized sizes: small,
    112 normal, large, and extra large.</p></dd>
    113 
    114 <dt><em>Screen density</em></dt>
    115   <dd>The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots
    116 per inch). For example, a "low" density screen has fewer pixels within a given physical area,
    117 compared to a "normal" or "high" density screen.</p>
    118 
    119   <p>For simplicity, Android groups all actual screen densities into four generalized densities:
    120 low, medium, high, and extra high.</p></dd>
    121 
    122 <dt><em>Orientation</em></dt>
    123   <dd>The orientation of the screen from the user's point of view. This is either landscape or
    124 portrait, meaning that the screen's aspect ratio is either wide or tall, respectively. Be aware
    125 that not only do different devices operate in different orientations by default, but the
    126 orientation can change at runtime when the user rotates the device.
    127 </dd>
    128 
    129 <dt><em>Resolution</em></dt>
    130   <dd>The total number of physical pixels on a screen. When adding support for multiple screens,
    131 applications do not work directly with resolution; applications should be concerned only with screen
    132 size and density, as specified by the generalized size and density groups.</dd>
    133 
    134 <dt><em>Density-independent pixel (dp)</em></dt>
    135   <dd>A virtual pixel unit that you should use when defining UI layout, to express layout dimensions
    136 or position in a density-independent way.
    137   <p>The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is
    138 the baseline density assumed by the system for a "medium" density screen. At runtime, the system
    139 transparently handles any scaling of the dp units, as necessary, based on the actual density of the
    140 screen in use. The conversion of dp units to screen pixels is simple: 
    141 <nobr><code>px = dp * (dpi / 160)</code></nobr>.
    142 For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units
    143 when defining your application's UI, to ensure proper display of your UI on screens with different
    144 densities. </p></dd>
    145 </dl>
    146 
    147 
    148 <h3 id="range">Range of screens supported</h3>
    149 
    150 <p>Starting with Android 1.6 (API Level 4), Android provides support for multiple screen sizes and
    151 densities, reflecting the many different screen configurations that a device may have. You can use
    152 features of the Android system to optimize your application's user interface for each screen
    153 configuration and ensure that your application not only renders properly, but provides the best
    154 user experience possible on each screen.</p>
    155 
    156 <p>To simplify the way that you design your user interfaces for multiple screens, Android divides
    157 the range of actual screen sizes and densities into:</p>
    158 
    159 <ul>
    160 <li>A set of four generalized <strong>sizes</strong>: <em>small</em>, <em>normal</em>,
    161 <em>large</em>,
    162 and <em>xlarge</em></em>
    163 <p class="note"><strong>Note:</strong> Beginning with Android 3.2 (API level 13), these size groups
    164 are deprecated in favor of a new technique for managing screen sizes based on the available screen
    165 width. If you're developing for Android 3.2 and greater, see <a
    166 href="#DeclaringTabletLayouts">Declaring Tablet Layouts for Android 3.2</a> for more
    167 information.</p>
    168 </li>
    169 <li>A set of four generalized <strong>densities</strong>: <em>ldpi</em> (low), <em>mdpi</em>
    170 (medium),
    171 <em>hdpi</em> (high), and <em>xhdpi</em> (extra high)
    172 </li>
    173 </ul>
    174 
    175 <p>The generalized sizes and densities are arranged around a
    176 baseline configuration that is a <em>normal</em> size and <em>mdpi</em> (medium) density. This
    177 baseline is based upon the screen configuration for the first Android-powered device, the T-Mobile
    178 G1, which has an HVGA screen (until Android 1.6, this was the only screen configuration that Android
    179 supported).</p>
    180 
    181 <p>Each generalized size and density spans a range of actual screen sizes and densities. For example,
    182 two devices that both report a screen size of <em>normal</em> might have actual screen sizes and
    183 aspect ratios that are slightly different when measured by hand. Similarly, two devices that report
    184 a screen density of <em>hdpi</em> might have real pixel densities that are slightly different.
    185 Android makes these differences abstract to applications, so you can provide UI designed for the
    186 generalized sizes and densities and let the system handle any final adjustments as necessary. Figure
    187 1 illustrates how different sizes and densities are roughly categorized into the different size
    188 and density groups.</p>
    189 
    190 <img src="{@docRoot}images/screens_support/screens-ranges.png" style="padding:1em 0 0" alt="" />
    191 <p class="img-caption"><strong>Figure 1.</strong>
    192 Illustration of how Android roughly maps actual sizes and densities
    193 to generalized sizes and densities (figures are not exact).</p>
    194 
    195 <p>As you design your UI for different screen sizes, you'll discover that each design requires a
    196 minimum amount of space. So, each generalized screen size above has an associated minimum
    197 resolution that's defined by the system. These minimum sizes are in "dp" units&mdash;the same units
    198 you should use when defining your layouts&mdash;which allows the system to avoid worrying about
    199 changes in screen density.</p>
    200 
    201 <ul>
    202   <li><em>xlarge</em> screens are at least 960dp x 720dp</li>
    203   <li><em>large</em> screens are at least 640dp x 480dp</li>
    204   <li><em>normal</em> screens are at least 470dp x 320dp</li>
    205   <li><em>small</em> screens are at least 426dp x 320dp</li>
    206 </ul>
    207 
    208 <p class="note"><strong>Note:</strong> These minimum screen sizes were not as well defined prior to
    209 Android 3.0, so you may encounter some devices that are mis-classified between normal and large. 
    210 These are also based on the physical resolution of the screen, so may vary across devices&mdash;for
    211 example a 1024x720 tablet with a system bar actually has a bit less space available to the
    212 application due to it being used by the system bar.</p>
    213 
    214 <p>To optimize your application's UI for the different screen sizes and densities, you can provide
    215 <a href="{@docRoot}guide/topics/resources/providing-resources.html#AlternativeResources">alternative
    216 resources</a> for any of the generalized sizes and densities. Typically, you should
    217 provide alternative layouts for some of the different screen sizes and alternative bitmap images for
    218 different screen densities. At runtime, the system uses the appropriate resources
    219 for your application, based on the generalized size or density of the current device screen.</p>
    220 
    221 <p>You do not need to provide alternative resources for every combination of screen size and
    222 density. The system provides robust compatibility features that can handle most of the work of
    223 rendering your application on any device screen, provided that you've implemented your UI using
    224 techniques that allow it to gracefully resize (as described in the <a
    225 href="#screen-independence">Best Practices</a>, below).</p>
    226 
    227 <p class="note"><strong>Note:</strong> The characteristics that define a device's generalized screen
    228 size and density are independent from each other. For example, a WVGA high-density screen is
    229 considered a normal size screen because its physical size is about the same as the T-Mobile G1
    230 (Android's first device and baseline screen configuration). On the other hand, a WVGA medium-density
    231 screen is considered a large size screen. Although it offers the same resolution (the same number of
    232 pixels), the WVGA medium-density screen has a lower screen density, meaning that each pixel is
    233 physically larger and, thus, the entire screen is larger than the baseline (normal size) screen.</p>
    234 
    235 
    236 
    237 <h3 id="density-independence">Density independence</h3>
    238 
    239 <p>Your application achieves "density independence" when it preserves the physical size (from
    240 the user's point of view) of user interface elements when displayed on screens with different
    241 densities.</p>
    242 
    243 <p>Maintaining density independence is important because, without it, a UI element (such as a
    244 button) appears physically larger on a low density screen and smaller on a high density screen. Such
    245 density-related size changes can cause problems in your application layout and usability. Figures 2
    246 and 3 show the difference between an application when it does not provide density independence and
    247 when it does, respectively.</p>
    248 
    249 <img src="{@docRoot}images/screens_support/density-test-bad.png" alt=""  />
    250 <p class="img-caption"><strong>Figure 2.</strong> Example application without support for
    251 different densities, as shown on low, medium, and high density screens.</p>
    252 
    253 <img src="{@docRoot}images/screens_support/density-test-good.png" alt="" />
    254 <p class="img-caption"><strong>Figure 3.</strong> Example application with good support for
    255 different densities (it's density independent), as shown on low, medium, and high
    256 density screens.</p>
    257 
    258 <p>The Android system helps your application achieve density independence in two ways: </p>
    259 
    260 <ul>
    261 <li>The system scales dp units as appropriate for the current screen density</li>
    262 <li>The system scales drawable resources to the appropriate size, based on the current screen
    263 density, if necessary</li>
    264 </ul>
    265 
    266 <p>In figure 2, the text view and bitmap drawable have dimensions specified in pixels ({@code px}
    267 units), so the views are physically larger on a low density screen and smaller on a high density
    268 screen. This is because although the actual screen sizes may be the same, the high density screen
    269 has more pixels per inch (the same amount of pixels fit in a smaller area). In figure 3, the layout
    270 dimensions are specified in density-independent pixels ({@code dp} units). Because the baseline for
    271 density-independent pixels is a medium-density screen, the device with a medium-density screen looks
    272 the same as it does in figure 2. For the low-density and high-density screens, however, the system
    273 scales the density-independent pixel values down and up, respectively, to fit the screen as
    274 appropriate.</p>
    275 
    276 <p>In most cases, you can ensure density independence in your application simply by specifying all
    277 layout dimension values in density-independent pixels (<code>dp</code> units) or with {@code
    278 "wrap_content"}, as appropriate. The system then scales bitmap drawables as appropriate in order to
    279 display at the appropriate size, based on the appropriate scaling factor for the current screen's
    280 density.</p>
    281 
    282 <p>However, bitmap scaling can result in blurry or pixelated bitmaps, which you might notice in the
    283 above screenshots. To avoid these artifacts, you should provide alternative bitmap resources for
    284 different densities. For example, you should provide higher-resolution bitmaps for high-density
    285 screens and the system will use those instead of resizing the bitmap designed for medium-density
    286 screens. The following section describes more about how to supply alternative resources for
    287 different screen configurations.</p>
    288 
    289 
    290 
    291 <h2 id="support">How to Support Multiple Screens</h2>
    292 
    293 <p>The foundation of Android's support for multiple screens is its ability to manage the rendering
    294 of an application's layout and bitmap drawables in an appropriate way for the current screen
    295 configuration. The system handles most of the work to render your application properly on each
    296 screen configuration by scaling layouts to fit the screen size/density and scaling bitmap drawables
    297 for the screen density, as appropriate. To more gracefully handle different screen configurations,
    298 however, you should also:</p>
    299 
    300 <ul>
    301   <li><strong>Explicitly declare in the manifest which screen sizes your application
    302 supports</strong>
    303     <p>By declaring which screen sizes your application supports, you can ensure that only
    304 devices with the screens you support can download your application. Declaring support for
    305 different screen sizes can also affect how the system draws your application on larger
    306 screens&mdash;specifically, whether your application runs in <a
    307 href="{@docRoot}guide/practices/screen-compat-mode.html">screen compatibility mode</a>.</p>
    308     <p>To declare the screen sizes your application supports, you should include the
    309 <a href="{@docRoot}guide/topics/manifest/supports-screens-element.html">{@code
    310 &lt;supports-screens&gt;}</a> element in your manifest file.</p>
    311   </li>
    312   
    313   <li><strong>Provide different layouts for different screen sizes</strong>
    314     <p>By default, Android resizes your application layout to fit the current device screen. In most
    315 cases, this works fine. In other cases, your UI might not look as good and might need adjustments
    316 for different screen sizes. For example, on a larger screen, you might want to adjust the position
    317 and size of some elements to take advantage of the additional screen space, or on a smaller screen,
    318 you might need to adjust sizes so that everything can fit on the screen.</p>
    319     <p>The configuration qualifiers you can use to provide size-specific resources are
    320 <code>small</code>, <code>normal</code>, <code>large</code>, and <code>xlarge</code>. For
    321 example, layouts for an extra large screen should go in {@code layout-xlarge/}.</p>
    322     <p>Beginning with Android 3.2 (API level 13), the above size groups are deprecated and you
    323 should instead use the {@code sw&lt;N&gt;dp} configuration qualifier to define the smallest
    324 available width required by your layout resources. For example, if your multi-pane tablet layout
    325 requires at least 600dp of screen width, you should place it in {@code layout-sw600dp/}. Using the
    326 new techniques for declaring layout resources is discussed further in the section about <a
    327 href="#DeclaringTabletLayouts">Declaring Tablet Layouts for Android 3.2</a>.</p>
    328   </li>
    329   
    330   <li><strong>Provide different bitmap drawables for different screen densities</strong>
    331     <p>By default, Android scales your bitmap drawables ({@code .png}, {@code .jpg}, and {@code
    332 .gif} files) and Nine-Patch drawables ({@code .9.png} files) so that they render at the appropriate
    333 physical size on each device. For example, if your application provides bitmap drawables only for
    334 the baseline, medium screen density (mdpi), then the system scales them up when on a high-density
    335 screen, and scales them down when on a low-density screen. This scaling can cause artifacts in the
    336 bitmaps. To ensure your bitmaps look their best, you should include alternative versions at
    337 different resolutions for different screen densities.</p>
    338     <p>The configuration qualifiers you can use for density-specific resources are
    339 <code>ldpi</code> (low), <code>mdpi</code> (medium), <code>hdpi</code> (high), and
    340 <code>xhdpi</code> (extra high). For example, bitmaps for high-density screens should go in
    341 {@code drawable-hdpi/}.</p>
    342   </li>
    343 </ul>
    344 
    345 <p>The size and density configuration qualifiers correspond to the generalized sizes and densities
    346 described in <a href="#range">Range of screens supported</a>, above.</p>
    347 
    348 <p class="note"><strong>Note:</strong> If you're not familiar with configuration qualifiers and how
    349 the system uses them to apply alternative resources, read <a
    350 href="{@docRoot}guide/topics/resources/providing-resources.html#AlternativeResources">Providing
    351 Alternative Resources</a> for more information.</p>
    352 
    353 <p>At runtime, the system ensures the best possible display on the current screen with
    354 the following procedure for any given resource:</p>
    355 
    356 <ol>
    357 <li>The system uses the appropriate alternative resource
    358   <p>Based on the size and density of the current screen, the system uses any size- and
    359 density-specific resource provided in your application. For example, if the device has a
    360 high-density screen and the application requests a drawable resource, the system looks for a
    361 drawable resource directory that best matches the device configuration. Depending on the other
    362 alternative resources available, a resource directory with the {@code hdpi} qualifier (such as
    363 {@code drawable-hdpi/}) might be the best match, so the system uses the drawable resource from this
    364 directory.</p>
    365 </li>
    366 
    367 <li>If no matching resource is available, the system uses the default resource and scales it up
    368 or down as needed to match the current screen size and density
    369   <p>The "default" resources are those that are not tagged with a configuration qualifier. For
    370 example, the resources in {@code drawable/} are the default drawable resources. The system
    371 assumes that default resources are designed for the baseline screen size and density, which is a
    372 normal screen size and a medium density. As such, the system scales default density
    373 resources up for high-density screens and down for low-density screens, as appropriate.</p>
    374   <p>However, when the system is looking for a density-specific resource and does not find it in
    375 the density-specific directory, it won't always use the default resources. The system may
    376 instead use one of the other density-specific resources in order to provide better results
    377 when scaling. For example, when looking for a low-density resource and it is not available, the
    378 system prefers to scale-down the high-density version of the resource, because the
    379 system can easily scale a high-density resource down to low-density by a factor of 0.5, with 
    380 fewer artifacts, compared to scaling a medium-density resource by a factor of 0.75.</p>
    381 </li>
    382 </ol>
    383 
    384   <p>For more information about how Android selects alternative resources by matching configuration
    385 qualifiers to the device configuration, read
    386 <a href="{@docRoot}guide/topics/resources/providing-resources.html#BestMatch">How Android
    387 Finds the Best-matching Resource</a>.</p>
    388 
    389 
    390 
    391 
    392 <h3 id="qualifiers">Using configuration qualifiers</h3>
    393 
    394 <p>Android supports several configuration qualifiers that allow you to control how the system
    395 selects your alternative resources based on the characteristics of the current device screen. A
    396 configuration qualifier is a string that you can append to a resource directory in your Android
    397 project and specifies the configuration for which the resources inside are designed.</p>
    398 
    399 <p>To use a configuration qualifier:</p>
    400 <ol>
    401   <li>Create a new directory in your project's {@code res/} directory and name it using the
    402 format: <nobr>{@code &lt;resources_name&gt;-&lt;qualifier&gt;}</nobr>
    403     <ul>
    404       <li>{@code &lt;resources_name&gt;} is the standard resource name (such as {@code drawable} or
    405 {@code layout}).</li>
    406       <li>{@code &lt;qualifier&gt;} is a configuration qualifier from table 1, below, specifying the
    407 screen configuration for which these resources are to be used (such as {@code hdpi} or {@code
    408 xlarge}).</li>
    409     </ul>
    410     <p>You can use more than one {@code &lt;qualifier&gt;} at a time&mdash;simply separate each
    411 qualifier with a dash.</p>
    412   </li>
    413   <li>Save the appropriate configuration-specific resources in this new directory. The resource
    414 files must be named exactly the same as the default resource files.</li>
    415 </ol>
    416 
    417 <p>For example, {@code xlarge} is a configuration qualifier for extra large screens. When you append
    418 this string to a resource directory name (such as {@code layout-xlarge}), it indicates to the
    419 system that these resources are to be used on devices that have an extra large screen.</p>
    420 
    421 <p class="table-caption"><strong>Table 1.</strong> Configuration qualifiers that allow you to
    422 provide special resources for different screen configurations.</p>
    423 
    424 <table>
    425 <tr>
    426 <th>Screen characteristic</th>
    427 <th>Qualifier</th>
    428 <th>Description</th>
    429 </tr>
    430 
    431 <tr>
    432   <td rowspan="4">Size</td>
    433   <td><code>small</code></td>
    434   <td>Resources for <em>small</em> size screens.</td>
    435 </tr>
    436 <tr>
    437   <td><code>normal</code></td>
    438   <td>Resources for <em>normal</em> size screens. (This is the baseline size.)</td>
    439 </tr>
    440 <tr>
    441 <td><code>large</code></td>
    442 <td>Resources for <em>large</em> size screens.</td>
    443 </tr>
    444 <tr>
    445 <td><code>xlarge</code></td>
    446 <td>Resources for <em>extra large</em> size screens.</td>
    447 </tr>
    448 
    449 <tr>
    450 <td rowspan="6">Density</td>
    451 <td><code>ldpi</code></td>
    452 <td>Resources for low-density (<em>ldpi</em>) screens (~120dpi).</td>
    453 </tr>
    454 <tr>
    455 <td><code>mdpi</code></td>
    456 <td>Resources for medium-density (<em>mdpi</em>) screens (~160dpi). (This is the baseline
    457 density.)</td>
    458 </tr>
    459 <tr>
    460 <td><code>hdpi</code></td>
    461 <td>Resources for high-density (<em>hdpi</em>) screens (~240dpi).</td>
    462 </tr>
    463 <tr>
    464 <td><code>xhdpi</code></td>
    465 <td>Resources for extra high-density (<em>xhdpi</em>) screens (~320dpi).</td>
    466 </tr>
    467 <tr>
    468 <td><code>nodpi</code></td>
    469 <td>Resources for all densities. These are density-independent resources. The system does not
    470 scale resources tagged with this qualifier, regardless of the current screen's density.</td>
    471 </tr>
    472 <tr>
    473 <td><code>tvdpi</code></td>
    474 <td>Resources for screens somewhere between mdpi and hdpi; approximately 213dpi. This is not
    475 considered a "primary" density group. It is mostly intended for televisions and most apps shouldn't
    476 need it&mdash;providing mdpi and hdpi resources is sufficient for most apps and the system will
    477 scale them as appropriate. If you find it necessary to provide tvdpi resources, you should size them
    478 at a factor of 1.33*mdpi. For example, a 100px x 100px image for mdpi screens should be 133px x
    479 133px for tvdpi.</td>
    480 </tr>
    481 <tr>
    482 <td rowspan="2">Orientation</td>
    483 <td><code>land</code></td>
    484 <td>Resources for screens in the landscape orientation (wide aspect ratio).</td>
    485 </tr>
    486 <tr>
    487 <td><code>port</code></td>
    488 <td>Resources for screens in the portrait orientation (tall aspect ratio).</td>
    489 </tr>
    490 
    491 <tr>
    492 <td rowspan="2">Aspect ratio</td>
    493 <td><code>long</code></td>
    494 <td>Resources for screens that have a significantly taller or wider aspect ratio (when in portrait
    495 or landscape orientation, respectively) than the baseline screen configuration.</td>
    496 </tr>
    497 <tr>
    498 <td><code>notlong</code></td>
    499 <td>Resources for use screens that have an aspect ratio that is similar to the baseline screen
    500 configuration.</td>
    501 </tr>
    502 </table>
    503 
    504 <p class="note"><strong>Note:</strong> If you're developing your application for Android 3.2 and
    505 higher, see the section about <a
    506 href="#DeclaringTabletLayouts">Declaring Tablet Layouts for Android 3.2</a> for information about
    507 new configuration qualifiers that you should use when declaring layout resources for specific
    508 screen sizes (instead of using the size qualifiers in table 1).</p></p>
    509 
    510 <p>For more information about how these qualifiers roughly correspond to real screen
    511 sizes and densities, see <a href="#range">Range of Screens Supported</a>, earlier in this
    512 document.</p>
    513 
    514 <p>For example, the following is a list of resource directories in an application that
    515 provides different layout designs for different screen sizes and different bitmap drawables
    516 for medium, high, and extra high density screens.</p>
    517 
    518 <pre class="classic">
    519 res/layout/my_layout.xml             // layout for normal screen size ("default")
    520 res/layout-small/my_layout.xml       // layout for small screen size
    521 res/layout-large/my_layout.xml       // layout for large screen size
    522 res/layout-xlarge/my_layout.xml      // layout for extra large screen size
    523 res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation
    524 
    525 res/drawable-mdpi/my_icon.png        // bitmap for medium density
    526 res/drawable-hdpi/my_icon.png        // bitmap for high density
    527 res/drawable-xhdpi/my_icon.png       // bitmap for extra high density
    528 </pre>
    529 
    530 <p>For more information about how to use alternative resources and a complete list of
    531 configuration qualifiers (not just for screen configurations), see
    532 <a href="{@docRoot}guide/topics/resources/providing-resources.html#AlternativeResources">
    533 Providing Alternative Resources</a>.</p>
    534 
    535 <p>Be aware that, when the Android system picks which resources to use at runtime, it uses
    536 certain logic to determing the "best matching" resources. That is, the qualifiers you use don't
    537 have to exactly match the current screen configuration in all cases in order for the system to
    538 use them. Specifically, when selecting resources based on the size qualifiers, the system will
    539 use resources designed for a screen smaller than the current screen if there are no resources
    540 that better match (for example, a large-size screen will use normal-size screen resources if
    541 necessary). However, if the only available resources are <em>larger</em> than the current screen,
    542 the system will not use them and your application will crash if no other resources match the device
    543 configuration (for example, if all layout resources are tagged with the {@code xlarge} qualifier,
    544 but the device is a normal-size screen). For more information about how the system selects
    545 resources, read <a
    546 href="{@docRoot}guide/topics/resources/providing-resources.html#BestMatch">How Android Finds the
    547 Best-matching Resource</a>.</p>
    548 
    549   <p class="note"><strong>Tip:</strong> If you have some drawable resources that the system
    550 should never scale (perhaps because you perform some adjustments to the image yourself at
    551 runtime), you should place them in a directory with the {@code nodpi} configuration qualifier.
    552 Resources with this qualifier are considered density-agnostic and the system will not scale
    553 them.</p>
    554 
    555 
    556 <h3 id="DesigningResources">Designing alternative layouts and drawables</h3>
    557 
    558 <p>The types of alternative resources you should create depends on your application's needs.
    559 Usually, you should use the size and orientation qualifiers to provide alternative layout resources
    560 and use the density qualifiers to provide alternative bitmap drawable resources.</p>
    561 
    562 <p>The following sections summarize how you might want to use the size and density qualifiers to
    563 provide alternative layouts and drawables, respectively.</p>
    564 
    565 
    566 <h4>Alternative layouts</h4>
    567 
    568 <p>Generally, you'll know whether you need alternative layouts for different screen sizes once
    569 you test your application on different screen configurations. For example:</p>
    570 
    571 <ul>
    572   <li>When testing on a small screen, you might discover that your layout doesn't quite fit on the
    573 screen. For example, a row of buttons might not fit within the width of the screen on a small screen
    574 device. In this case you should provide an alternative layout for small screens that adjusts the
    575 size or position of the buttons.</li>
    576   <li>When testing on an extra large screen, you might realize that your layout doesn't make
    577 efficient use of the big screen and is obviously stretched to fill it.
    578 In this case, you should provide an alternative layout for extra large screens that provides a
    579 redesigned UI that is optimized for bigger screens such as tablets. 
    580     <p>Although your application should work fine without an alternative layout on big screens, it's
    581 quite important to users that your application looks as though it's designed specifically for their
    582 devices. If the UI is obviously stretched, users are more likely to be unsatisfied with the
    583 application experience.</p></li>
    584   <li>And, when testing in the landscape orientation compared to the portrait orientation, you
    585 might notice that UI elements placed at the bottom of the screen for the portrait orientation
    586 should instead be on the right side of the screen in landscape orientation.</li>
    587 </ul>
    588 
    589 <p>To summarize, you should be sure that your application layout:</p>
    590 <ul>
    591   <li>Fits on small screens (so users can actually use your application)</li>
    592   <li>Is optimized for bigger screens to take advantage of the additional screen space</li>
    593   <li>Is optimized for both landscape and portrait orientations</li>
    594 </ul>
    595 
    596 <p>If your UI uses bitmaps that need to fit the size of a view even after the system scales
    597 the layout (such as the background image for a button), you should use <a
    598 href="{@docRoot}guide/topics/graphics/2d-graphics.html#nine-patch">Nine-Patch</a> bitmap files. A
    599 Nine-Patch file is basically a PNG file in which you specific two-dimensional regions that are
    600 stretchable. When the system needs to scale the view in which the bitmap is used, the system
    601 stretches the Nine-Patch bitmap, but stretches only the specified regions. As such, you don't
    602 need to provide different drawables for different screen sizes, because the Nine-Patch bitmap can
    603 adjust to any size. You should, however, provide alternate versions of your Nine-Patch files for
    604 different screen densities.</p>
    605 
    606 
    607 <h4>Alternative drawables</h4>
    608 
    609 <div class="figure" style="width:223px;margin:0">
    610 <img src="{@docRoot}images/screens_support/screens-densities.png" alt="" />
    611 <p class="img-caption"><strong>Figure 4.</strong> Relative sizes for bitmap drawables
    612 that support each density.</p>
    613 </div>
    614 
    615 <p>Almost every application should have alternative drawable resources for different screen
    616 densities, because almost every application has a launcher icon and that icon should look good on
    617 all screen densities. Likewise, if you include other bitmap drawables in your application (such
    618 as for menu icons or other graphics in your application), you should provide alternative versions or
    619 each one, for different densities.</p>
    620 
    621 <p class="note"><strong>Note:</strong> You only need to provide density-specific drawables for
    622 bitmap files ({@code .png}, {@code .jpg}, or {@code .gif}) and Nine-Path files ({@code
    623 .9.png}). If you use XML files to define shapes, colors, or other <a
    624 href="{@docRoot}guide/topics/resources/drawable-resource.html">drawable resources</a>, you should
    625 put one copy in the default drawable directory ({@code drawable/}).</p>
    626 
    627 <p>To create alternative bitmap drawables for different densities, you should follow the
    628 <b>3:4:6:8 scaling ratio</b> between the four generalized densities. For example, if you have
    629 a bitmap drawable that's 48x48 pixels for medium-density screen (the size for a launcher icon),
    630 all the different sizes should be:</p>
    631 
    632 <ul>
    633   <li>36x36 for low-density</li>
    634   <li>48x48 for medium-density</li>
    635   <li>72x72 for high-density</li>
    636   <li>96x96 for extra high-density</li>
    637 </ul>
    638 
    639 <p>For more information about designing icons, see the <a
    640 href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design Guidelines</a>,
    641 which includes size information for various bitmap drawables, such as launcher icons, menu
    642 icons, status bar icons, tab icons, and more.</p>
    643 
    644 
    645 
    646 
    647 <h2 id="DeclaringTabletLayouts">Declaring Tablet Layouts for Android 3.2</h2>
    648 
    649 <p>For the first generation of tablets running Android 3.0, the proper way to declare tablet
    650 layouts was to put them in a directory with the {@code xlarge} configuration qualifier (for example,
    651  {@code res/layout-xlarge/}). In order to accommodate other types of tablets and screen
    652 sizes&mdash;in particular, 7" tablets&mdash;Android 3.2 introduces a new way to specify resources
    653 for more discrete screen sizes. The new technique is based on the amount of space your layout needs
    654 (such as 600dp of width), rather than trying to make your layout fit the generalized size groups
    655 (such as <em>large</em> or <em>xlarge</em>).</p>
    656 
    657 <p>The reason designing for 7" tablets is tricky when using the generalized size groups is
    658 that a 7" tablet is technically in the same group as a 5" handset (the <em>large</em> group). While
    659 these two devices are seemingly close to each other in size, the amount of space for an
    660 application's UI is significantly different, as is the style of user interaction. Thus, a 7" and 5"
    661 screen should not always use the same layout. To make it possible for you to provide different
    662 layouts for these two kinds of screens, Android now allows you to specify your layout resources
    663 based on the width and/or height that's actually available for your application's layout, specified
    664 in dp units.</p>
    665 
    666 <p>For example, after you've designed the layout you want to use for tablet-style devices, you might
    667 determine that the layout stops working well when the screen is less than 600dp wide. This threshold
    668 thus becomes the minimum size that you require for your tablet layout. As
    669 such, you can now specify that these layout resources should be used only when there is at least
    670 600dp of width available for your application's UI.</p>
    671 
    672 <p>You should either pick a width and design to it as your minimum size, or test what is the
    673 smallest width your layout supports once it's complete.</p>
    674 
    675 <p class="note"><strong>Note:</strong> Remember that all the figures used with these new size APIs
    676 are density-indpendent pixel (dp) values and your layout dimensions should also always be defined
    677 using dp units, because what you care about is the amount of screen space available after the system
    678 accounts for screen density (as opposed to using raw pixel resolution). For more information about
    679 density-indpendent pixels, read <a href="#terms">Terms and concepts</a>, earlier in this
    680 document.</p>
    681 
    682 
    683 <h3 id="NewQualifiers">Using new size qualifiers</h3>
    684 
    685 <p>The different resource configurations that you can specify based on the space available for your
    686 layout are summarized in table 2. These new qualifiers offer you more control over the specific
    687 screen sizes your application supports, compared to the traditional screen size groups (small,
    688 normal, large, and xlarge).</p>
    689 
    690 <p class="note"><strong>Note:</strong> The sizes that you specify using these qualifiers are
    691 <strong>not the actual screen sizes</strong>. Rather, the sizes are for the width or height in dp
    692 units that are <strong>available to your activity's window</strong>. The Android system
    693 might use some of the screen for system UI (such as the system bar at the bottom of the screen or
    694 the status bar at the top), so some of the screen might not be available for your layout. Thus, the
    695 sizes you declare should be specifically about the sizes needed by your activity&mdash;the system
    696 accounts for any space used by system UI when declaring how much space it provides for your layout.
    697 Also beware that the <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> is considered
    698 a part of your application's window space, although your layout does not declare it, so it reduces
    699 the space available for your layout and you must account for it in your design.</p>
    700 
    701 <p class="table-caption"><strong>Table 2.</strong> New configuration qualifers for screen size
    702 (introduced in Android 3.2).</p>
    703 <table>
    704   <tr><th>Screen configuration</th><th>Qualifier values</th><th>Description</th></tr>
    705   <tr><td>smallestWidth</td>
    706       <td><code>sw&lt;N&gt;dp</code><br/><br/>
    707         Examples:<br/>
    708         <code>sw600dp</code><br/>
    709         <code>sw720dp</code><br/>
    710       </td>
    711       <td>
    712         <p>The fundamental size of a screen, as indicated by the shortest dimension of the available
    713 screen area. Specifically, the device's smallestWidth is the shortest of the screen's available
    714 height and width (you may also think of it as the "smallest possible width" for the screen). You can
    715 use this qualifier to ensure that, regardless of the screen's current orientation, your
    716 application's has at least {@code &lt;N&gt;} dps of width available for it UI.</p>
    717         <p>For example, if your layout requires that its smallest dimension of screen area be at
    718 least 600 dp at all times, then you can use this qualifer to create the layout resources, {@code
    719 res/layout-sw600dp/}. The system will use these resources only when the smallest dimension of
    720 available screen is at least 600dp, regardless of whether the 600dp side is the user-perceived
    721 height or width. The smallestWidth is a fixed screen size characteristic of the device; <strong>the
    722 device's smallestWidth does not change when the screen's orientation changes</strong>.</p>
    723   <p>The smallestWidth of a device takes into account screen decorations and system UI. For
    724 example, if the device has some persistent UI elements on the screen that account for space along
    725 the axis of the smallestWidth, the system declares the smallestWidth to be smaller than the actual
    726 screen size, because those are screen pixels not available for your UI.</p>
    727   <p>This is an alternative to the generalized screen size qualifiers (small, normal, large, xlarge)
    728 that allows you to define a discrete number for the effective size available for your UI.
    729 Using smallestWidth to determine the general screen size is useful because width is
    730 often the driving factor in designing a layout. A UI will often scroll vertically, but have fairly
    731 hard constraints on the minimum space it needs horizontally. The available width is also the key
    732 factor in determining whether to use a one-pane layout for handsets or multi-pane layout for
    733 tablets. Thus, you likely care most about what the smallest possible width will be on each
    734 device.</p>
    735     </td>
    736   </tr>
    737     <tr>
    738       <td>Available screen width</td>
    739       <td><code>w&lt;N&gt;dp</code><br/><br/>
    740         Examples:<br/>
    741         <code>w720dp</code><br/>
    742         <code>w1024dp</code><br/>
    743       </td>
    744       <td>
    745         <p>Specifies a minimum available width in dp units at which the resources should be
    746 used&mdash;defined by the <code>&lt;N&gt;</code> value. The system's corresponding value for the
    747 width changes when the screen's orientation switches between landscape and portrait to
    748 reflect the current actual width that's available for your UI.</p>
    749         <p>This is often useful to determine whether to use a multi-pane layout, because even on a
    750 tablet device, you often won't want the same multi-pane layout for portrait orientation as you do
    751 for landscape. Thus, you can use this to specify the minimum width required for the layout, instead
    752 of using both the screen size and orientation qualifiers together.</p>
    753       </td>
    754     </tr>
    755     <tr>
    756       <td>Available screen height</td>
    757       <td><code>h&lt;N&gt;dp</code><br/><br/>
    758         Examples:<br/>
    759         <code>h720dp</code><br/>
    760         <code>h1024dp</code><br/>
    761         etc.
    762       </td>
    763       <td>
    764         <p>Specifies a minimum screen height in dp units at which the resources should be
    765 used&mdash;defined by the <code>&lt;N&gt;</code> value. The system's corresponding value for
    766 the height changes when the screen's orientation switches between landscape and portrait to
    767 reflect the current actual height that's available for your UI.</p>
    768         <p>Using this to define the
    769 height required by your layout is useful in the same way as <code>w&lt;N&gt;dp</code> is for
    770 defining the required width, instead of using both the screen size and orientation qualifiers.
    771 However, most apps won't need this qualifier, considering that UIs often scroll vertically and are
    772 thus more flexible with how much height is available, whereas the width is more rigid.</p>
    773       </td>
    774     </tr>
    775 </table>
    776 
    777 <p>While using these qualifiers might seem more complicated than using screen size groups, it should
    778 actually be simpler once you determine the requirements for your UI.  When you design your UI,
    779 the main thing you probably care about is the actual size at which your application switches between
    780 a handset-style UI and a tablet-style UI that uses multiple panes. The exact point of this switch
    781 will depend on your particular design&mdash;maybe you need a 720dp width for your tablet layout,
    782 maybe 600dp is enough, or 480dp, or some number between these. Using these qualifiers in table 2,
    783 you are in control of the precise size at which your layout changes.</p>
    784 
    785 <p>For more discussion about these size configuration qualifiers, see the <a
    786 href="{@docRoot}guide/topics/resources/providing-resources.html#SmallestScreenWidthQualifier">
    787 Providing Resources</a> document.</p>
    788 
    789 
    790 <h3 id="ConfigurationExamples">Configuration examples</h3>
    791 
    792 <p>To help you target some of your designs for different types of devices, here are some
    793 numbers for typical screen widths:</p>
    794 
    795 <ul>
    796   <li>320dp: a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).</li>
    797   <li>480dp: a tweener tablet like the Streak (480x800 mdpi).</li>
    798   <li>600dp: a 7 tablet (600x1024 mdpi).</li>
    799   <li>720dp: a 10 tablet (720x1280 mdpi, 800x1280 mdpi, etc).</li>
    800 </ul>
    801 
    802 <p>Using the size qualifiers from table 2, your application can switch between your different layout
    803 resources for handsets and tablets using any number you want for width and/or height.  For example,
    804 if 600dp is the smallest available width supported by your tablet layout, you can provide these two
    805 sets of layouts:</p>
    806 
    807 <pre class="classic">
    808 res/layout/main_activity.xml           # For handsets
    809 res/layout-sw600dp/main_activity.xml   # For tablets
    810 </pre>
    811 
    812 <p>In this case, the smallest width of the available screen space must be 600dp in order for the
    813 tablet layout to be applied.</p>
    814 
    815 <p>For other cases in which you want to further customize your UI to differentiate between sizes
    816 such as 7 and 10 tablets, you can define additional smallest width layouts:</p>
    817 
    818 <pre class="classic">
    819 res/layout/main_activity.xml           # For handsets (smaller than 600dp available width)
    820 res/layout-sw600dp/main_activity.xml   # For 7 tablets (600dp wide and bigger)
    821 res/layout-sw720dp/main_activity.xml   # For 10 tablets (720dp wide and bigger)
    822 </pre>
    823 
    824 <p>Notice that the previous two sets of example resources use the "smallest width" qualifer, {@code
    825 sw&lt;N&gt;dp}, which specifies the smallest of the screen's two sides, regardless of the
    826 device's current orientation. Thus, using {@code sw&lt;N&gt;dp} is a simple way to specify the
    827 overall screen size available for your layout by ignoring the screen's orientation.</p>
    828 
    829 <p>However, in some cases, what might be
    830 important for your layout is exactly how much width or height is <em>currently</em> available. For
    831 example, if you have a two-pane layout with two fragments side by side, you might want to use it
    832 whenever the screen provides at least 600dp of width, whether the device is in landscape or
    833 portrait orientation. In this case, your resources might look like this:</p>
    834 
    835 <pre class="classic">
    836 res/layout/main_activity.xml         # For handsets (smaller than 600dp available width)
    837 res/layout-w600dp/main_activity.xml  # Multi-pane (any screen with 600dp available width or more)
    838 </pre>
    839 
    840 <p>Notice that the second set is using the "available width" qualifier, {@code w&lt;N&gt;dp}. This
    841 way, one device may actually use both layouts, depending on the orientation of the screen (if
    842 the available width is at least 600dp in one orientation and less than 600dp in the other
    843 orientation).</p>
    844 
    845 <p>If the available height is a concern for you, then you can do the same using the {@code
    846 h&lt;N&gt;dp} qualifier. Or, even combine the {@code w&lt;N&gt;dp} and {@code h&lt;N&gt;dp}
    847 qualifiers if you need to be really specific.</p>
    848 
    849 
    850 <h3 id="DeclaringScreenSizeSupport">Declaring screen size support</h3>
    851 
    852 <p>Once you've implemented your layouts for different screen sizes, it's equally important that you
    853 declare in your manifest file which screens your application supports.</p>
    854 
    855 <p>Along with the new configuration qualifiers for screen size, Android 3.2 introduces new
    856 attributes for the <a
    857 href="{@docRoot}guide/topics/manifest/supports-screens-element.html">&lt;supports-screens&gt;</a>
    858 manifest element:</p>
    859 
    860 <dl>
    861   
    862   <dt><a
    863 href="{@docRoot}guide/topics/manifest/supports-screens-element.html#requiresSmallest">
    864 {@code android:requiresSmallestWidthDp}</a></dt>
    865   <dd>Specifies the minimum smallestWidth required. The smallestWidth is the shortest dimension of
    866 the screen space (in {@code dp} units) that must be available to your application UI&mdash;that is,
    867 the shortest of the available screen's two dimensions. So, in order for a device to be considered
    868 compatible with your application, the device's smallestWidth must be equal to or greater than this
    869 value. (Usually, the value you supply for this is the "smallest width" that your layout supports,
    870 regardless of the screen's current orientation.)
    871   <p>For example, if your application is only for tablet-style devices with a 600dp
    872 smallest available width:</p>
    873 <pre>
    874 &lt;manifest ... &gt;
    875     &lt;supports-screens android:requiresSmallestWidthDp="600" /&gt;
    876     ...
    877 &lt;/manifest&gt;
    878 </pre>
    879   <p>However, if your application supports all screen sizes supported by Android (as small as
    880 426dp x 320dp), then you don't need to declare this attribute, because the smallest width your
    881 application requires is the smallest possible on any device.</p>
    882 
    883   <p class="caution"><strong>Caution:</strong> The Android system does not pay attention to this
    884 attribute, so it does not affect how your application behaves at runtime. Instead, it is used
    885 to enable filtering for your application on services such as Google Play. However,
    886 <strong>Google Play currently does not support this attribute for filtering</strong> (on Android
    887 3.2), so you should continue using the other size attributes if your application does not support
    888 small screens.</p>
    889 </dd>
    890 
    891   <dt><a
    892 href="{@docRoot}guide/topics/manifest/supports-screens-element.html#compatibleWidth">
    893 {@code android:compatibleWidthLimitDp}</a></dt>
    894   <dd>This attribute allows you to enable <a
    895 href="{@docRoot}guide/practices/screen-compat-mode.html">screen compatibility mode</a> as a
    896 user-optional feature by specifying the maximum "smallest width" that your application
    897 supports. If the smallest side of a device's available screen is greater than your value here,
    898 users can still install your application, but are offered to run it in screen compatibility mode. By
    899 default, screen compatibility mode is disabled and your layout is resized to fit the screen as
    900 usual, but a button is available in the system bar that allows users to toggle screen compatibility
    901 mode on and off.
    902   <p class="note"><strong>Note:</strong> If your application's layout properly resizes for large
    903 screens, you do not need to use this attribute. We recommend that you avoid using this
    904 attribute and instead ensure your layout resizes for larger screens by following the
    905 recommendations in this document.</p></dd>
    906 
    907   <dt><a
    908 href="{@docRoot}guide/topics/manifest/supports-screens-element.html#largestWidth">
    909 {@code android:largestWidthLimitDp}</a></dt>
    910   <dd>This attribute allows you to force-enable <a
    911 href="{@docRoot}guide/practices/screen-compat-mode.html">screen compatibility mode</a> by specifying
    912 the maximum "smallest width" that your application supports. If the smallest
    913 side of a device's available screen is greater than your value here, the application runs in screen
    914 compatibility mode with no way for the user to disable it.
    915   <p class="note"><strong>Note:</strong> If your application's layout properly resizes for large
    916 screens, you do not need to use this attribute.  We recommend that you avoid using this
    917 attribute and instead ensure your layout resizes for larger screens by following the
    918 recommendations in this document.</p></dd>
    919 </dl>
    920 
    921 <p class="caution"><strong>Caution:</strong> When developing for Android 3.2 and higher, you
    922 should not use the older screen size attributes in combination with the attributes
    923 listed above. Using both the new attributes and the older size attributes might cause
    924 unexpected behavior.</p>
    925 
    926 <p>For more information about each of these attributes, follow the respective links above.</p>
    927 
    928 
    929 
    930 
    931 <h2 id="screen-independence">Best Practices</h2>
    932 
    933 <p>The objective of supporting multiple screens is to create an application that can function
    934 properly and look good on any of the generalized screen configurations supported by Android. The
    935 previous sections of this document provide information about how Android adapts your
    936 application to screen configurations and how you can customize the look of your application on
    937 different screen configurations. This section provides some additional tips and an overview of
    938 techniques that help ensure that your application scales properly for different screen
    939 configurations.</p>
    940 
    941 <p>Here is a quick checklist about how you can ensure that your application displays properly
    942 on different screens:</p>
    943 
    944 <ol>
    945   <li>Use {@code wrap_content}, {@code fill_parent}, or {@code dp} units when specifying
    946 dimensions in an XML layout file</li>
    947   <li>Do not use hard coded pixel values in your application code</li>
    948   <li>Do not use {@code AbsoluteLayout} (it's deprecated)</li>
    949   <li>Supply alternative bitmap drawables for different screen densities</li>
    950 </ol>
    951 
    952 <p>The following sections provide more details.</p>
    953 
    954 
    955 <h3 id="use-relative">1. Use wrap_content, fill_parent, or the dp unit for layout dimensions</h3>
    956 
    957 <p>When defining the <a
    958 href="{@docRoot}reference/android/view/ViewGroup.LayoutParams.html#attr_android:layout_width"
    959 >{@code android:layout_width}</a> and <a
    960 href="{@docRoot}reference/android/view/ViewGroup.LayoutParams.html#attr_android:layout_height"
    961 >{@code android:layout_height}</a> for
    962 views in an XML layout file, using <code>"wrap_content"</code>,
    963 <code>"fill_parent"</code> or <code>dp</code> units guarantees that the view is
    964 given an appropriate size on the current device screen.</p>
    965 
    966 <p>For instance, a view with a <code>layout_width="100dp"</code> measures 100 pixels wide on
    967 medium-density screen and the system scales it up to 150 pixels wide on high-density screen, so
    968 that the view occupies approximately the same physical space on the screen.</p>
    969 
    970 <p>Similarly, you should prefer the <code>sp</code> (scale-independent pixel) to define text
    971 sizes. The <code>sp</code> scale factor depends on a user setting and the system scales the
    972 size the same as it does for {@code dp}.</p>
    973 
    974 
    975 <h3>2. Do not use hard-coded pixel values in your application code</h3>
    976 
    977 <p>For performance reasons and to keep the code simpler, the Android system uses pixels as the
    978 standard unit for expressing dimension or coordinate values. That means that the dimensions of a
    979 view are always expressed in the code using pixels, but always based on the current screen density.
    980 For instance, if <code>myView.getWidth()</code> returns 10, the view is 10 pixels wide on the
    981 current screen, but on a device with a higher density screen, the value returned might be 15. If you
    982 use pixel values in your application code to work with bitmaps that are not pre-scaled for the
    983 current screen density, you might need to scale the pixel values that you use in your code to match
    984 the un-scaled bitmap source.</p>
    985 
    986 <p>If your application manipulates bitmaps or deals with pixel values at runtime, see the section
    987 below about <a href="#DensityConsiderations">Additional Density Considerations</a>.</p>
    988 
    989 
    990 <h3 id="avoid-absolute">3. Do not use AbsoluteLayout </h3>
    991 
    992 <p>Unlike the other layouts widgets, {@link android.widget.AbsoluteLayout} enforces
    993 the use of fixed positions to lay out its child views, which can easily lead to user interfaces that
    994 do not work well on different displays. Because of this, {@link android.widget.AbsoluteLayout} was
    995 deprecated in Android 1.5 (API Level 3).</p>
    996 
    997 <p>You should instead use {@link android.widget.RelativeLayout}, which uses relative positioning
    998 to lay out its child views. For instance, you can specify that a button widget should appear "to
    999 the right of" a text widget.</p>
   1000 
   1001 
   1002 <h3>4. Use size and density-specific resources</h3>
   1003 
   1004 <p>Although the system scales your layout and drawable resources based on the current screen
   1005 configuration, you may want to make adjustments to the UI on different screen sizes and provide
   1006 bitmap drawables that are optimized for different densities. This essentially reiterates the
   1007 information from earlier in this document.</p>
   1008 
   1009 <p>If you need to control exactly how your application will look on various
   1010 screen configurations, adjust your layouts and bitmap drawables in configuration-specific
   1011 resource directories. For example, consider an icon that you want to display on
   1012 medium and high density screens. Simply create your icon at two different sizes
   1013 (for instance 100x100 for medium density and 150x150 for high density) and put
   1014 the two variations in the appropriate directories, using the proper
   1015 qualifiers:</p>
   1016 
   1017 <pre class="classic">
   1018 res/drawable-mdpi/icon.png&nbsp;&nbsp;&nbsp;//for medium-density screens
   1019 res/drawable-hdpi/icon.png&nbsp;&nbsp;&nbsp;//for high-density screens
   1020 </pre>
   1021 
   1022 <p class="note"><strong>Note:</strong> If a density qualifier is not defined in a directory name,
   1023 the system assumes that the resources in that directory are designed for the baseline medium
   1024 density and will scale for other densities as appropriate.</p>
   1025 
   1026 <p>For more information about valid configuration qualifiers, see <a href="#qualifiers">Using
   1027 configuration qualifiers</a>, earlier in this document.</p>
   1028 
   1029 
   1030 
   1031 
   1032 
   1033 <h2 id="DensityConsiderations">Additional Density Considerations</h2>
   1034 
   1035 <p>This section describes more about how Android performs scaling for bitmap drawables on different
   1036 screen densities and how you can further control how bitmaps are drawn on different densities. The
   1037 information in this section shouldn't be important to most applications, unless you have encountered
   1038 problems in your application when running on different screen densities or your application
   1039 manipulates graphics.</p>
   1040 
   1041 <p>To better understand how you can support multiple densities when manipulating graphics at
   1042 runtime, you should understand that the system helps ensure the proper scale for bitmaps in the
   1043 following ways:</p>
   1044 
   1045 <ol>
   1046 <li><em>Pre-scaling of resources (such as bitmap drawables)</em>
   1047 
   1048   <p>Based on the density of the current screen, the system uses any size- or density-specific
   1049 resources from your application and displays them without scaling. If resources are not available in
   1050 the correct density, the system loads the default resources and scales them up or down as needed to
   1051 match the current screen's density. The system assumes that default resources (those from a
   1052 directory without configuration qualifiers) are designed for the baseline screen density (mdpi),
   1053 unless they are loaded from a density-specific resource directory. Pre-scaling is, thus, what the
   1054 system does when resizing a bitmap to the appropriate size for the current screen
   1055 density.</p>
   1056 
   1057   <p>If you request the dimensions of a pre-scaled resource, the system returns values
   1058 representing the dimensions <em>after</em> scaling. For example, a bitmap designed at 50x50 pixels
   1059 for an mdpi screen is scaled to 75x75 pixels on an hdpi screen (if there is no alternative resource
   1060 for hdpi) and the system reports the size as such.</p>
   1061 
   1062 <p>There are some situations in which you might not want Android to pre-scale
   1063 a resource. The easiest way to avoid pre-scaling is to put the resource in a resource directory
   1064 with the {@code nodpi} configuration qualifier. For example:</p>
   1065 
   1066 <pre class="classic">res/drawable-nodpi/icon.png</pre>
   1067 
   1068 <p>When the system uses the {@code icon.png} bitmap from this folder, it does not scale it
   1069 based on the current device density.</p>
   1070 </li>
   1071 
   1072 <li><em>Auto-scaling of pixel dimensions and coordinates</em>
   1073 
   1074   <p>An application can disable pre-scaling by setting <a
   1075 href="{@docRoot}guide/topics/manifest/supports-screens-element.html#any">{@code
   1076 android:anyDensity}</a> to {@code "false"} in the manifest or programmatically for a {@link
   1077 android.graphics.Bitmap} by setting {@link android.graphics.BitmapFactory.Options#inScaled} to
   1078 {@code "false"}. In this case, the system auto-scales any absolute pixel coordinates and pixel
   1079 dimension values at draw time. It does this to ensure that pixel-defined screen elements are still
   1080 displayed at approximately the same physical size as they would be at the baseline screen density
   1081 (mdpi). The system handles this scaling transparently to the application and reports the scaled
   1082 pixel dimensions to the application, rather than physical pixel dimensions.</p>
   1083 
   1084   <p>For instance, suppose a device has a WVGA high-density screen, which is 480x800 and about the
   1085 same size as a traditional HVGA screen, but it's running an application that has disabled
   1086 pre-scaling. In this case, the system will "lie" to the application when it queries for screen
   1087 dimensions, and report 320x533 (the approximate mdpi translation for the screen density). Then, when
   1088 the application does drawing operations, such as invalidating the rectangle from (10,10) to (100,
   1089 100), the system transforms the coordinates by scaling them the appropriate amount, and actually
   1090 invalidate the region (15,15) to (150, 150). This discrepancy may cause unexpected behavior if
   1091 your application directly manipulates the scaled bitmap, but this is considered a reasonable
   1092 trade-off to keep the performance of applications as good as possible. If you encounter this
   1093 situation, read the following section about <a href="#dips-pels">Converting dp units to pixel
   1094 units</a>.</p>
   1095 
   1096   <p>Usually, <strong>you should not disable pre-scaling</strong>. The best way to support multiple
   1097 screens is to follow the basic techniques described above in <a href="#support">How to Support
   1098 Multiple Screens</a>.<p>
   1099 </li>
   1100 
   1101 </ol>
   1102 
   1103 
   1104 <p>If your application manipulates bitmaps or directly interacts with pixels on the screen in some
   1105 other way, you might need to take additional steps to support different screen densities. For
   1106 example, if you respond to touch gestures by counting the number of pixels that a finger
   1107 crosses, you need to use the appropriate density-independent pixel values, instead of actual
   1108 pixels.</p>
   1109 
   1110 
   1111 <h3 id="scaling">Scaling Bitmap objects created at runtime</h3>
   1112 
   1113 <div class="figure" style="width:300px">
   1114 <img src="{@docRoot}images/screens_support/scale-test.png" alt="" />
   1115 <p class="img-caption"><strong>Figure 5.</strong> Comparison of pre-scaled and auto-scaled
   1116 bitmaps, from <a
   1117 href="{@docRoot}resources/samples/ApiDemos/src/com/example/android/apis/graphics/DensityActivity.html">
   1118 ApiDemos</a>.
   1119 </p>
   1120 </div>
   1121 
   1122 <p>If your application creates an in-memory bitmap (a {@link android.graphics.Bitmap} object), the
   1123 system assumes that the bitmap is designed for the baseline medium-density screen, by default, and
   1124 auto-scales the bitmap at draw time. The system applies "auto-scaling" to a {@link
   1125 android.graphics.Bitmap} when the bitmap has unspecified density properties. If you don't properly
   1126 account for the current device's screen density and specify the bitmap's density properties, the
   1127 auto-scaling can result in scaling artifacts the same as when you don't provide alternative
   1128 resources.</p>
   1129 
   1130 <p>To control whether a {@link android.graphics.Bitmap} created at runtime is scaled or not, you can
   1131 specify the density of the bitmap with {@link android.graphics.Bitmap#setDensity setDensity()},
   1132 passing a density constant from {@link android.util.DisplayMetrics}, such as {@link
   1133 android.util.DisplayMetrics#DENSITY_HIGH} or {@link android.util.DisplayMetrics#DENSITY_LOW}.</p>
   1134 
   1135 <p>If you're creating a {@link android.graphics.Bitmap} using {@link
   1136 android.graphics.BitmapFactory}, such as from a file or a stream, you can use {@link
   1137 android.graphics.BitmapFactory.Options BitmapFactory.Options} to define properties of the bitmap as
   1138 it already exists, which determine if or how the system will scale it. For example, you can use the
   1139 {@link android.graphics.BitmapFactory.Options#inDensity} field to define the density for which the
   1140 bitmap is designed and the {@link
   1141 android.graphics.BitmapFactory.Options#inScaled} field to specify whether the bitmap should scale to
   1142 match the current device's screen density.</p>
   1143 
   1144 <p>If you set the {@link
   1145 android.graphics.BitmapFactory.Options#inScaled} field to {@code false}, then you disable any
   1146 pre-scaling that the system may apply to the bitmap and the system will then auto-scale it at draw
   1147 time. Using auto-scaling instead of pre-scaling can be more CPU expensive, but uses
   1148 less memory.</p>
   1149 
   1150 <p>Figure 5 demonstrates the results of the pre-scale and auto-scale mechanisms when loading low
   1151 (120), medium (160) and high (240) density bitmaps on a high-density screen. The differences are
   1152 subtle, because all of the bitmaps are being scaled to match the current screen density, however the
   1153 scaled bitmaps have slightly different appearances depending on whether they are pre-scaled or
   1154 auto-scaled at draw time. You can find the source code for this sample application, which
   1155 demonstrates using pre-scaled and auto-scaled bitmaps, in <a
   1156 href="{@docRoot}resources/samples/ApiDemos/src/com/example/android/apis/graphics/DensityActivity.html">
   1157 ApiDemos</a>.</p>
   1158 
   1159 <p class="note"><strong>Note:</strong> In Android 3.0 and above, there should be no perceivable
   1160 difference between pre-scaled and auto-scaled bitmaps, due to improvements in the graphics
   1161 framework.</p>
   1162 
   1163 
   1164 
   1165 
   1166 
   1167 <h3 id="dips-pels">Converting dp units to pixel units</h3>
   1168 
   1169 <p>In some cases, you will need to express dimensions in <code>dp</code> and then convert them to
   1170 pixels. Imagine an application in which a scroll or fling gesture is recognized after the user's
   1171 finger has moved by at least 16 pixels. On a baseline screen, a user's must move by {@code 16 pixels
   1172 / 160 dpi}, which equals 1/10th of an inch (or 2.5 mm) before the gesture is recognized. On a device
   1173 with a high density display (240dpi), the user's must move by {@code 16 pixels / 240 dpi}, which
   1174 equals 1/15th of an inch (or 1.7 mm). The distance is much shorter and the application thus appears
   1175 more sensitive to the user.</p> 
   1176 
   1177 <p>To fix this issue, the gesture threshold must be expressed in code in <code>dp</code> and then
   1178 converted to actual pixels. For example:</p>
   1179 
   1180 <pre>// The gesture threshold expressed in dp
   1181 private static final float GESTURE_THRESHOLD_DP = 16.0f;
   1182 
   1183 // Get the screen's density scale
   1184 final float scale = {@link android.content.ContextWrapper#getResources getResources()}.{@link
   1185 android.content.res.Resources#getDisplayMetrics getDisplayMetrics()}.density;
   1186 // Convert the dps to pixels, based on density scale
   1187 mGestureThreshold = (int) (GESTURE_THRESHOLD_DP * scale + 0.5f);</span>
   1188 
   1189 // Use mGestureThreshold as a distance in pixels...
   1190 </pre>
   1191 
   1192 <p>The {@link android.util.DisplayMetrics#density DisplayMetrics.density} field specifies the scale
   1193 factor you must use to convert {@code dp} units to pixels, according to the current screen density.
   1194 On a medium-density screen, {@link android.util.DisplayMetrics#density DisplayMetrics.density}
   1195 equals 1.0; on a high-density screen it equals 1.5; on an extra high-density screen, it equals 2.0;
   1196 and on a low-density screen, it equals 0.75. This figure is the factor by which you should multiply
   1197 the {@code dp} units on order to get the actual pixel count for the current screen. (Then add {@code
   1198 0.5f} to round the figure up to the nearest whole number, when converting to an integer.) For more
   1199 information, refer to the {@link android.util.DisplayMetrics DisplayMetrics} class.</p>
   1200 
   1201 <p>However, instead of defining an arbitrary threshold for this kind of event, you should
   1202 use pre-scaled configuration values that are available from {@link
   1203 android.view.ViewConfiguration}.</p>
   1204 
   1205 
   1206 <h4 id="pre-scaled-values">Using pre-scaled configuration values</h4>
   1207 
   1208 <p>You can use the {@link android.view.ViewConfiguration} class to access common distances,
   1209 speeds, and times used by the Android system. For instance, the
   1210 distance in pixels used by the framework as the scroll threshold can be obtained with {@link
   1211 android.view.ViewConfiguration#getScaledTouchSlop()}:</p>
   1212 
   1213 <pre>
   1214 private static final int GESTURE_THRESHOLD_DP = ViewConfiguration.get(myContext).getScaledTouchSlop();
   1215 </pre>
   1216 
   1217 <p>Methods in {@link android.view.ViewConfiguration} starting with the <code>getScaled</code> prefix
   1218 are guaranteed to return a value in pixels that will display properly regardless of the current
   1219 screen density.</p>
   1220 
   1221 
   1222 
   1223 
   1224 
   1225 
   1226 <h2 id="testing">How to Test Your Application on Multiple Screens</h2>
   1227 
   1228 <div class="figure" style="width:500px;margin:0">
   1229   <img src="{@docRoot}images/screens_support/avds-config.png" alt="" />
   1230   <p class="img-caption"><strong>Figure 6.</strong>
   1231   A set of AVDs for testing screens support.</p>
   1232 </div>
   1233 
   1234 <p>Before publishing your application, you should thoroughly test it in all of the supported screen
   1235 sizes and densities. The Android SDK includes emulator skins you can use, which
   1236 replicate the sizes and densities of common screen configurations on which your application is
   1237 likely to run. You can also modify the default size, density, and resolution of the emulator skins
   1238 to replicate the characteristics of any specific screen. Using the emulator skins and additional
   1239 custom configurations allows you to test any possible screen configuration, so you don't
   1240 have to buy various devices just to test your application's screen support.</p>
   1241 
   1242 <p>To set up an environment for testing your application's screen support, you should create a
   1243 series of AVDs (Android Virtual Devices), using emulator skins and screen configurations that
   1244 emulate the screen sizes and densities you want your application to support. To do so, you can use
   1245 the AVD Manager to create the AVDs and launch them with a graphical interface.</p>
   1246 
   1247 <p>To launch the Android SDK Manager, execute the {@code
   1248 SDK Manager.exe} from your Android SDK directory (on Windows only) or execute {@code android} from
   1249 the {@code &lt;sdk&gt;/tools/} directory (on all platforms). Figure 6 shows the AVD
   1250 Manager with a selection of AVDs, for testing various screen configurations.</p>
   1251 
   1252 <p>Table 3 shows the various emulator skins that are available in the Android SDK, which you can use
   1253 to emulate some of the most common screen configurations.</p>
   1254 
   1255 <p>For more information about creating and using AVDs to test your application, see <a
   1256 href="{@docRoot}tools/devices/managing-avds.html">Managing AVDs with AVD
   1257 Manager</a>.</p>
   1258 
   1259 
   1260 <p class="table-caption" id="screens-table"><strong>Table 3.</strong> Various screen
   1261 configurations available from emulator skins in the Android SDK (indicated in bold) and other
   1262 representative resolutions.</p>
   1263 
   1264   <table class="normal-headers">
   1265     <tbody>
   1266     <tr>
   1267       <th></th>
   1268       <th>
   1269         <nobr>Low density (120), <em>ldpi</em></nobr>
   1270       </th>
   1271       <th>
   1272         <nobr>Medium density (160), <em>mdpi</em></nobr>
   1273       </th>
   1274       <th>
   1275         <nobr>High density (240), <em>hdpi</em><nobr>
   1276       </th>
   1277       <th>
   1278         <nobr>Extra high density (320), <em>xhdpi</em><nobr>
   1279       </th>
   1280     </tr>
   1281     <tr>
   1282       <th>
   1283         <em>Small</em> screen
   1284       </th>
   1285       <td><strong>QVGA (240x320)</strong></td>
   1286       <td></td>
   1287       <td>480x640</td>
   1288       <td></td>
   1289     </tr>
   1290     <tr>
   1291       <th>
   1292         <em>Normal</em> screen
   1293       </th>
   1294       <td><strong>WQVGA400 (240x400)</strong>
   1295         <br><strong>WQVGA432 (240x432)</strong></td>
   1296       <td><strong>HVGA (320x480)</strong></td>
   1297       <td><strong>WVGA800 (480x800)</strong>
   1298         <br><strong>WVGA854 (480x854)</strong>
   1299         <br>600x1024</td>
   1300       <td>640x960</td>
   1301     </tr>
   1302     <tr>
   1303       <th>
   1304         <em>Large</em> screen
   1305       </th>
   1306       <td><strong>WVGA800** (480x800)</strong>
   1307         <br><strong>WVGA854** (480x854)</strong></td>
   1308       <td><strong>WVGA800* (480x800)</strong>
   1309         <br><strong>WVGA854* (480x854)</strong>
   1310         <br>600x1024</td>
   1311       <td></td>
   1312       <td></td>
   1313     </tr>
   1314     <tr>
   1315       <th>
   1316         <em>Extra Large</em> screen
   1317       </th>
   1318       <td>1024x600</td>
   1319       <td><strong>WXGA (1280x800)</strong><sup>&dagger;</sup><br>
   1320           1024x768<br>1280x768</td>
   1321       <td>1536x1152<br>1920x1152
   1322         <br>1920x1200</td>
   1323       <td>2048x1536<br>2560x1536
   1324         <br>2560x1600</td>
   1325     </tr>
   1326     <tr>
   1327       <td colspan="5" style="border:none;font-size:85%;">* To emulate this configuration, specify a
   1328 custom density of 160 when creating an AVD that uses a WVGA800 or WVGA854 skin.<br/>
   1329         ** To emulate this configuration, specify a custom density of 120 when creating an AVD that
   1330 uses a WVGA800 or WVGA854 skin.<br/>
   1331         &dagger; This skin is available with the Android 3.0 platform
   1332       </td>
   1333     </tr>
   1334 </table>
   1335 
   1336 <p>To see the relative numbers of active devices that support any given screen configuration, see
   1337 the <a href="{@docRoot}resources/dashboard/screens.html">Screen Sizes and Densities</a>
   1338 dashboard.</p>
   1339 
   1340 <div class="figure" style="width:204px">
   1341   <img src="{@docRoot}images/screens_support/avd-start.png" alt="" />
   1342   <p class="img-caption"><strong>Figure 7.</strong>
   1343   Size and density options you can set, when starting an AVD from the AVD
   1344 Manager.</p>
   1345 </div>
   1346 
   1347 <p>We also recommend that you test your application in an emulator that is set
   1348 up to run at a physical size that closely matches an actual device. This makes
   1349 it a lot easier to compare the results at various sizes and densities. To
   1350 do so you need to know the approximate density, in dpi, of your computer
   1351 monitor (for instance, a 30" Dell monitor has a density of about 96 dpi). When you launch an AVD
   1352 from the AVD Manager, you can specify the screen size for the emulator and your
   1353 monitor dpi in the Launch Options, as shown in figure 7.</p>
   1354 
   1355 <p>If you would like to test your application on a screen that uses a resolution
   1356 or density not supported by the built-in skins, you can create an AVD that uses a custom resolution
   1357 or density. When creating the AVD from the AVD Manager, specify the Resolution,
   1358 instead of selecting a Built-in Skin.</p>
   1359 
   1360 <p>If you are launching your AVD from the command line, you can specify the scale for
   1361 the emulator with the <code>-scale</code> option. For example:</p>
   1362 
   1363 <pre>emulator -avd &lt;avd_name&gt; -scale 96dpi</pre>
   1364 
   1365 <p>To refine the size of the emulator, you can instead pass the {@code -scale} option a number
   1366 between 0.1 and 3 that represents the desired scaling factor.</p>
   1367 
   1368 <p>For more information about creating AVDs from the command line, see <a
   1369 href="{@docRoot}tools/devices/managing-avds-cmdline.html">Managing AVDs from the
   1370 Command Line</a></p>
   1371