65b2f3e766
Accounts for the removal of the previous UI guideline pages, which is where most of this new content came from. Also update figure to add xxhdpi and remove ldpi, and include 2x version, because ya know, irony. Change-Id: Ia37ef1a65bdf9c4173a323ae37fffe03b53a6fcf
57 lines
2.1 KiB
Plaintext
57 lines
2.1 KiB
Plaintext
page.title=Devices and Displays
|
|
@jd:body
|
|
|
|
<p>Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and
|
|
form factors. By taking advantage of Android's flexible layout system, you can create apps that
|
|
gracefully scale from large tablets to smaller phones.</p>
|
|
|
|
<img src="{@docRoot}design/media/devices_displays_main.png">
|
|
|
|
<div class="vspace size-2"> </div>
|
|
|
|
<div class="layout-content-row">
|
|
<div class="layout-content-col span-4">
|
|
|
|
<h4>Be flexible</h4>
|
|
<p>Stretch and compress your layouts to accommodate various heights and widths.</p>
|
|
|
|
</div>
|
|
<div class="layout-content-col span-5">
|
|
|
|
<h4>Optimize layouts</h4>
|
|
<p>On larger devices, take advantage of extra screen real estate. Create compound views that combine
|
|
multiple views to reveal more content and ease navigation.</p>
|
|
|
|
</div>
|
|
<div class="layout-content-col span-4">
|
|
|
|
<h4>Assets for all</h4>
|
|
<p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to
|
|
ensure that your app looks great on any device.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" />
|
|
|
|
<h4>Strategies</h4>
|
|
<p>So where do you begin when designing for multiple screens? One approach is to work in the base
|
|
standard (normal size and <acronym title="Medium density (160 dpi)">MDPI</acronym>) and scale it up or
|
|
down for the other buckets. Another approach is to start with the device with the largest screen
|
|
size, and then scale down and figure out the UI compromises you'll need to make on smaller screens.</p>
|
|
|
|
<p>For details about designing layouts for larger screens, see the <a
|
|
href="{@docRoot}design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a> guide.</p>
|
|
|
|
<div class="note develop">
|
|
<p><strong>Developer Guide</strong></p>
|
|
<p>For information about how to build flexible layouts for multiple screen sizes and densities,
|
|
read
|
|
<a href="{@docRoot}training/multiscreen/index.html">Designing for Multiple Screens</a> and
|
|
<a href="{@docRoot}training/basics/fragments/index.html">Building a Dynamic UI with
|
|
Fragments</a>.</p>
|
|
</div>
|
|
|
|
|
|
|