1 page.title=Tabs 2 @jd:body 3 4 <img src="{@docRoot}design/media/tabs_overview.png"> 5 6 <p>Tabs in the action bar make it easy to explore and switch between different views or functional 7 aspects of your app, or to browse categorized data sets.</p> 8 9 10 <h2 id="scrollable">Scrollable Tabs</h2> 11 12 13 <div class="layout-content-row"> 14 <div class="layout-content-col span-6"> 15 16 <p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate 17 to the next/previous view, swipe left or right.</p> 18 19 </div> 20 <div class="layout-content-col span-7"> 21 22 <video width="400" class="with-shadow play-on-hover" autoplay> 23 <source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4"> 24 <source src="{@docRoot}design/media/tabs_scrolly.webm" type="video/webm"> 25 <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg"> 26 </video> 27 <div class="figure-caption"> 28 Scrolling tabs in the Play Store app. 29 <div class="video-instructions"> </div> 30 </div> 31 32 </div> 33 </div> 34 35 36 <h2 id="fixed">Fixed Tabs</h2> 37 38 39 <p>Fixed tabs display all items concurrently. To navigate to a different view, touch the tab.</p> 40 41 <img src="{@docRoot}design/media/tabs_standard.png"> 42 <div class="figure-caption"> 43 Tabs in Holo Dark & Light. 44 </div> 45 46 <img src="{@docRoot}design/media/tabs_youtube.png"> 47 <div class="figure-caption"> 48 Tabs in the YouTube app. 49 </div> 50 51 52 53 <h2 id="stacked">Stacked Tabs</h2> 54 55 56 <p>If view navigation is essential to your app, you can break out tabs into a separate action bar. This 57 permits fast view switching even on narrower screens.</p> 58 59 <img src="{@docRoot}design/media/tabs_stacked.png"> 60
