topics/ui/actionbar.jd

page.title=Action Bar
page.tags=actionbar,menu,tabs

@jd:body


<a class="notice-designers top" href="{@docRoot}design/patterns/actionbar.html">
  <div>
    <h3>Design Guide</h3>
    <p>Action Bar</p>
  </div>
</a>

<div id="qv-wrapper">
<div id="qv">

  <h2>In this document</h2>
<ol>
  <li><a href="#Adding">Adding the Action Bar</a>
    <ol>
      <li><a href="#Removing">Removing the action bar</a></li>
      <li><a href="#Logo">Using a logo instead of an icon</a></li>
    </ol>
  </li>
  <li><a href="#ActionItems">Adding Action Items</a>
    <ol>
      <li><a href="#ActionEvents">Handling clicks on action items</a></li>
      <li><a href="#SplitBar">Using split action bar</a></li>
    </ol>
  </li>
  <li><a href="#Home">Navigating Up with the App Icon</a></li>
  <li><a href="#ActionView">Adding an Action View</a>
    <ol>
      <li><a href="#ActionViewCollapsing">Handling collapsible action views</a></li>
    </ol>
  </li>
  <li><a href="#ActionProvider">Adding an Action Provider</a>
    <ol>
      <li><a href="#ShareActionProvider">Using the ShareActionProvider</a></li>
      <li><a href="#CreatingActionProvider">Creating a custom action provider</a></li>
    </ol>
  </li>
  <li><a href="#Tabs">Adding Navigation Tabs</a></li>
  <li><a href="#Dropdown">Adding Drop-down Navigation</a></li>
  <li><a href="#Style">Styling the Action Bar</a>
    <ol>
      <li><a href="#GeneralStyles">General appearance</a></li>
      <li><a href="#ActionItemStyles">Action items</a></li>
      <li><a href="#NavigationStyles">Navigation tabs</a></li>
      <li><a href="#DropDownStyles">Drop-down lists</a></li>
      <li><a href="#StyleExample">Example theme</a></li>
    </ol>
  </li>
</ol>

  <h2>Key classes</h2>
  <ol>
    <li>{@link android.support.v7.app.ActionBar}</li>
    <li>{@link android.view.Menu}</li>
  </ol>

</div>
</div>

<p>The action bar is a window feature that identifies the user location, and
provides user actions and navigation modes. Using the action bar offers your users a
familiar interface across applications that the system gracefully adapts
for different screen configurations.</p>

<img src="{@docRoot}images/ui/actionbar@2x.png" alt="" width="428" height="215" />
<p class="img-caption"><strong>Figure 1.</strong> An action bar that includes the [1] app icon,
[2] two action items, and [3] action overflow.</p>

<p>The action bar provides several key functions:</p>

<ul>
  <li>Provides a dedicated space for giving your app an identity and indicating the user's
  location in the app.</li>
  <li>Makes important actions prominent and accessible in a predictable way
  (such as <em>Search</em>).</li>
  <li>Supports consistent navigation and view switching within apps (with tabs or drop-down
  lists).</li>
</ul>

<p>For more information about the action bar's interaction patterns and design guidelines,
see the <a href="{@docRoot}design/patterns/actionbar.html">Action Bar</a>
design guide.</p>

<p>The {@link android.app.ActionBar} APIs were first added in Android 3.0 (API level 11) but they
are also available in the <a href="{@docRoot}tools/support-library/index.html">Support Library</a>
for compatibility with Android 2.1 (API level 7) and above.</p>

<p><b>This guide focuses on how to use the
support library's action bar</b>, but if your app supports <em>only</em> Android 3.0 or higher, you
should use the {@link android.app.ActionBar} APIs in the framework. Most of the APIs are
the same&mdash;but reside in a different package namespace&mdash;with a few exceptions to method
names or signatures that are noted in the sections below.</p>


<div class="caution">
<p><strong>Caution:</strong> Be certain you import
the {@code ActionBar} class (and related APIs) from the appropriate package:</p>
<ul>
<li>If supporting API levels <em>lower than</em> 11: <br>
{@code import android.support.v7.app.ActionBar}</li>
<li>If supporting <em>only</em> API level 11 and higher: <br>
{@code import android.app.ActionBar}</li>
</ul>
</div>


<p class="note"><strong>Note:</strong> If you're looking for information about the <em>contextual
action bar</em> for displaying contextual action items, see the <a
href="{@docRoot}guide/topics/ui/menus.html#context-menu">Menu</a> guide.</p>


<h2 id="Adding">Adding the Action Bar</h2>

<p>As mentioned above, this guide focuses on how to use the {@link
android.support.v7.app.ActionBar} APIs in the support library. So before you can add the action
bar, you must set up your project with the <strong>appcompat v7</strong> support library by
following the instructions in the <a href="{@docRoot}tools/support-library/setup.html">Support
Library Setup</a>.</p>

<p>Once your project is set up with the support library, here's how to add the action bar:</p>
<ol>
  <li>Create your activity by extending {@link android.support.v7.app.ActionBarActivity}.</li>
  <li>Use (or extend) one of the {@link android.support.v7.appcompat.R.style#Theme_AppCompat
  Theme.AppCompat} themes for your activity. For example:
  <pre>&lt;activity android:theme="@style/Theme.AppCompat.Light" ... ></pre>
  </li>
</ol>

<p>Now your activity includes the action bar when running on Android 2.1 (API level 7) or higher.
</p>

<div class="note">
<p><b>On API level 11 or higher</b></p>
<p>The action bar is included in all activities that use the
{@link android.R.style#Theme_Holo Theme.Holo} theme (or one of its
descendants), which is the default theme when either the <a
href="{@docRoot}guide/topics/manifest/uses-sdk-element.html#target">{@code targetSdkVersion}</a> or
<a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html#min">{@code minSdkVersion}</a>
attribute is set to {@code "11"} or higher. If you don't want the action bar for an
activity, set the activity theme to {@link android.R.style#Theme_Holo_NoActionBar
Theme.Holo.NoActionBar}.</p>
</div>


<h3 id="Removing">Removing the action bar</h3>

<p>You can hide the action bar at runtime by calling {@link android.support.v7.app.ActionBar#hide}.
For example:</p>

<pre>
ActionBar actionBar = {@link android.support.v7.app.ActionBarActivity#getSupportActionBar()};
actionBar.hide();
</pre>

<div class="note">
<p><b>On API level 11 or higher</b></p>
<p>Get the {@link android.app.ActionBar} with the {@link android.app.Activity#getActionBar}
method.</p>
</div>

<p>When the action bar hides, the system adjusts your layout to fill the
screen space now available. You can bring the action bar back by calling {@link
android.support.v7.app.ActionBar#show()}.</p>

<p>Beware that hiding and removing the action bar causes your activity to re-layout in order to
account for the space consumed by the action bar. If your activity often hides and shows the
action bar, you might want to enable <em>overlay mode</em>. Overlay mode
draws the action bar in front of your activity layout, obscuring the top portion. This
way, your layout remains fixed when the action bar hides and re-appears. To enable overlay mode,
create a custom theme for your activity and set {@link
android.support.v7.appcompat.R.attr#windowActionBarOverlay
windowActionBarOverlay} to {@code true}. For more information, see the section below about <a
href="#Style">Styling the Action Bar</a>.</p>


<h3 id="Logo">Using a logo instead of an icon</h3>

<p>By default, the system uses your application icon in the action bar, as specified by the <a
href="{@docRoot}guide/topics/manifest/application-element.html#icon">{@code icon}</a>
attribute in the <a href="{@docRoot}guide/topics/manifest/application-element.html">{@code
&lt;application&gt;}</a> or <a
href="{@docRoot}guide/topics/manifest/activity-element.html">{@code
&lt;activity&gt;}</a> element. However, if you also specify the <a
href="{@docRoot}guide/topics/manifest/application-element.html#logo">{@code logo}</a>
attribute, then the action bar uses the logo image instead of the icon.</p>

<p>A logo should usually be wider than the icon, but should not include unnecessary text. You
should generally use a logo only when it represents your brand in a traditional format that users
recognize. A good example is the YouTube app's logo&mdash;the logo represents the expected user
brand, whereas the app's icon is a modified version that conforms to the square requirement
for the launcher icon.</p>


<h2 id="ActionItems">Adding Action Items</h2>

<div class="figure" style="width:340px">
  <img src="{@docRoot}images/ui/actionbar-item-withtext.png" width="340" alt="" />
  <p class="img-caption"><strong>Figure 2.</strong> Action bar with three action buttons and
the overflow button.</p>
</div>

<p>The action bar provides users access to the most important action
items relating to the app's current
context. Those that appear directly in the action bar with an icon and/or text are known
as <em>action buttons</em>. Actions that can't fit in the action bar or aren't
important enough are hidden in the action overflow.
The user can reveal a list of the other actions by pressing the overflow button
on the right side (or the device <em>Menu</em> button, if available).</p>

<p>When your activity starts, the system populates the action items by calling your activity's
{@link android.app.Activity#onCreateOptionsMenu onCreateOptionsMenu()} method. Use this
method to inflate a <a
href="{@docRoot}guide/topics/resources/menu-resource.html">menu resource</a> that defines all the
action items. For example, here's a menu resource defining a couple of menu items:</p>

<p class="code-caption">res/menu/main_activity_actions.xml</p>
<pre>
&lt;menu xmlns:android="http://schemas.android.com/apk/res/android" >
    &lt;item android:id="@+id/action_search"
          android:icon="@drawable/ic_action_search"
          android:title="@string/action_search"/&gt;
    &lt;item android:id="@+id/action_compose"
          android:icon="@drawable/ic_action_compose"
          android:title="@string/action_compose" /&gt;
&lt;/menu&gt;
</pre>

<p>Then in your activity's {@link android.app.Activity#onCreateOptionsMenu onCreateOptionsMenu()}
method, inflate the menu resource into the given {@link android.view.Menu}
to add each item to the action bar:</p>

<pre>
&#64;Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu items for use in the action bar
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_activity_actions, menu);
    return super.onCreateOptionsMenu(menu);
}
</pre>

<p>To request that an item appear directly in the action bar
as an action button, include {@code
showAsAction="ifRoom"} in the {@code &lt;item&gt;} tag. For example:</p>

<pre>
&lt;menu xmlns:android="http://schemas.android.com/apk/res/android"
      <strong>xmlns:yourapp="http://schemas.android.com/apk/res-auto"</strong> >
    &lt;item android:id="@+id/action_search"
          android:icon="@drawable/ic_action_search"
          android:title="@string/action_search"
          <strong>yourapp:showAsAction="ifRoom"</strong>  /&gt;
    ...
&lt;/menu&gt;
</pre>

<p>If there's not enough room for the item in the action bar, it will appear in the action
overflow.</p>


<div class="note" id="XmlAttributes">
<p><strong>Using XML attributes from the support library</strong></p>
Notice that the {@code showAsAction} attribute above uses a custom namespace defined in the
{@code &lt;menu>} tag. This is necessary when using any XML attributes defined by the support
library, because these attributes do not exist in the Android framework on older devices.
So you must use your own namespace as a prefix for all attributes defined by the support library.
</p>
</div>

<p>If your menu item supplies both a title and an icon&mdash;with the {@code title} and
{@code icon} attributes&mdash;then the action item shows only the icon by default. If you
want to display the text title, add {@code "withText"} to the {@code showAsAction}
attribute. For example:</p>

<pre>
&lt;item yourapp:showAsAction="ifRoom|withText" ... /&gt;
</pre>

<p class="note"><strong>Note:</strong> The {@code "withText"} value is a <em>hint</em> to the
action bar that the text title should appear. The action bar will show the title when possible, but
might not if an icon is available and the action bar is constrained for space.</p>

<p>You should always define the {@code title} for each item even if you don't declare that
the title appear with the action item, for the following reasons:</p>
<ul>
  <li>If there's not enough room in the action bar for the action item, the menu item appears
in the overflow where only the title appears.</li>
  <li>Screen readers for sight-impaired users read the menu item's title.</li>
  <li>If the action item appears with only the icon, a user can long-press the item to reveal a
tool-tip that displays the action title.</li>
</ul>

<p>The {@code icon} is optional, but recommended. For icon design recommendations,
see the <a href="{@docRoot}design/style/iconography.html#action-bar">Iconography</a> design
guide. You can also download a set of standard action bar icons (such as for Search or Discard)
from the <a href="{@docRoot}design/downloads/index.html">Downloads</a> page.</p>

<p>You can also use {@code "always"} to declare that an item always appear as an action button.
However, you <strong>should not</strong> force an item to appear in the action bar this
way. Doing so can create layout problems on devices with a narrow screen. It's best to instead
use {@code "ifRoom"} to request that an item appear in the action bar, but allow the system to move
it into the overflow when there's not enough room. However, it might be necessary to use this value
if the item includes an <a href="#ActionView">action view</a> that cannot be collapsed and
must always be visible to provide access to a critical feature.</p>


<h3 id="ActionEvents">Handling clicks on action items</h3>

<p>When the user presses an action, the system calls your activity's {@link
android.app.Activity#onOptionsItemSelected(MenuItem) onOptionsItemSelected()} method. Using the
{@link android.view.MenuItem} passed to this method, you can identify the action by calling {@link
android.view.MenuItem#getItemId()}. This returns the unique ID provided by the {@code &lt;item&gt;}
tag's {@code id} attribute so you can perform the appropriate action. For example:</p>

<pre>
&#64;Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle presses on the action bar items
    switch (item.getItemId()) {
        case R.id.action_search:
            openSearch();
            return true;
        case R.id.action_compose:
            composeMessage();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}
</pre>

<p class="note"><strong>Note:</strong> If you inflate menu items from a fragment, via the {@link
android.app.Fragment} class's {@link android.app.Fragment#onCreateOptionsMenu onCreateOptionsMenu()}
callback, the system calls {@link
android.app.Fragment#onOptionsItemSelected(MenuItem) onOptionsItemSelected()} for that
fragment when the user selects one of those items. However, the activity gets a chance to
handle the event first, so the system first calls {@link
android.app.Activity#onOptionsItemSelected(MenuItem) onOptionsItemSelected()} on the activity,
before calling the same callback for the fragment. To ensure that any fragments in the
activity also have a chance to handle the callback, always pass the call to the superclass
as the default behavior instead of returning {@code false} when you do not handle the item.</p>


<div class="figure" style="width:420px;margin-top:0">
<img src="{@docRoot}images/ui/actionbar-splitaction@2x.png" alt="" width="420"/>
<p class="img-caption"><strong>Figure 3.</strong> Mock-ups showing an action bar with
tabs (left), then with split action bar (middle); and with the app icon and title disabled
(right).</p>
</p>
</div>

<h3 id="SplitBar">Using split action bar</h3>

<p>Split action bar provides a separate
bar at the bottom of the screen to display all action items when the activity is running on
a narrow screen (such as a portrait-oriented handset).</p>

<p>Separating the action items this way
ensures that a reasonable amount of space is available to display all your action
items on a narrow screen, while leaving room for navigation and title elements at the top.</p>

<p>To enable split action bar when using the support library, you must do two things:</p>
<ol>
  <li>Add {@code uiOptions="splitActionBarWhenNarrow"} to each
<a href="{@docRoot}guide/topics/manifest/activity-element.html">{@code &lt;activity&gt;}</a>
element or to the
<a href="{@docRoot}guide/topics/manifest/application-element.html">{@code &lt;application&gt;}</a>
element. This attribute is understood only by API level 14 and higher (it is ignored
by older versions).</li>
  <li>To support older versions, add a <a
  href="{@docRoot}guide/topics/manifest/meta-data-element.html">{@code &lt;meta-data>}</a>
  element as a child of each
  <a href="{@docRoot}guide/topics/manifest/activity-element.html">{@code &lt;activity&gt;}</a>
  element that declares the same value for {@code "android.support.UI_OPTIONS"}.</li>
</ol>

<p>For example:</p>

<pre>
&lt;manifest ...>
    &lt;activity uiOptions="splitActionBarWhenNarrow" ... >
        &lt;meta-data android:name="android.support.UI_OPTIONS"
                   android:value="splitActionBarWhenNarrow" />
    &lt;/activity>
&lt;/manifest>
</pre>


<p>Using split action bar also allows <a href="#Tabs">navigation tabs</a> to collapse into the
main action bar if you remove the icon and title (as shown on the right in figure 3).
To create this effect, disable the action bar
icon and title with {@link android.support.v7.app.ActionBar#setDisplayShowHomeEnabled
setDisplayShowHomeEnabled(false)} and {@link
android.support.v7.app.ActionBar#setDisplayShowTitleEnabled setDisplayShowTitleEnabled(false)}.</p>


<h2 id="Home">Navigating Up with the App Icon</h2>

<a class="notice-designers" href="{@docRoot}design/patterns/navigation.html">
  <div>
    <h3>Design Guide</h3>
    <p>Navigation with Back and Up</p>
  </div>
</a>

<div class="figure" style="width:240px">
  <img src="{@docRoot}images/ui/actionbar-up.png" width="240" alt="" />
  <p class="img-caption"><strong>Figure 4.</strong> The <em>Up</em> button in Gmail.</p>
</div>

<p>Enabling the app icon as an <em>Up</em> button allows the user to navigate your app based
on the hierarchical relationships between screens. For instance, if screen A displays a list of
items, and selecting an item leads to screen B, then
screen B should include the <em>Up</em> button, which returns to screen A.</p>

<p class="note"><strong>Note:</strong> Up navigation is distinct from the back navigation provided
by the system <em>Back</em> button. The <em>Back</em> button is used to navigate in reverse
chronological order through the history of screens the user has recently worked with. It is
generally based on the temporal relationships between screens, rather than the app's hierarchy
structure (which is the basis for up navigation).</p>

<p>To enable the app icon as an <em>Up</em> button, call {@link
android.support.v7.app.ActionBar#setDisplayHomeAsUpEnabled setDisplayHomeAsUpEnabled()}.
For example:</p>

<pre>
&#64;Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_details);

    ActionBar actionBar = getSupportActionBar();
    actionBar.setDisplayHomeAsUpEnabled(true);
    ...
}
</pre>

<p>Now the icon in the action bar appears with the <em>Up</em> caret (as shown in figure 4).
However, it won't do anything by default. To specify the activity to open when the
user presses <em>Up</em> button, you have two options:</p>

<ul>
  <li><b>Specify the parent activity in the manifest file.</b>
    <p>This is the best option when <strong>the parent activity is always the same</strong>. By
declaring in the manifest which activity is the parent, the action bar automatically performs the
correct action when the user presses the <em>Up</em> button.</p>

    <p>Beginning in Android 4.1 (API level 16), you can declare the parent with the <a href=
"{@docRoot}guide/topics/manifest/activity-element.html#parent">{@code parentActivityName}</a>
attribute in the <a href="{@docRoot}guide/topics/manifest/activity-element.html">{@code
&lt;activity&gt;}</a> element.</p>
    <p>To support older devices with the support library, also
include a <a href="{@docRoot}guide/topics/manifest/meta-data-element.html">{@code
&lt;meta-data&gt;}</a> element that specifies
the parent activity as the value for {@code android.support.PARENT_ACTIVITY}. For example:</p>
<pre>
&lt;application ... >
    ...
    &lt;!-- The main/home activity (has no parent activity) -->
    &lt;activity
        android:name="com.example.myfirstapp.MainActivity" ...>
        ...
    &lt;/activity>
    &lt;!-- A child of the main activity -->
    &lt;activity
        android:name="com.example.myfirstapp.DisplayMessageActivity"
        android:label="&#64;string/title_activity_display_message"
        android:parentActivityName="com.example.myfirstapp.MainActivity" >
        &lt;!-- Parent activity meta-data to support API level 7+ -->
        &lt;meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.example.myfirstapp.MainActivity" />
    &lt;/activity>
&lt;/application>
</pre>

  <p>Once the parent activity is specified in the manifest like this and you enable the <em>Up</em>
  button with {@link
android.support.v7.app.ActionBar#setDisplayHomeAsUpEnabled setDisplayHomeAsUpEnabled()}, your work
is done and the action bar properly navigates up.</p>
  </li>


  <li><strong>Or, override {@link
android.support.v7.app.ActionBarActivity#getSupportParentActivityIntent()} and {@link
android.support.v7.app.ActionBarActivity#onCreateSupportNavigateUpTaskStack
onCreateSupportNavigateUpTaskStack()} in your activity</strong>.</li>

    <p>This is appropriate when <strong>the parent activity may be different</strong> depending
    on how the user arrived at the current screen. That is, if there are many paths that the user
    could have taken to reach the current screen, the <em>Up</em> button should navigate
    backward along the path the user actually followed to get there.</p>

    <p>The system calls {@link
android.support.v7.app.ActionBarActivity#getSupportParentActivityIntent()} when the user presses
the <em>Up</em> button while navigating your app (within your app's own task). If the activity that
should open upon up navigation differs depending on how the user arrived at the current location,
then you should override this method to return the {@link
android.content.Intent} that starts the appropriate parent activity.</p>

    <p>The system calls {@link
android.support.v7.app.ActionBarActivity#onCreateSupportNavigateUpTaskStack
onCreateSupportNavigateUpTaskStack()} for your activity when the user presses the <em>Up</em>
button while your activity is running in a task that does <em>not</em> belong to your app. Thus,
you must use the {@link android.support.v4.app.TaskStackBuilder} passed to this method to construct
the appropriate back stack that should be synthesized when the user navigates up.</p>

    <p>Even if you override {@link
android.support.v7.app.ActionBarActivity#getSupportParentActivityIntent()} to specify up navigation
as the user navigates your app, you can avoid the need to implement {@link
android.support.v7.app.ActionBarActivity#onCreateSupportNavigateUpTaskStack
onCreateSupportNavigateUpTaskStack()} by declaring "default" parent activities in the manifest file
as shown above. Then the default implementation of {@link
android.support.v7.app.ActionBarActivity#onCreateSupportNavigateUpTaskStack
onCreateSupportNavigateUpTaskStack()} will synthesize a back stack based on the parent activities
declared in the manifest.</p>

  </li>
</ul>

<p class="note"><strong>Note:</strong>
If you've built your app hierarchy using a series of fragments instead of multiple
activities, then neither of the above options will work. Instead, to navigate up through your
fragments, override {@link android.support.v7.app.ActionBarActivity#onSupportNavigateUp()}
to perform the appropriate fragment transaction&mdash;usually by popping
the current fragment from the back stack by calling {@link
android.support.v4.app.FragmentManager#popBackStack()}.</p>

<p>For more information about implementing <em>Up</em> navigation, read
<a href="{@docRoot}training/implementing-navigation/ancestral.html">Providing Up Navigation</a>.</p>


<h2 id="ActionView">Adding an Action View</h2>

<div class="figure" style="width:340px">
<img src="/images/ui/actionbar-searchview@2x.png" alt="" width="340" />
<p class="img-caption"><strong>Figure 5.</strong> An action bar with a collapsible
{@link android.support.v7.widget.SearchView}.</p>
</div>


<p>An <em>action view</em> is a widget that appears in the action bar as a substitute for an action
button. An action view provides fast access to rich actions without changing activities or
fragments, and without replacing the action bar. For example, if you have an action for Search, you
can add an action view to
embeds a {@link android.support.v7.widget.SearchView} widget in the action bar, as shown in figure
5.</p>

<p>To declare an action view, use either the {@code
actionLayout} or {@code actionViewClass} attribute to specify either a layout
resource or widget class to use, respectively. For example, here's how to add
the {@link android.support.v7.widget.SearchView} widget:</p>

<pre>
&lt;?xml version="1.0" encoding="utf-8"?>
&lt;menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
    &lt;item android:id="@+id/action_search"
          android:title="@string/action_search"
          android:icon="@drawable/ic_action_search"
          yourapp:showAsAction="ifRoom|collapseActionView"
          <b>yourapp:actionViewClass="android.support.v7.widget.SearchView"</b> /&gt;
&lt;/menu>
</pre>

<p>Notice that the {@code showAsAction} attribute also includes the {@code "collapseActionView"}
value. This is optional and declares that the action view should be collapsed into a
button. (This behavior is explained further in the following section about
<a href="#ActionViewCollapsing">Handling collapsible action views</a>.)</p>

<p>If you need to configure the action view (such as to add event listeners), you can do so during
the {@link android.app.Activity#onCreateOptionsMenu onCreateOptionsMenu()} callback. You can
acquire the action view object by calling the static method {@link
android.support.v4.view.MenuItemCompat#getActionView MenuItemCompat.getActionView()} and passing it
the corresponding {@link android.view.MenuItem}. For example, the search widget from the above
sample is acquired like this:</p>


<pre>
&#64;Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_activity_actions, menu);
    MenuItem searchItem = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    // Configure the search info and add any event listeners
    ...
    return super.onCreateOptionsMenu(menu);
}
</pre>

<div class="note">
<p><b>On API level 11 or higher</b></p>
<p>Get the action view by calling {@link android.view.MenuItem#getActionView} on the
corresponding {@link android.view.MenuItem}:</p>
<pre>menu.findItem(R.id.action_search).getActionView()</pre>
</div>

<p>For more information about using the search widget, see <a
href="{@docRoot}guide/topics/search/search-dialog.html">Creating a Search Interface</a>.</p>


<h3 id="ActionViewCollapsing">Handling collapsible action views</h3>

<p>To preserve the action bar space, you can collapse your action view into an action button.
When collapsed, the system might place the action
into the action overflow, but the
action view still appears in the action bar when the user selects it. You can make your action
view collapsible by adding {@code "collapseActionView"} to the {@code showAsAction}
attribute, as shown in the XML above.</p>

<p>Because the system expands the action view when the user selects the action, you
<em>do not</em> need to respond to the item in the {@link
android.app.Activity#onOptionsItemSelected onOptionsItemSelected()} callback. The system still calls
{@link android.app.Activity#onOptionsItemSelected onOptionsItemSelected()}, but if
you return {@code true} (indicating you've handled the event instead), then the
action view will <em>not</em> expand.</p>

<p>The system also collapses your action view when the user presses the <em>Up</em> button
or <em>Back</em> button.</p>

<p>If you need to update your activity based on the visibility of your action view, you can receive
callbacks when the action is expanded and collapsed by defining an {@link
android.support.v4.view.MenuItemCompat.OnActionExpandListener OnActionExpandListener} and
passing it to {@link android.support.v4.view.MenuItemCompat#setOnActionExpandListener
setOnActionExpandListener()}. For example:</p>


<pre>
&#64;Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.options, menu);
    MenuItem menuItem = menu.findItem(R.id.actionItem);
    ...

    // When using the support library, the setOnActionExpandListener() method is
    // static and accepts the MenuItem object as an argument
    MenuItemCompat.setOnActionExpandListener(menuItem, new OnActionExpandListener() {
        &#64;Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            // Do something when collapsed
            return true;  // Return true to collapse action view
        }

        &#64;Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            // Do something when expanded
            return true;  // Return true to expand action view
        }
    });
}
</pre>


<h2 id="ActionProvider">Adding an Action Provider</h2>

<div class="figure" style="width:240px">
  <img src="{@docRoot}images/ui/actionbar-shareaction@2x.png" alt="" width="240" />
  <p class="img-caption"><strong>Figure 6.</strong> An action bar with
  {@link android.widget.ShareActionProvider} expanded to show share targets.</p>
</div>

<p>Similar to an <a href="#ActionView">action view</a>, an <em>action provider</em>
replaces an action button with a customized layout. However,
unlike an action view, an action provider takes control of all the action's behaviors
and an action provider can display a submenu when pressed.</p>

<p>To declare an action provider, supply the {@code actionViewClass} attribute in the
menu {@code &lt;item>} tag with a fully-qualified class name for an
{@link android.support.v4.view.ActionProvider}.</p>

<p>You can build your own action provider by extending the {@link
android.support.v4.view.ActionProvider} class, but Android provides some pre-built action providers
such as {@link android.support.v7.widget.ShareActionProvider}, which facilitates a "share" action
by showing a list of possible apps for sharing directly in the action bar (as shown in figure
6).</p>

<p>Because each {@link android.support.v4.view.ActionProvider} class defines its own action
behaviors, you don't need to listen for the action in the {@link
android.app.Activity#onOptionsItemSelected onOptionsItemSelected()} method. If necessary though,
you can still listen for the click event in the {@link android.app.Activity#onOptionsItemSelected
onOptionsItemSelected()} method in case you need to simultaneously perform another action. But be
sure to return {@code false} so that the the action provider still receives the {@link
android.support.v4.view.ActionProvider#onPerformDefaultAction()} callback to perform its intended
action.</p>


<p>However, if the action provider provides a submenu of actions, then your
activity does not receive a call to {@link android.app.Activity#onOptionsItemSelected
onOptionsItemSelected()} when the user opens the list or selects one of the submenu items.</p>


<h3 id="ShareActionProvider">Using the ShareActionProvider</h3>

<p>To add a "share" action with {@link android.support.v7.widget.ShareActionProvider},
define the {@code actionProviderClass} for an {@code &lt;item&gt;} tag with
the {@link android.support.v7.widget.ShareActionProvider} class. For example:</p>

<pre>
&lt;?xml version="1.0" encoding="utf-8"?>
&lt;menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
    &lt;item android:id="@+id/action_share"
          android:title="@string/share"
          yourapp:showAsAction="ifRoom"
          <strong>yourapp:actionProviderClass="android.support.v7.widget.ShareActionProvider"</strong>
          /&gt;
    ...
&lt;/menu>
</pre>

<p>Now the action provider takes control of the action item and handles both
its appearance and behavior. But you must
still provide a title for the item to be used when it appears in the action overflow.</p>

<p>The only thing left to do is define
the {@link android.content.Intent} you want to use for sharing. To do so, edit
your {@link
android.app.Activity#onCreateOptionsMenu onCreateOptionsMenu()} method to call {@link
android.support.v4.view.MenuItemCompat#getActionProvider MenuItemCompat.getActionProvider()}
and pass it the {@link android.view.MenuItem} holding the action provider. Then call {@link
android.support.v7.widget.ShareActionProvider#setShareIntent setShareIntent()} on the
returned {@link android.support.v7.widget.ShareActionProvider} and pass it an
{@link android.content.Intent#ACTION_SEND} intent with the appropriate content attached.</p>

<p>You should call {@link
android.support.v7.widget.ShareActionProvider#setShareIntent setShareIntent()} once during {@link
android.app.Activity#onCreateOptionsMenu onCreateOptionsMenu()} to initialize the share action,
but because the user context might change, you must update the intent any time the shareable
content changes by again calling {@link
android.support.v7.widget.ShareActionProvider#setShareIntent setShareIntent()}.</p>

<p>For example:</p>

<pre>
private ShareActionProvider mShareActionProvider;

&#64;Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_activity_actions, menu);

    // Set up ShareActionProvider's default share intent
    MenuItem shareItem = menu.findItem(R.id.action_share);
    mShareActionProvider = (ShareActionProvider)
            MenuItemCompat.getActionProvider(shareItem);
    mShareActionProvider.setShareIntent(getDefaultIntent());

    return super.onCreateOptionsMenu(menu);
}

/** Defines a default (dummy) share intent to initialize the action provider.
  * However, as soon as the actual content to be used in the intent
  * is known or changes, you must update the share intent by again calling
  * mShareActionProvider.{@link android.support.v7.widget.ShareActionProvider#setShareIntent setShareIntent()}
  */
private Intent getDefaultIntent() {
    Intent intent = new Intent(Intent.ACTION_SEND);
    intent.setType("image/*");
    return intent;
}
</pre>

<p>The {@link android.support.v7.widget.ShareActionProvider} now handles all user interaction with
the item and you <em>do not</em> need to handle click events from the {@link
android.app.Activity#onOptionsItemSelected onOptionsItemSelected()} callback method.</p>


<p>By default, the {@link android.support.v7.widget.ShareActionProvider} retains a ranking for each
share target based on how often the user selects each one. The share targets used more frequently
appear at the top of the drop-down list and the target used most often appears directly in the
action bar as the default share target. By default, the ranking information is saved in a private
file with a name specified by {@link
android.support.v7.widget.ShareActionProvider#DEFAULT_SHARE_HISTORY_FILE_NAME}. If you use the
{@link android.support.v7.widget.ShareActionProvider} or an extension of it for only one type of
action, then you should continue to use this default history file and there's nothing you need to
do. However, if you use {@link android.support.v7.widget.ShareActionProvider} or an extension of it
for multiple actions with semantically different meanings, then each {@link
android.support.v7.widget.ShareActionProvider} should specify its own history file in order to
maintain its own history. To specify a different history file for the {@link
android.support.v7.widget.ShareActionProvider}, call {@link
android.support.v7.widget.ShareActionProvider#setShareHistoryFileName setShareHistoryFileName()}
and provide an XML file name (for example, {@code "custom_share_history.xml"}).</p>


<p class="note"><strong>Note:</strong> Although the {@link
android.support.v7.widget.ShareActionProvider} ranks share targets based on frequency of use, the
behavior is extensible and extensions of {@link android.support.v7.widget.ShareActionProvider} can
perform different behaviors and ranking based on the history file (if appropriate).</p>


<h3 id="CreatingActionProvider">Creating a custom action provider</h3>

<p>Creating your own action provider allows you to re-use and manage dynamic action item
behaviors in a self-contained module, rather than handle action item transformations and
behaviors in your fragment or activity
code. As shown in the previous section, Android already provides an implementation of {@link
android.support.v4.view.ActionProvider} for share actions: the {@link
android.support.v7.widget.ShareActionProvider}.</p>

<p>To create your own action provider for a different action, simply extend the
{@link android.support.v4.view.ActionProvider} class and implement
its callback methods as appropriate. Most importantly, you should implement the following:</p>

<dl>
  <dt>{@link android.support.v4.view.ActionProvider#ActionProvider ActionProvider()}</dt>
  <dd>This constructor passes you the application {@link android.content.Context}, which you
should save in a member field to use in the other callback methods.</dd>

  <dt>{@link android.support.v4.view.ActionProvider#onCreateActionView(MenuItem)}</dt>
  <dd>This is where you define the action view for the item. Use the {@link
android.content.Context} acquired from the constructor to instantiate a {@link
android.view.LayoutInflater} and inflate your action view layout from an XML resource, then hook
up event listeners. For example:
<pre>
public View onCreateActionView(MenuItem forItem) {
    // Inflate the action view to be shown on the action bar.
    LayoutInflater layoutInflater = LayoutInflater.from(mContext);
    View view = layoutInflater.inflate(R.layout.action_provider, null);
    ImageButton button = (ImageButton) view.findViewById(R.id.button);
    button.setOnClickListener(new View.OnClickListener() {
        &#064;Override
        public void onClick(View v) {
            // Do something...
        }
    });
    return view;
}
</pre>
</dd>

  <dt>{@link android.support.v4.view.ActionProvider#onPerformDefaultAction()}</dt>
  <dd>The system calls this when the menu item is selected from the action overflow and the
action provider should perform a default action for the menu item.
  <p>However, if your action provider provides a submenu, through the {@link
android.support.v4.view.ActionProvider#onPrepareSubMenu onPrepareSubMenu()} callback, then the
submenu appears even when the action provider is placed in the action overflow. Thus, {@link
android.support.v4.view.ActionProvider#onPerformDefaultAction()} is never called when there is a
submenu.</p>

  <p class="note"><strong>Note:</strong> An activity or a fragment that implements {@link
android.app.Activity#onOptionsItemSelected onOptionsItemSelected()} can override the action
provider's default behavior (unless it uses a submenu) by handling the item-selected event (and
returning <code>true</code>), in which case, the system does not call {@link
android.support.v4.view.ActionProvider#onPerformDefaultAction()}.</p>

</dd>
</dl>

<p>For an example extension of {@link android.view.ActionProvider}, see <a
href="{@docRoot}resources/samples/ApiDemos/src/com/example/android/apis/app/ActionBarSettingsActionProviderActivity.html"
>ActionBarSettingsActionProviderActivity</a>.</p>


<h2 id="Tabs">Adding Navigation Tabs</h2>

<img src="{@docRoot}images/ui/actionbar-tabs@2x.png" width="760" alt="" />
<p class="img-caption"><strong>Figure 7.</strong> Action bar tabs on a wide screen.</p>

<a class="notice-designers" href="{@docRoot}design/building-blocks/tabs.html">
  <div>
    <h3>Design Guide</h3>
    <p>Tabs</p>
  </div>
</a>

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


<div class="figure" style="width:240px">
  <img src="{@docRoot}images/ui/actionbar-tabs-stacked@2x.png" width="240" alt="" />
  <p class="img-caption"><strong>Figure 8.</strong> Tabs on a narrow screen.</p>
</div>

<p>Tabs in the action bar make it easy for users to explore and switch between different views in
your app. The tabs provided by the {@link android.support.v7.app.ActionBar} are ideal because they
adapt to different screen sizes. For example, when the screen is wide enough the tabs appear in the
action bar alongside the action buttons (such as when on a tablet, shown in figure 7), while when
on a narrow screen they appear in a separate bar (known as the "stacked action bar", shown in
figure 8). In some cases, the Android system will instead show your tab items as a drop-down list
to ensure the best fit in the action bar.</p>

<p>To get started, your layout must include a {@link android.view.ViewGroup} in which you place
each {@link android.app.Fragment} associated with a tab. Be sure the {@link android.view.ViewGroup}
has a resource ID so you can reference it from your code and swap the tabs within it.
Alternatively, if the tab content will fill the activity layout, then your activity doesn't need a
layout at all (you don't even need to call {@link android.app.Activity#setContentView
setContentView()}). Instead, you can place each fragment in the default root view, which you can
refer to with the {@code android.R.id.content} ID.</p>


<p>Once you determine where the fragments appear in the layout, the basic procedure to add tabs
is:</p>
<ol>
  <li>Implement the {@link android.support.v7.app.ActionBar.TabListener} interface. This interface
  provides callbacks for tab events, such as when the user presses one so you can swap the
  tabs.</li>
  <li>For each tab you want to add, instantiate an {@link android.support.v7.app.ActionBar.Tab}
  and set the {@link android.support.v7.app.ActionBar.TabListener} by calling {@link
  android.support.v7.app.ActionBar.Tab#setTabListener setTabListener()}. Also set the tab's title
  and with {@link android.app.ActionBar.Tab#setText setText()} (and optionally, an icon with
  {@link android.app.ActionBar.Tab#setIcon setIcon()}).</li>
  <li>Then add each tab to the action bar by calling {@link android.support.v7.app.ActionBar#addTab
  addTab()}.</li>
</ol>

<p>Notice that the {@link android.support.v7.app.ActionBar.TabListener}
callback methods don't specify which fragment is associated with the tab, but merely which
{@link android.support.v7.app.ActionBar.Tab} was selected.
You must define your own association
between each {@link android.app.ActionBar.Tab} and the appropriate {@link android.app.Fragment} that
it represents. There are several ways you
can define the association, depending on your design.</p>

<p>For example, here's how you might implement the {@link android.app.ActionBar.TabListener}
such that each tab uses its own instance of the listener:</p>
<pre>
public static class TabListener&lt;T extends Fragment> implements ActionBar.TabListener {
    private Fragment mFragment;
    private final Activity mActivity;
    private final String mTag;
    private final Class&lt;T> mClass;

    /** Constructor used each time a new tab is created.
      * @param activity  The host Activity, used to instantiate the fragment
      * @param tag  The identifier tag for the fragment
      * @param clz  The fragment's Class, used to instantiate the fragment
      */
    public TabListener(Activity activity, String tag, Class&lt;T> clz) {
        mActivity = activity;
        mTag = tag;
        mClass = clz;
    }

    /* The following are each of the {@link android.app.ActionBar.TabListener} callbacks */

    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // Check if the fragment is already initialized
        if (mFragment == null) {
            // If not, instantiate and add it to the activity
            mFragment = Fragment.instantiate(mActivity, mClass.getName());
            ft.add(android.R.id.content, mFragment, mTag);
        } else {
            // If it exists, simply attach it in order to show it
            ft.attach(mFragment);
        }
    }

    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        if (mFragment != null) {
            // Detach the fragment, because another one is being attached
            ft.detach(mFragment);
        }
    }

    public void onTabReselected(Tab tab, FragmentTransaction ft) {
        // User selected the already selected tab. Usually do nothing.
    }
}
</pre>

<p class="caution"><strong>Caution:</strong> You <strong>must not</strong> call {@link
android.app.FragmentTransaction#commit} for the fragment transaction in each of these
callbacks&mdash;the system calls it for you and it may throw an exception if you call it yourself.
You also <strong>cannot</strong> add these fragment transactions to the back stack.</p>

<p>In this example, the listener simply attaches ({@link android.app.FragmentTransaction#attach
attach()}) a fragment to the activity layout&mdash;or if not instantiated, creates the fragment and
adds ({@link android.app.FragmentTransaction#add add()}) it to the layout (as a child of the {@code
android.R.id.content} view group)&mdash;when the respective tab is selected, and detaches ({@link
android.app.FragmentTransaction#detach detach()}) it when the tab is unselected.</p>

<p>All that remains is to create each {@link android.app.ActionBar.Tab} and add it to the {@link
android.app.ActionBar}. Additionally, you must call {@link
android.app.ActionBar#setNavigationMode(int) setNavigationMode(NAVIGATION_MODE_TABS)} to make the
tabs visible.</p>

<p>For example, the following code adds two tabs using the listener defined above:</p>

<pre>
&#64;Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Notice that setContentView() is not used, because we use the root
    // android.R.id.content as the container for each fragment

    // setup action bar for tabs
    ActionBar actionBar = getSupportActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    actionBar.setDisplayShowTitleEnabled(false);

    Tab tab = actionBar.newTab()
                       .setText(R.string.artist)
                       .setTabListener(new TabListener&lt;ArtistFragment>(
                               this, "artist", ArtistFragment.class));
    actionBar.addTab(tab);

    tab = actionBar.newTab()
                   .setText(R.string.album)
                   .setTabListener(new TabListener&lt;AlbumFragment>(
                           this, "album", AlbumFragment.class));
    actionBar.addTab(tab);
}
</pre>


<p>If your activity stops, you should retain the currently selected tab with the <a href=
"{@docRoot}guide/components/activities.html#SavingActivityState">saved instance state</a> so you
can open the appropriate tab when the user returns. When it's time to save the state, you can query
the currently selected tab with {@link
android.support.v7.app.ActionBar#getSelectedNavigationIndex()}. This returns the index position of
the selected tab.</p>


<p class="caution"><strong>Caution:</strong> It's important that you save the state of each fragment
so when users switch fragments with the tabs and then return to a previous
fragment, it looks the way it did when they left. Some of the state is saved by default, but you
may need to manually save state for customized views. For information about saving the state of your
fragment, see the <a href="{@docRoot}guide/components/fragments.html">Fragments</a>
API guide.</p>

<p class="note"><strong>Note:</strong> The above implementation for {@link
android.support.v7.app.ActionBar.TabListener} is one of several possible techniques. Another popular
option is to use {@link android.support.v4.view.ViewPager} to manage the fragments so users
can also use a swipe gesture to switch tabs. In this case, you simply tell the
{@link android.support.v4.view.ViewPager} the current tab position in the
{@link android.support.v7.app.ActionBar.TabListener#onTabSelected onTabSelected()} callback.
For more information, read
<a href="{@docRoot}training/implementing-navigation/lateral.html"
>Creating Swipe Views with Tabs</a>.</p>


<h2 id="Dropdown">Adding Drop-down Navigation</h2>

<div class="figure" style="width:240px">
  <img src="{@docRoot}images/ui/actionbar-dropdown@2x.png" alt="" width="240" />
  <p class="img-caption"><strong>Figure 9.</strong> A drop-down navigation list in the
action bar.</p>
</div>

<p>As another mode of navigation (or filtering) for your activity, the action bar offers a built
in drop-down list (also known as a "spinner"). For example, the drop-down list can offer different
modes by which content in the activity is sorted.</p>

<p>Using the drop-down list is useful when changing the content is important but not necessarily a
frequent occurrence. In cases where switching the content is more frequent,
you should use <a href="#Tabs">navigation tabs</a> instead.</p>


<p>The basic procedure to enable drop-down navigation is:</p>

<ol>
  <li>Create a {@link android.widget.SpinnerAdapter} that provides the
list of selectable items for the drop-down and the layout to use when drawing each item in the
list.</li>
  <li>Implement {@link android.support.v7.app.ActionBar.OnNavigationListener} to define the
  behavior that occurs when the user selects an item from the list.</li>
  <li>During your activity's {@link android.app.Activity#onCreate
onCreate()} method, enable the action bar's drop-down list by calling {@link
android.support.v7.app.ActionBar#setNavigationMode setNavigationMode(NAVIGATION_MODE_LIST)}.
  </li>
  <li>Set the callback for the drop-down list with {@link
android.support.v7.app.ActionBar#setListNavigationCallbacks setListNavigationCallbacks()}.
For example:
<pre>
actionBar.setListNavigationCallbacks(mSpinnerAdapter, mNavigationCallback);
</pre>
<p>This method takes your {@link android.widget.SpinnerAdapter} and {@link
android.support.v7.app.ActionBar.OnNavigationListener}.</p>
</li>
</ol>

<p>This procedure is relatively short, but implementing the {@link android.widget.SpinnerAdapter}
and {@link android.app.ActionBar.OnNavigationListener} is where most of the work is done. There are
many ways you can implement these to define the functionality for your drop-down navigation and
implementing various types of {@link android.widget.SpinnerAdapter} is beyond the scope of this
document (you should refer to the {@link android.widget.SpinnerAdapter} class reference for more
information). However, below is an example for a {@link android.widget.SpinnerAdapter} and {@link
android.app.ActionBar.OnNavigationListener} to get you started (click the title to reveal the
sample).</p>


<div class="toggle-content closed">

  <h3 id="Spinner"><a href="#" onclick="return toggleContent(this)">
    <img src="{@docRoot}assets/images/triangle-closed.png" class="toggle-content-img" alt="" />
    Example SpinnerAdapter and OnNavigationListener
  </a></h3>

  <div class="toggle-content-toggleme">

<p>{@link android.widget.SpinnerAdapter} is an adapter that provides data for a spinner widget,
such as the drop-down list in the action bar. {@link android.widget.SpinnerAdapter} is an interface
that you can implement, but Android includes some useful implementations that you can extend, such
as {@link android.widget.ArrayAdapter} and {@link
android.widget.SimpleCursorAdapter}. For example, here's an easy way to create a {@link
android.widget.SpinnerAdapter} by using {@link android.widget.ArrayAdapter} implementation, which
uses a string array as the data source:</p>

<pre>
SpinnerAdapter mSpinnerAdapter = ArrayAdapter.createFromResource(this,
        R.array.action_list, android.R.layout.simple_spinner_dropdown_item);
</pre>

<p>The {@link android.widget.ArrayAdapter#createFromResource createFromResource()} method takes
three parameters: the application {@link android.content.Context}, the resource ID for the string
array, and the layout to use for each list item.</p>

<p>A <a href="{@docRoot}guide/topics/resources/string-resource.html#StringArray">string array</a>
defined in a resource looks like this:</p>

<pre>
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;string-array name="action_list"&gt;
        &lt;item&gt;Mercury&lt;/item&gt;
        &lt;item&gt;Venus&lt;/item&gt;
        &lt;item&gt;Earth&lt;/item&gt;
    &lt;/string-array&gt;
&lt;/resources&gt;
</pre>

<p>The {@link android.widget.ArrayAdapter} returned by {@link
android.widget.ArrayAdapter#createFromResource createFromResource()} is complete and ready for you
to pass it to {@link android.app.ActionBar#setListNavigationCallbacks setListNavigationCallbacks()}
(in step 4 from above). Before you do, though, you need to create the {@link
android.app.ActionBar.OnNavigationListener OnNavigationListener}.</p>


<p>Your implementation of {@link android.app.ActionBar.OnNavigationListener} is where you handle
fragment changes or other modifications to your activity when the user selects an item from the
drop-down list. There's only one callback method to implement in the listener: {@link
android.app.ActionBar.OnNavigationListener#onNavigationItemSelected onNavigationItemSelected()}.</p>

<p>The {@link
android.app.ActionBar.OnNavigationListener#onNavigationItemSelected onNavigationItemSelected()}
method receives the position of the item in the list and a unique item ID provided by the {@link
android.widget.SpinnerAdapter}.</p>

<p>Here's an example that instantiates an anonymous implementation of {@link
android.app.ActionBar.OnNavigationListener OnNavigationListener}, which inserts a {@link
android.app.Fragment} into the
layout container identified by {@code R.id.fragment_container}:</p>

<pre>
mOnNavigationListener = new OnNavigationListener() {
  // Get the same strings provided for the drop-down's ArrayAdapter
  String[] strings = getResources().getStringArray(R.array.action_list);

  &#64;Override
  public boolean onNavigationItemSelected(int position, long itemId) {
    // Create new fragment from our own Fragment class
    ListContentFragment newFragment = new ListContentFragment();
    FragmentTransaction ft = getSupportFragmentManager().beginTransaction();

    // Replace whatever is in the fragment container with this fragment
    // and give the fragment a tag name equal to the string at the position
    // selected
    ft.replace(R.id.fragment_container, newFragment, strings[position]);

    // Apply changes
    ft.commit();
    return true;
  }
};
</pre>

<p>This instance of {@link android.app.ActionBar.OnNavigationListener OnNavigationListener} is
complete and you can now call {@link android.app.ActionBar#setListNavigationCallbacks
setListNavigationCallbacks()} (in step 4), passing the {@link android.widget.ArrayAdapter} and this
{@link android.app.ActionBar.OnNavigationListener OnNavigationListener}.</p>

<p>In this example, when the user selects an item from the drop-down list, a fragment is added to
the layout (replacing the current fragment in the {@code R.id.fragment_container} view). The
fragment added is given a tag that uniquely identifies it, which is the same string used to
identify the fragment in the drop-down list.</p>

<p>Here's a look at the {@code ListContentFragment} class that defines each fragment in this
example:</p>

<pre>
public class ListContentFragment extends Fragment {
    private String mText;

    &#64;Override
    public void onAttach(Activity activity) {
      // This is the first callback received; here we can set the text for
      // the fragment as defined by the tag specified during the fragment
      // transaction
      super.onAttach(activity);
      mText = getTag();
    }

    &#64;Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // This is called to define the layout for the fragment;
        // we just create a TextView and set its text to be the fragment tag
        TextView text = new TextView(getActivity());
        text.setText(mText);
        return text;
    }
}
</pre>

  </div><!-- end toggle-content-toggleme -->

</div><!-- end toggle-content -->


<h2 id="Style">Styling the Action Bar</h2>

<p>If you want to implement a visual design that represents your app's brand, the action bar allows
you to customize each detail of its appearance, including the action bar color, text colors, button
styles, and more. To do so, you need to use Android's <a href=
"{@docRoot}guide/topics/ui/themes.html">style and theme</a> framework to restyle the action bar
using special style properties.</p>

<p class="caution"><strong>Caution:</strong> For all background drawables you provide, be sure to
use <a href="{@docRoot}guide/topics/graphics/2d-graphics.html#nine-patch">Nine-Patch drawables</a>
to allow stretching. The nine-patch image should be <em>smaller</em> than 40dp tall and 30dp
wide.</p>


<h3 id="GeneralStyles">General appearance</h3>

<dl>
  <dt>{@link android.R.attr#actionBarStyle
      actionBarStyle}</dt>
  <dd>Specifies a style resource that defines various style properties
  for the action bar.
      <p>The default for this style for this
      is {@link android.support.v7.appcompat.R.style#Widget_AppCompat_ActionBar
      Widget.AppCompat.ActionBar}, which is what you should use as the parent style.</p>
      <p>Supported styles include:</p>
    <dl>
      <dt>{@link android.R.attr#background}</dt>
        <dd>Defines a drawable resource for the action bar background.</dd>
      <dt>{@link android.R.attr#backgroundStacked}</dt>
        <dd>Defines a drawable resource for the stacked action bar
          (the <a href="#Tabs">tabs</a>).</dd>
      <dt>{@link android.R.attr#backgroundSplit}</dt>
        <dd>Defines a drawable resource for the <a href="#SplitBar">split action bar</a>.</dd>
      <dt>{@link android.R.attr#actionButtonStyle}</dt>
        <dd>Defines a style resource for action buttons.
          <p>The default for this style for this
      is {@link android.support.v7.appcompat.R.style#Widget_AppCompat_ActionButton
      Widget.AppCompat.ActionButton}, which is what you should use as the parent style.</p>
        </dd>
      <dt>{@link android.R.attr#actionOverflowButtonStyle}</dt>
        <dd>Defines a style resource for overflow action items.
          <p>The default for this style for this
      is {@link android.support.v7.appcompat.R.style#Widget_AppCompat_ActionButton_Overflow
      Widget.AppCompat.ActionButton.Overflow}, which is what you should use as the parent style.</p>
        </dd>
      <dt>{@link android.R.attr#displayOptions}</dt>
        <dd>Defines one or more action bar display options, such as whether to use the app logo,
        show the activity title, or enable the <em>Up</em> action. See {@link
        android.R.attr#displayOptions} for all possible values.
      <dt>{@link android.R.attr#divider}</dt>
        <dd>Defines a drawable resource for the divider between action items.</dd>
      <dt>{@link android.R.attr#titleTextStyle}</dt>
        <dd>Defines a style resource for the action bar title.
          <p>The default for this style for this
      is {@link android.support.v7.appcompat.R.style#TextAppearance_AppCompat_Widget_ActionBar_Title
      TextAppearance.AppCompat.Widget.ActionBar.Title}, which is what you should use as the parent
      style.</p></dd>
    </dl>
  </dd>

  <dt>{@link android.R.attr#windowActionBarOverlay
      windowActionBarOverlay}</dt>
  <dd>Declares whether the action bar should overlay the activity layout rather than offset the
activity's layout position (for example, the Gallery app uses overlay mode). This is
{@code false} by default.
  <p>Normally, the action bar requires its own space on the screen and your activity layout fills in
what's left over. When the action bar is in overlay mode, your activity layout uses all the
available space and the system draws the action bar on top. Overlay mode can be useful if you want
your content to keep a fixed size and position when the action bar is hidden and shown. You might
also like to use it purely as a visual effect, because you can use a semi-transparent background
for the action bar so the user can still see some of your activity layout behind the action
bar.</p>
  <p class="note"><strong>Note:</strong> The {@link android.R.style#Theme_Holo Holo} theme families
draw the action bar with a semi-transparent background by default. However, you can modify it with
your own styles and the {@link android.R.style#Theme_DeviceDefault DeviceDefault} theme on
different devices might use an opaque background by default.</p>
  <p>When overlay mode is enabled, your activity layout has no awareness of the action bar lying on
top of it. So, you must be careful not to place any important information or UI components in the
area overlaid by the action bar. If appropriate, you can refer to the platform's value for {@link
android.R.attr#actionBarSize} to determine the height of the action bar, by referencing it
in your XML layout. For example:</p>
<pre>
&lt;SomeView
    ...
    android:layout_marginTop="?android:attr/actionBarSize" /&gt;
</pre>
  <p>You can also retrieve the action bar height at runtime with {@link
android.app.ActionBar#getHeight()}. This reflects the height of the action bar at the time it's
called, which might not include the stacked action bar (due to navigation tabs) if called during
early activity lifecycle methods. To see how you can determine the total height at runtime,
including the stacked action bar, see the <a href=
"{@docRoot}resources/samples/HoneycombGallery/src/com/example/android/hcgallery/TitlesFragment.html">
{@code TitlesFragment}</a> class in the <a href=
"{@docRoot}resources/samples/HoneycombGallery/index.html">Honeycomb Gallery</a> sample app.</p>

</dd>

</dl>


<h3 id="ActionItemStyles">Action items</h3>

<dl>
  <dt>{@link android.R.attr#actionButtonStyle
      actionButtonStyle}</dt>
  <dd>Defines a style resource for the action item buttons.
      <p>The default for this style for this
  is {@link android.support.v7.appcompat.R.style#Widget_AppCompat_ActionButton
  Widget.AppCompat.ActionButton}, which is what you should use as the parent style.</p></dd>

  <dt>{@link android.R.attr#actionBarItemBackground
      actionBarItemBackground}</dt>
  <dd>Defines a drawable resource for each action item's background.
    This should be a <a href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList"
    >state-list drawable</a> to indicate different selected states.</dd>

  <dt>{@link android.R.attr#itemBackground
      itemBackground}</dt>
  <dd>Defines a drawable resource for each action overflow item's background.
    This should be a <a href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList"
    >state-list drawable</a> to indicate different selected states.</dd>

  <dt>{@link android.R.attr#actionBarDivider
      actionBarDivider}</dt>
  <dd>Defines a drawable resource for the divider between action items.</dd>

  <dt>{@link android.R.attr#actionMenuTextColor
      actionMenuTextColor}</dt>
  <dd>Defines a color for text that appears in an action item.</dd>

  <dt>{@link android.R.attr#actionMenuTextAppearance
      actionMenuTextAppearance}</dt>
  <dd>Defines a style resource for text that appears in an action item.</dd>

  <dt>{@link android.R.attr#actionBarWidgetTheme
      actionBarWidgetTheme}</dt>
  <dd>Defines a theme resource for widgets that are inflated into the action bar as <a
href="#ActionView">action views</a>.</dd>
</dl>


<h3 id="NavigationStyles">Navigation tabs</h3>

<dl>
  <dt>{@link android.R.attr#actionBarTabStyle
      actionBarTabStyle}</dt>
  <dd>Defines a style resource for tabs in the action bar.
      <p>The default for this style for this
  is {@link android.support.v7.appcompat.R.style#Widget_AppCompat_ActionBar_TabView
  Widget.AppCompat.ActionBar.TabView}, which is what you should use as the parent style.</p></dd>

  <dt>{@link android.R.attr#actionBarTabBarStyle
      actionBarTabBarStyle}</dt>
  <dd>Defines a style resource for the thin bar that appears below the navigation tabs.
      <p>The default for this style for this
  is {@link android.support.v7.appcompat.R.style#Widget_AppCompat_ActionBar_TabBar
  Widget.AppCompat.ActionBar.TabBar}, which is what you should use as the parent style.</p></dd>

  <dt>{@link android.R.attr#actionBarTabTextStyle
      actionBarTabTextStyle}</dt>
  <dd>Defines a style resource for text in the navigation tabs.
      <p>The default for this style for this
  is {@link android.support.v7.appcompat.R.style#Widget_AppCompat_ActionBar_TabText
  Widget.AppCompat.ActionBar.TabText}, which is what you should use as the parent style.</p></dd>
</dl>


<h3 id="DropDownStyles">Drop-down lists</h3>

<dl>
  <dt>{@link android.R.attr#actionDropDownStyle
      actionDropDownStyle}</dt>
  <dd>Defines a style for the drop-down navigation (such as the background and text styles).
      <p>The default for this style for this
  is {@link android.support.v7.appcompat.R.style#Widget_AppCompat_Spinner_DropDown_ActionBar
  Widget.AppCompat.Spinner.DropDown.ActionBar}, which is what you should use as the parent
  style.</p></dd>
</dl>


<h3 id="StyleExample">Example theme</h3>

<p>Here's an example that defines a custom theme for an activity, {@code CustomActivityTheme},
that includes several styles to customize the action bar.</p>

<p>Notice that there are two versions for each action bar style property. The first one
includes the {@code android:} prefix on the property name to support API levels 11 and higher
that include these properties in the framework. The second version does <em>not</em>
include the {@code android:} prefix and is for older versions of the platform, on which
the system uses the style property from the support library. The effect for each is the same.</p>

<pre>
&lt;?xml version="1.0" encoding="utf-8"?>
&lt;resources>
    &lt;!-- the theme applied to the application or activity -->
    &lt;style name="CustomActionBarTheme"
           parent="&#64;style/Theme.AppCompat.Light">
        &lt;item name="android:actionBarStyle">&#64;style/MyActionBar&lt;/item>
        &lt;item name="android:actionBarTabTextStyle">&#64;style/TabTextStyle&lt;/item>
        &lt;item name="android:actionMenuTextColor">&#64;color/actionbar_text&lt;/item>

        &lt;!-- Support library compatibility -->
        &lt;item name="actionBarStyle">&#64;style/MyActionBar&lt;/item>
        &lt;item name="actionBarTabTextStyle">&#64;style/TabTextStyle&lt;/item>
        &lt;item name="actionMenuTextColor">&#64;color/actionbar_text&lt;/item>
    &lt;/style>

    &lt;!-- general styles for the action bar -->
    &lt;style name="MyActionBar"
           parent="&#64;style/Widget.AppCompat.ActionBar">
        &lt;item name="android:titleTextStyle">&#64;style/TitleTextStyle&lt;/item>
        &lt;item name="android:background">&#64;drawable/actionbar_background&lt;/item>
        &lt;item name="android:backgroundStacked">&#64;drawable/actionbar_background&lt;/item>
        &lt;item name="android:backgroundSplit">&#64;drawable/actionbar_background&lt;/item>

        &lt;!-- Support library compatibility -->
        &lt;item name="titleTextStyle">&#64;style/TitleTextStyle&lt;/item>
        &lt;item name="background">&#64;drawable/actionbar_background&lt;/item>
        &lt;item name="backgroundStacked">&#64;drawable/actionbar_background&lt;/item>
        &lt;item name="backgroundSplit">&#64;drawable/actionbar_background&lt;/item>
    &lt;/style>

    &lt;!-- action bar title text -->
    &lt;style name="TitleTextStyle"
           parent="&#64;style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        &lt;item name="android:textColor">&#64;color/actionbar_text&lt;/item>
    &lt;/style>

    &lt;!-- action bar tab text -->
    &lt;style name="TabTextStyle"
           parent="&#64;style/Widget.AppCompat.ActionBar.TabText">
        &lt;item name="android:textColor">&#64;color/actionbar_text&lt;/item>
    &lt;/style>
&lt;/resources>

</pre>

<p>In your manifest file, you can apply the theme to your entire app:</p>

<pre>
&lt;application android:theme="&#64;style/CustomActionBarTheme" ... />
</pre>

<p>Or to individual activities:</p>

<pre>
&lt;activity android:theme="&#64;style/CustomActionBarTheme" ... />
</pre>


<p class="caution"><strong>Caution:</strong> Be certain that each theme and style declares a parent
theme in the {@code &lt;style&gt;} tag, from which it inherits all styles not explicitly declared
by your theme. When modifying the action bar, using a parent theme is important so that you can
simply override the action bar styles you want to change without re-implementing the styles you
want to leave alone (such as text size or padding in action items).</p>

<p>For more information about using style and theme resources in your application, read <a
href="{@docRoot}guide/topics/ui/themes.html">Styles and Themes</a>.</p>