docs: Remove side padding built into Design images to improve alignment.
a few HTML adjustments for alignment as well
Change-Id: I432e25128a90b0376a2a469859b0ad49b035a2df
user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless
buttons</em>. Both can contain text labels and/or images.</p>
-<div style="text-align: center">
- <img src="{@docRoot}design/media/buttons_basic.png">
-</div>
+<img src="{@docRoot}design/media/buttons_basic.png">
<h2 id="basic">Basic Buttons</h2>
gesture.</p>
<div class="layout-content-row">
- <div class="layout-content-col span-2"> </div>
<div class="layout-content-col span-6">
<img src="{@docRoot}design/media/picker_space.png">
</div>
- <div class="layout-content-col span-5">
+ <div class="layout-content-col span-6">
<h4>Space considerations</h4>
<p>Pickers can be used inline on a form, but their relatively large footprint is best suited for
<p>Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to
turn an option off or on. Instead, use an on/off switch.</p>
-<div style="text-align: center">
<img src="{@docRoot}design/media/switches_checkboxes.png">
-</div>
<h2 id="radio-buttons">Radio Buttons</h2>
selection if you think that the user needs to see all available options side-by-side. Otherwise,
consider a spinner, which uses less space.</p>
-<div style="text-align: center">
<img src="{@docRoot}design/media/switches_radios.png">
-</div>
<h2 id="switches">On/off Switches</h2>
<p>On/off switches toggle the state of a single settings option.</p>
-<div style="text-align: center">
<img src="{@docRoot}design/media/switches_switches.png">
-</div>
Important: If the app is currently not displaying the top-level screen, be sure to display the Up
caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of
Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern.
+ </p>
-<div class="figure">
- <img src="{@docRoot}design/media/action_bar_pattern_up_app_icon.png">
- <div class="figure-caption">
- App icon with and without "up" affordance.
- </div>
+<img src="{@docRoot}design/media/action_bar_pattern_up_app_icon.png">
+<div class="figure-caption">
+ App icon with and without "up" affordance.
</div>
- </p>
</li>
</ol>
<p>To display actions and, if necessary, the action overflow, use the bottom bar.</p>
</div>
- <div class="layout-content-col span-3">
+ <div class="layout-content-col span-5">
<img src="{@docRoot}design/media/action_bar_pattern_considerations.png">
</div>
<div class="layout-content-col span-4">
- <img src="{@docRoot}design/media/gesture_pinchopen.png">
+ <img src="{@docRoot}design/media/gesture_pinchopen.png" style="margin-left:-4px">
<h4>Pinch open</h4>
<p>Zooms into content.</p>
<style>
.color-row {
- width: 740px;
- margin-left: 10px !important;
- margin-right: 10px !important;
+ width: 760px;
+ margin:0;
display: -webkit-box;
display: -moz-box;
</div>
</div>
-<div style="text-align:center">
<img src="{@docRoot}design/media/devices_displays_density.png">
-</div>
<h4>Strategies</h4>
<p>So where do you begin when designing for multiple screens? One approach is to work in the base
OSDN Git Service
