Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Tabs |
Joe Fernandez | 33baa5a | 2013-11-14 11:41:19 -0800 | [diff] [blame] | 2 | page.tags=tabs,actionbar,navigation,viewpager |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
| 5 | <img src="{@docRoot}design/media/tabs_overview.png"> |
| 6 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 7 | <a class="notice-developers" href="{@docRoot}training/implementing-navigation/lateral.html"> |
| 8 | <div> |
| 9 | <h3>Developer Docs</h3> |
| 10 | <p>Creating Swipe Views with Tabs</p> |
| 11 | </div> |
| 12 | </a> |
| 13 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 14 | <p>Tabs in the action bar make it easy to explore and switch between different views or functional |
| 15 | aspects of your app, or to browse categorized data sets.</p> |
| 16 | |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 17 | <p>For details on using gestures to move between tabs, see the <a href="{@docRoot}design/patterns/swipe-views.html">Swipe Views</a> pattern.</p> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 18 | |
| 19 | <h2 id="scrollable">Scrollable Tabs</h2> |
| 20 | |
| 21 | |
| 22 | <div class="layout-content-row"> |
| 23 | <div class="layout-content-col span-6"> |
| 24 | |
| 25 | <p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate |
| 26 | to the next/previous view, swipe left or right.</p> |
| 27 | |
| 28 | </div> |
| 29 | <div class="layout-content-col span-7"> |
| 30 | |
| 31 | <video width="400" class="with-shadow play-on-hover" autoplay> |
| 32 | <source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4"> |
| 33 | <source src="{@docRoot}design/media/tabs_scrolly.webm" type="video/webm"> |
| 34 | <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg"> |
| 35 | </video> |
| 36 | <div class="figure-caption"> |
Roman Nurik | b20f120 | 2012-03-29 13:28:13 -0700 | [diff] [blame] | 37 | Scrolling tabs in the Play Store app. |
Dirk Dougherty | 0b73403 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 38 | <div class="video-instructions-image"> </div> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 39 | </div> |
| 40 | |
| 41 | </div> |
| 42 | </div> |
| 43 | |
| 44 | |
| 45 | <h2 id="fixed">Fixed Tabs</h2> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 46 | <p>Fixed tabs display all items concurrently. To navigate to a different view, touch the tab, or swipe left or right.</p> |
Peter Ng | 0212363 | 2012-08-06 11:44:48 -0700 | [diff] [blame] | 47 | <p>Fixed tabs are displayed with equal width, based on the width of the widest tab label. If there is insufficient room to display all tabs, the tab labels themselves will be scrollable. For this reason, fixed tabs are best suited for displaying 3 or fewer tabs.</p> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 48 | |
| 49 | <img src="{@docRoot}design/media/tabs_standard.png"> |
| 50 | <div class="figure-caption"> |
| 51 | Tabs in Holo Dark & Light. |
| 52 | </div> |
| 53 | |
| 54 | <img src="{@docRoot}design/media/tabs_youtube.png"> |
| 55 | <div class="figure-caption"> |
Scott Main | e04c454 | 2013-06-18 21:16:25 -0700 | [diff] [blame] | 56 | Tabs in the Google Play Movies app. |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 57 | </div> |