1page.title=Devices and Displays
2page.metaDescription=Take advantage of Android's flexible layout system and create apps that gracefully scale from phones to tablets and beyond.
3
4@jd:body
5
6<a class="notice-designers-material"
7  href="http://www.google.com/design/spec/layout/principles.html">
8  <div>
9    <h3>Material Design</h3>
10    <p>Layout Principles<p>
11  </div>
12</a>
13
14<p>Android powers hundreds of millions of phones, tablets, and other devices in a wide variety of screen sizes and
15form factors. By taking advantage of Android's flexible layout system, you can create apps that
16gracefully scale from large tablets to smaller phones.</p>
17
18<img src="{@docRoot}design/media/devices_displays_main.png">
19
20<div class="vspace size-2">&nbsp;</div>
21
22<div class="cols">
23  <div class="col-4">
24
25<h4>Be flexible</h4>
26
27<p>Stretch and compress your layouts to accommodate various heights and widths.</p>
28
29  </div>
30  <div class="col-5">
31
32<h4>Optimize layouts</h4>
33
34<p>On larger devices, take advantage of extra screen real estate. Create compound views that combine
35multiple views to reveal more content and ease navigation.</p>
36
37  </div>
38  <div class="col-4">
39
40<h4>Assets for all</h4>
41<p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to
42ensure that your app looks great on any device.</p>
43
44  </div>
45</div>
46
47  <img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" />
48
49<h4>Strategies</h4>
50
51<a class="notice-designers-material"
52  href="http://www.google.com/design/spec/layout/structure.html">
53  <div>
54    <h3>Material Design</h3>
55    <p>Layout Structure<p>
56  </div>
57</a>
58
59<p>So where do you begin when designing for multiple screens? One approach is to work in the base
60standard (normal size and <acronym title="Medium density (160 dpi)">MDPI</acronym>) and scale it up or
61down for the other buckets. Another approach is to start with the device with the largest screen
62size, and then scale down and figure out the UI compromises you'll need to make on smaller screens.</p>
63
64<p>For details about designing layouts for larger screens, see the <a
65href="{@docRoot}design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a> guide.</p>
66
67<div class="note develop">
68<p><strong>Developer Guide</strong></p>
69  <p>For information about how to build flexible layouts for multiple screen sizes and densities,
70  read
71  <a href="{@docRoot}training/multiscreen/index.html">Designing for Multiple Screens</a> and
72  <a href="{@docRoot}training/basics/fragments/index.html">Building a Dynamic UI with
73  Fragments</a>.</p>
74</div>
75
76
77
78