Skip to content

Commit 548972d

Browse files
romannurikAndroid (Google) Code Review
romannurik
authored and
Android (Google) Code Review
committed
Merge "Android Design" into ics-mr1
2 parents d1186cd + 7379046 commit 548972d

File tree

251 files changed

+10437
-7
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

251 files changed

+10437
-7
lines changed

‎docs/html/design/building-blocks/buttons.html‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>
6+
7+
Android Design - Buttons
8+
</title>
9+
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
10+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
11+
<link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
12+
<link rel="stylesheet" href="../static/default.css">
13+
14+
</head>
15+
<body>
16+
17+
<div id="page-container">
18+
19+
<div id="page-header"><a href="../index.html">Android Design</a></div>
20+
21+
<div id="main-row">
22+
23+
<ul id="nav">
24+
25+
<li class="nav-section">
26+
<div class="nav-section-header"><a href="../index.html">Get Started</a></div>
27+
<ul>
28+
<li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
29+
<li><a href="../get-started/principles.html">Design Principles</a></li>
30+
<li><a href="../get-started/ui-overview.html">UI Overview</a></li>
31+
</ul>
32+
</li>
33+
34+
<li class="nav-section">
35+
<div class="nav-section-header"><a href="../style/index.html">Style</a></div>
36+
<ul>
37+
<li><a href="../style/devices-displays.html">Devices and Displays</a></li>
38+
<li><a href="../style/themes.html">Themes</a></li>
39+
<li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
40+
<li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
41+
<li><a href="../style/typography.html">Typography</a></li>
42+
<li><a href="../style/color.html">Color</a></li>
43+
<li><a href="../style/iconography.html">Iconography</a></li>
44+
<li><a href="../style/writing.html">Writing Style</a></li>
45+
</ul>
46+
</li>
47+
48+
<li class="nav-section">
49+
<div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
50+
<ul>
51+
<li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
52+
<li><a href="../patterns/gestures.html">Gestures</a></li>
53+
<li><a href="../patterns/app-structure.html">App Structure</a></li>
54+
<li><a href="../patterns/navigation.html">Navigation</a></li>
55+
<li><a href="../patterns/actionbar.html">Action Bar</a></li>
56+
<li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
57+
<li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
58+
<li><a href="../patterns/selection.html">Selection</a></li>
59+
<li><a href="../patterns/notifications.html">Notifications</a></li>
60+
<li><a href="../patterns/compatibility.html">Compatibility</a></li>
61+
<li><a href="../patterns/pure-android.html">Pure Android</a></li>
62+
</ul>
63+
</li>
64+
65+
<li class="nav-section">
66+
<div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
67+
<ul>
68+
<li><a href="../building-blocks/tabs.html">Tabs</a></li>
69+
<li><a href="../building-blocks/lists.html">Lists</a></li>
70+
<li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
71+
<li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
72+
<li><a href="../building-blocks/spinners.html">Spinners</a></li>
73+
<li><a href="../building-blocks/buttons.html">Buttons</a></li>
74+
<li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
75+
<li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
76+
<li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
77+
<li><a href="../building-blocks/switches.html">Switches</a></li>
78+
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
79+
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
80+
</ul>
81+
</li>
82+
83+
<li>
84+
<div id="back-dac-section"><a href="../../index.html" target="_blank">Developers</a></div>
85+
</li>
86+
87+
</ul>
88+
89+
<div id="content">
90+
91+
92+
<div class="layout-content-row content-header">
93+
<div class="layout-content-col span-9">
94+
<h2>Buttons</h2>
95+
</div>
96+
<div class="paging-links layout-content-col span-4">
97+
<a href="#" class="prev-page-link">Previous</a>
98+
<a href="#" class="next-page-link">Next</a>
99+
</div>
100+
</div>
101+
102+
103+
104+
105+
<p>A button consists of text and/or an image that clearly communicates what action will occur when the
106+
user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless
107+
buttons</em>. Both can contain text labels and/or images.</p>
108+
109+
<div style="text-align: center">
110+
<img src="../static/content/buttons_basic.png">
111+
</div>
112+
113+
<h2>Basic Buttons</h2>
114+
<p>Basic buttons are traditional buttons with borders and background. Android supports two styles for
115+
basic buttons: default and small. Default buttons have slightly larger font size and are optimized
116+
for display outside of form content. Small buttons are intended for display alongside other content.
117+
They have a smaller font and smaller minimum height. Use small buttons in forms where they need to
118+
align with other UI elements.</p>
119+
120+
<img src="../static/content/buttons_default_small.png">
121+
<div class="layout-content-row">
122+
<div class="layout-content-col span-6">
123+
<div class="figure-caption">
124+
Default buttons in Holo Dark &amp; Light.
125+
</div>
126+
</div>
127+
<div class="layout-content-col span-6">
128+
<div class="figure-caption">
129+
Small buttons in Holo Dark &amp; Light.
130+
</div>
131+
</div>
132+
</div>
133+
134+
<h2>Borderless Buttons</h2>
135+
<p>Borderless buttons resemble basic buttons except that they have no borders or background. You can
136+
use borderless buttons with both icons and text. Borderless buttons are visually more lightweight
137+
than basic buttons and integrate nicely with other content.</p>
138+
139+
<img src="../static/content/buttons_borderless.png">
140+
141+
142+
143+
144+
<div class="layout-content-row content-footer">
145+
<div class="paging-links layout-content-col span-9">&nbsp;</div>
146+
<div class="paging-links layout-content-col span-4">
147+
<a href="#" class="prev-page-link">Previous</a>
148+
<a href="#" class="next-page-link">Next</a>
149+
</div>
150+
</div>
151+
152+
</div>
153+
154+
</div>
155+
156+
<div id="page-footer">
157+
158+
<p id="copyright">
159+
Except as noted, this content is licensed under
160+
<a href="http://creativecommons.org/licenses/by/2.5/" target="_blank">
161+
Creative Commons Attribution 2.5</a>.<br>
162+
For details and restrictions, see the
163+
<a href="http://developer.android.com/license.html" target="_blank">Content License</a>.
164+
</p>
165+
166+
<p>
167+
<a href="http://www.android.com/terms.html" target="_blank">Site Terms of Service</a> &ndash;
168+
<a href="http://www.android.com/privacy.html" target="_blank">Privacy Policy</a> &ndash;
169+
<a href="http://www.android.com/branding.html" target="_blank">Brand Guidelines</a>
170+
</p>
171+
172+
</div>
173+
</div>
174+
175+
<script src="../static/jquery-1.6.2.min.js"></script>
176+
<script>
177+
var SITE_ROOT = '../';
178+
</script>
179+
<script src="../static/default.js"></script>
180+
181+
182+
<script type="text/javascript">
183+
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
184+
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
185+
</script>
186+
<script type="text/javascript">
187+
var pageTracker = _gat._getTracker("UA-5831155-1");
188+
pageTracker._trackPageview();
189+
</script>
190+
</body>
191+
</html>

0 commit comments

Comments
 (0)