docs/html/design/building-blocks/tabs.jd

page.title=Tabs
page.tags="tabs","actionbar","navigation","viewpager"
@jd:body

<img src="{@docRoot}design/media/tabs_overview.png">

<a class="notice-developers" href="{@docRoot}training/implementing-navigation/lateral.html">
  <div>
    <h3>Developer Docs</h3>
    <p>Creating Swipe Views with Tabs</p>
  </div>
</a>

<p itemprop="description">Tabs in the action bar make it easy to explore and switch between different views or functional
aspects of your app, or to browse categorized data sets.</p>

<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>

<h2 id="scrollable">Scrollable Tabs</h2>


<div class="layout-content-row">
  <div class="layout-content-col span-6">

<p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate
to the next/previous view, swipe left or right.</p>

  </div>
  <div class="layout-content-col span-7">

    <video width="400" class="with-shadow play-on-hover" autoplay>
      <source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4">
      <source src="{@docRoot}design/media/tabs_scrolly.webm" type="video/webm">
      <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg">
    </video>
    <div class="figure-caption">
      Scrolling tabs in the Play Store app.
      <div class="video-instructions-image">&nbsp;</div>
    </div>

  </div>
</div>


<h2 id="fixed">Fixed Tabs</h2>
<p>Fixed tabs display all items concurrently. To navigate to a different view, touch the tab, or swipe left or right.</p>
<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>

<img src="{@docRoot}design/media/tabs_standard.png">
<div class="figure-caption">
  Tabs in Holo Dark &amp; Light.
</div>

<img src="{@docRoot}design/media/tabs_youtube.png">
<div class="figure-caption">
  Tabs in the Google Play Movies app.
</div>