1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Multi-pane Layouts
</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
<link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
<link rel="stylesheet" href="../static/default.css">
</head>
<body>
<div id="page-container">
<div id="page-header"><a href="../index.html">Android Design</a></div>
<div id="main-row">
<ul id="nav">
<li class="nav-section">
<div class="nav-section-header"><a href="../index.html">Get Started</a></div>
<ul>
<li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
<li><a href="../get-started/principles.html">Design Principles</a></li>
<li><a href="../get-started/ui-overview.html">UI Overview</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../style/index.html">Style</a></div>
<ul>
<li><a href="../style/devices-displays.html">Devices and Displays</a></li>
<li><a href="../style/themes.html">Themes</a></li>
<li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
<li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
<li><a href="../style/typography.html">Typography</a></li>
<li><a href="../style/color.html">Color</a></li>
<li><a href="../style/iconography.html">Iconography</a></li>
<li><a href="../style/writing.html">Writing Style</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
<ul>
<li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
<li><a href="../patterns/gestures.html">Gestures</a></li>
<li><a href="../patterns/app-structure.html">App Structure</a></li>
<li><a href="../patterns/navigation.html">Navigation</a></li>
<li><a href="../patterns/actionbar.html">Action Bar</a></li>
<li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
<li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
<li><a href="../patterns/selection.html">Selection</a></li>
<li><a href="../patterns/notifications.html">Notifications</a></li>
<li><a href="../patterns/compatibility.html">Compatibility</a></li>
<li><a href="../patterns/pure-android.html">Pure Android</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
<ul>
<li><a href="../building-blocks/tabs.html">Tabs</a></li>
<li><a href="../building-blocks/lists.html">Lists</a></li>
<li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
<li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
<li><a href="../building-blocks/spinners.html">Spinners</a></li>
<li><a href="../building-blocks/buttons.html">Buttons</a></li>
<li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
<li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
<li><a href="../building-blocks/progress.html">Progress & Activity</a></li>
<li><a href="../building-blocks/switches.html">Switches</a></li>
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
</ul>
</li>
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
</ul>
<div id="content">
<div class="layout-content-row content-header">
<div class="layout-content-col span-9">
<h2>Multi-pane Layouts</h2>
</div>
<div class="paging-links layout-content-col span-4">
<a href="#" class="prev-page-link">Previous</a>
<a href="#" class="next-page-link">Next</a>
</div>
</div>
<p>When writing an app for Android, keep in mind that Android devices come in many different screen
sizes and types. Make sure that your app consistently provides a balanced and aesthetically pleasing
layout by adjusting its content to varying screen sizes and orientations.</p>
<p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into
one compound view when a lot of horizontal screen real estate is available and by splitting them up
when less space is available.</p>
<h2>Combining Multiple Views Into One</h2>
<p>On smaller devices your content is typically divided into a master grid or list view and a detail
view. Touching an item in the master view opens a different screen showing that item's detail
information.</p>
<img src="../static/content/multipane_views.png">
<p>Because tablets have more screen real estate than phones, you can use panels to combine the related
list and detail views into a single compound view. This uses the additional space more efficiently
and makes navigating the app easier. </p>
<img src="../static/content/multipane_view_tablet.png">
<p>In general, use the pane on the right to present more information about the item you selected in the
left pane. Make sure to keep the item in the left pane selected in order to establish the
relationship between the panels.</p>
<h2>Compound Views and Orientation Changes</h2>
<p>Screens should have the same functionality regardless of orientation. If you use a compound view in
one orientation, don't split it up when the user rotates the screen. There are several techniques
you can use to adjust the layout after orientation change while keeping functional parity intact.</p>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<img src="../static/content/multipane_stretch.png">
</div>
<div class="layout-content-col span-5">
<h4>Stretch/compress</h4>
<p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<img src="../static/content/multipane_stack.png">
</div>
<div class="layout-content-col span-5">
<h4>Stack</h4>
<p>Rearrange the panels on your screen to match the orientation.</p>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<img src="../static/content/multipane_expand.png">
</div>
<div class="layout-content-col span-5">
<h4>Expand/collapse</h4>
<p>When the device rotates, collapse the left pane view to only show the most important information.
Provide an <em>expand</em> control that allows the user to bring the left pane content back to its original
width and vice versa.</p>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<img src="../static/content/multipane_show.png">
</div>
<div class="layout-content-col span-5">
<h4>Show/hide</h4>
<p>After rotating the device, show the right pane in fullscreen view. Use the Up icon in the action bar
to show the left panel and allow navigation to a different email. Hide the left panel by touching
the content in the detail panel.</p>
</div>
</div>
<h2>Checklist</h2>
<ul>
<li>
<p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p>
</li>
<li>
<p>Identify the most appropriate method for the panels in your compound views to reorganize
themselves when screen orientation changes.</p>
</li>
<li>
<p>Look for opportunities to consolidate your views into multi-panel compound views.</p>
</li>
<li>
<p>Make sure that your screens provide functional parity after the screen orientation
changes.</p>
</li>
</ul>
<div class="layout-content-row content-footer">
<div class="paging-links layout-content-col span-9"> </div>
<div class="paging-links layout-content-col span-4">
<a href="#" class="prev-page-link">Previous</a>
<a href="#" class="next-page-link">Next</a>
</div>
</div>
</div>
</div>
<div id="page-footer">
<p id="copyright">
Except as noted, this content is licensed under
<a href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5</a>.<br>
For details and restrictions, see the
<a href="http://developer.android.com/license.html">Content License</a>.
</p>
<p>
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
</p>
</div>
</div>
<script src="../static/jquery-1.6.2.min.js"></script>
<script>
var SITE_ROOT = '../';
</script>
<script src="../static/default.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5831155-1");
pageTracker._trackPageview();
</script>
</body>
</html>
|
