blob: 89397aecadd2a1d9a763dc3291b186899ba71dbe [file] [log] [blame]
Roman Nurikb99ae732012-03-06 12:26:15 -08001page.title=Swipe Views
Joe Fernandez33baa5a2013-11-14 11:41:19 -08002page.tags=viewpager,navigation,tabs
Roman Nurikb99ae732012-03-06 12:26:15 -08003@jd:body
4
Scott Maincbcd17d2013-05-14 08:46:55 -07005<a class="notice-developers" href="{@docRoot}training/implementing-navigation/lateral.html">
6 <div>
7 <h3>Developer Docs</h3>
8 <p>Creating Swipe Views with Tabs</p>
9 </div>
10</a>
11
Roman Nurikb99ae732012-03-06 12:26:15 -080012<p>Efficient navigation is one of the cornerstones of a well-designed app. While apps are generally
13built in a hierarchical fashion, there are instances where horizontal navigation can flatten
14vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views
15allow the user to efficiently move from item to item using a simple gesture and thereby make
16browsing and consuming data a more fluent experience.</p>
17<h2 id="detail-views">Swiping Between Detail Views</h2>
18
19<p>An app's data is often organized in a master/detail relationship: The user can view a list of
20related data items, such as images, chats, or emails, and then pick one of the items to see the
21detail contents in a separate screen.</p>
22
23<img src="{@docRoot}design/media/swipe_views.png">
24<div class="figure-caption">
25 Master (left) and detail (right) views.
26</div>
27
28<p>On a phone, since the master and detail are on separate screens, this typically requires the user to
29jump back and forth between the list and the detail view, aka "pogo-sticking".</p>
30<p>In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by
31using the swipe gesture to navigate to the next/previous detail view.</p>
32
33<img src="{@docRoot}design/media/swipe_views2.png">
34<div class="figure-caption">
Dirk Dougherty0b734032013-10-19 11:43:41 -070035 Navigating between consecutive email messages using the swipe gesture. If a view contains content that exceeds the width of the screen such as a wide email message, make sure the user's initial swipes will scroll horizontally within the view. Once the end of the content is reached, an additional swipe should navigate to the next view. In addition, support the use of edge swipes to immediately navigate between views when content scrolls horizontally.
Peter Ng02123632012-08-06 11:44:48 -070036</div>
37
38<img src="{@docRoot}design/media/swipe_views3.png">
39<div class="figure-caption">
Dirk Dougherty0b734032013-10-19 11:43:41 -070040 Scrolling within a wide email message using the swipe gesture before navigating to the next message.
Roman Nurikb99ae732012-03-06 12:26:15 -080041</div>
42
43<h2 id="between-tabs">Swiping Between Tabs</h2>
44
45<div class="layout-content-row">
46 <div class="layout-content-col span-5">
47
Dirk Dougherty0b734032013-10-19 11:43:41 -070048 <div class="framed-nexus5-port-span-5">
Roman Nurikb99ae732012-03-06 12:26:15 -080049 <video class="play-on-hover" autoplay>
50 <source src="{@docRoot}design/media/swipe_tabs.mp4" type="video/mp4">
51 <source src="{@docRoot}design/media/swipe_tabs.webm" type="video/webm">
52 <source src="{@docRoot}design/media/swipe_tabs.ogv" type="video/ogg">
53 </video>
54 </div>
55 <div class="figure-caption">
56 People app with swipe gesture navigation between top-level screens.
57 <div class="video-instructions">&nbsp;</div>
58 </div>
59
60 </div>
61 <div class="layout-content-col span-8">
Peter Ng02123632012-08-06 11:44:48 -070062 <p>If your app uses action bar tabs, use swipe to navigate between the different views.</p>
63 <div class="vspace size-1">&nbsp;</div>
Roman Nurikb99ae732012-03-06 12:26:15 -080064
Peter Ng02123632012-08-06 11:44:48 -070065 <h2 id="checklist">Checklist</h2>
66 <ul>
67 <li>
68 <p>Use swipe to quickly navigate between detail views or tabs.</p>
69 </li>
70 <li>
71 <p>Transition between the views as the user performs the swipe gesture. Do not wait for the
72 gesture to complete and then transition between views.</p>
73 </li>
74 <li>
75 <p>If you used buttons in the past for previous/next navigation, replace them with
76 the swipe gesture.</p>
77 </li>
78 <li>
79 <p>Consider adding contextual information in your detail view that informs the user about the
80 relative list position of the currently visible item.</p>
81 </li>
82 <li>
83 <p>For more details on how to build swipe views, read the developer documentation on <a href="{@docRoot}training/implementing-navigation/lateral.html#horizontal-paging">Implementing Lateral Navigation</a>.</p>
84 </li>
85 </ul>
Roman Nurikb99ae732012-03-06 12:26:15 -080086 </div>
87</div>
Scott Maind4cc9422012-10-03 18:47:08 -070088