Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Multi-pane Layouts |
Scott Main | e21406c | 2013-03-18 15:50:55 -0700 | [diff] [blame] | 2 | page.tags="tablet","navigation","layout","fragment" |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 5 | |
| 6 | <a class="notice-developers" href="{@docRoot}training/basics/fragments/index.html"> |
| 7 | <div> |
| 8 | <h3>Developer Docs</h3> |
| 9 | <p>Building a Dynamic UI with Fragments</p> |
| 10 | </div> |
| 11 | </a> |
| 12 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 13 | <p>When writing an app for Android, keep in mind that Android devices come in many different screen |
| 14 | sizes and types. Make sure that your app consistently provides a balanced and aesthetically pleasing |
| 15 | layout by adjusting its content to varying screen sizes and orientations.</p> |
| 16 | <p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into |
| 17 | one compound view when a lot of horizontal screen real estate is available and by splitting them up |
| 18 | when less space is available.</p> |
| 19 | <h2 id="combining-views">Combining Multiple Views Into One</h2> |
| 20 | |
| 21 | <p>On smaller devices your content is typically divided into a master grid or list view and a detail |
| 22 | view. Touching an item in the master view opens a different screen showing that item's detail |
| 23 | information.</p> |
| 24 | |
| 25 | <img src="{@docRoot}design/media/multipane_views.png"> |
| 26 | |
| 27 | <p>Because tablets have more screen real estate than phones, you can use panels to combine the related |
| 28 | list and detail views into a single compound view. This uses the additional space more efficiently |
| 29 | and makes navigating the app easier. </p> |
| 30 | |
| 31 | <img src="{@docRoot}design/media/multipane_view_tablet.png"> |
| 32 | |
| 33 | <p>In general, use the pane on the right to present more information about the item you selected in the |
| 34 | left pane. Make sure to keep the item in the left pane selected in order to establish the |
| 35 | relationship between the panels.</p> |
| 36 | <h2 id="orientation">Compound Views and Orientation Changes</h2> |
| 37 | |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 38 | <p>Screens should strive to have the same functionality regardless of orientation. If you use a compound view in |
| 39 | one orientation, try not to split it up when the user rotates the screen. There are several techniques |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 40 | you can use to adjust the layout after orientation change while keeping functional parity intact.</p> |
| 41 | |
| 42 | <div class="layout-content-row"> |
| 43 | <div class="layout-content-col span-8"> |
| 44 | |
| 45 | <img src="{@docRoot}design/media/multipane_stretch.png"> |
| 46 | |
| 47 | </div> |
| 48 | <div class="layout-content-col span-5"> |
| 49 | |
| 50 | <h4>Stretch/compress</h4> |
| 51 | <p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p> |
| 52 | |
| 53 | </div> |
| 54 | </div> |
| 55 | |
| 56 | <div class="layout-content-row"> |
| 57 | <div class="layout-content-col span-8"> |
| 58 | |
| 59 | <img src="{@docRoot}design/media/multipane_stack.png"> |
| 60 | |
| 61 | </div> |
| 62 | <div class="layout-content-col span-5"> |
| 63 | |
| 64 | <h4>Stack</h4> |
| 65 | <p>Rearrange the panels on your screen to match the orientation.</p> |
| 66 | |
| 67 | </div> |
| 68 | </div> |
| 69 | |
| 70 | <div class="layout-content-row"> |
| 71 | <div class="layout-content-col span-8"> |
| 72 | |
| 73 | <img src="{@docRoot}design/media/multipane_expand.png"> |
| 74 | |
| 75 | </div> |
| 76 | <div class="layout-content-col span-5"> |
| 77 | |
| 78 | <h4>Expand/collapse</h4> |
Peter Ng | 0212363 | 2012-08-06 11:44:48 -0700 | [diff] [blame] | 79 | <p>When the device rotates, collapse the left pane view to only show the most important information.</p> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 80 | |
| 81 | </div> |
| 82 | </div> |
| 83 | |
| 84 | <div class="layout-content-row"> |
| 85 | <div class="layout-content-col span-8"> |
| 86 | |
| 87 | <img src="{@docRoot}design/media/multipane_show.png"> |
| 88 | |
| 89 | </div> |
| 90 | <div class="layout-content-col span-5"> |
| 91 | |
| 92 | <h4>Show/hide</h4> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 93 | <p>If your screen cannot accommodate the compound view on rotation show the right pane in full screen view on rotation to portrait. Use the Up icon in action bar to show the parent screen.</p> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 94 | |
| 95 | </div> |
| 96 | </div> |
| 97 | |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 98 | |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 99 | |
| 100 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 101 | <h2 id="checklist">Checklist</h2> |
| 102 | |
| 103 | <ul> |
| 104 | <li> |
| 105 | <p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p> |
| 106 | </li> |
| 107 | <li> |
| 108 | <p>Identify the most appropriate method for the panels in your compound views to reorganize |
| 109 | themselves when screen orientation changes.</p> |
| 110 | </li> |
| 111 | <li> |
| 112 | <p>Look for opportunities to consolidate your views into multi-panel compound views.</p> |
| 113 | </li> |
| 114 | <li> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 115 | <p>Make sure that your screens try to provide functional parity after the screen orientation |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 116 | changes.</p> |
| 117 | </li> |
| 118 | </ul> |