page.title=Tabs
page.tags="tabs","action bar","navigation"
@jd:body

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

<p>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">&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 YouTube app.
</div>



<h2 id="stacked">Stacked Tabs</h2>


<p>If view navigation is essential to your app, you can break out tabs into a separate action bar. This
permits fast view switching even on narrower screens.</p>

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


<div class="note develop">
<p><strong>Developer Guide</strong></p>
  <p>For information about how to create tabs,
  see the <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> API guide.</p>
</div>
