page.title=Adding and Handling Actions page.tags="appbar","actionbar" helpoutsWidget=true trainingnavtop=true @jd:body <div id="tb-wrapper"> <div id="tb"> <h2>This lesson teaches you to</h2> <ol> <li><a href="#add-actions">Add Action Buttons</a></li> <li><a href="#handle-actions">Respond to Actions</a></li> </ol> <h2>Useful Resources</h2> <ul> <li><a href="https://www.google.com/design/icons/">Material Icons</a></li> </ul> </div> </div> <a class="notice-designers wide" href="{@docRoot}design/patterns/actionbar.html#ActionButtons"> <div> <h3>Design Guide</h3> <p>Action Buttons</p> </div> </a> <p> The app bar allows you to add buttons for user actions. This feature lets you put the most important <em>actions</em> for the current context right at the top of the app. For example, a photo browsing app might show <em>share</em> and <em>create album</em> buttons at the top when the user is looking at their photo roll; when the user looks at an individual photo, the app might show <em>crop</em> and <em>filter</em> buttons. </p> <p> Space in the app bar is limited. If an app declares more actions than can fit in the app bar, the app bar send the excess actions to an <em>overflow</em> menu. The app can also specify that an action should always be shown in the overflow menu, instead of being displayed on the app bar. </p> <img src="{@docRoot}images/training/appbar/appbar_with_button_2x.png" srcset="{@docRoot}images/training/appbar/appbar_with_button.png 1x, {@docRoot}images/training/appbar/appbar_with_button_2x.png 2x" width="400" alt=""> <p class="img-caption"> <strong>Figure 1.</strong> An app bar with a single action button and an overflow menu. </p> <h2 id="add-actions">Add Action Buttons</h2> <p> All action buttons and other items available in the action overflow are defined in an XML <a href= "{@docRoot}guide/topics/resources/menu-resource.html">menu resource</a>. To add actions to the action bar, create a new XML file in your project's <code>res/menu/</code> directory. </p> <p> Add an <a href= "{@docRoot}guide/topics/resources/menu-resource.html#item-element"><code><item></code></a> element for each item you want to include in the action bar, as shown in this code example of a menu XML file: </p> <pre> <menu xmlns:android="http://schemas.android.com/apk/res/android" > <!-- "Mark Favorite", should appear as action button if possible --> <item android:id="@+id/action_favorite" android:icon="@drawable/ic_favorite_black_48dp" android:title="@string/action_favorite" app:showAsAction="ifRoom"/> <!-- Settings, should always be in the overflow --> <item android:id="@+id/action_settings" android:title="@string/action_settings" app:showAsAction="never"/> </menu> </pre> <p> The <code>app:showAsAction</code> attribute specifies whether the action should be shown as a button on the app bar. If you set <code>app:showAsAction="ifRoom"</code> (as in the example code's <em>favorite</em> action), the action is displayed as a button if there is room in the app bar for it; if there is not enough room, excess actions are sent to the overflow menu. If you set <code>app:showAsAction="never"</code> (as in the example code's <em>settings</em> action), the action is always listed in the overflow menu, not displayed in the app bar. </p> <p> The system uses the action's icon as the action button if the action is displayed in the app bar. You can find many useful icons on the <a href= "https://www.google.com/design/icons/">Material Icons</a> page. </p> <h2 id="handle-actions">Respond to Actions</h2> <p> When the user selects one of the app bar items, the system calls your activity's {@link android.app.Activity#onOptionsItemSelected onOptionsItemSelected()} callback method, and passes a {@link android.view.MenuItem} object to indicate which item was clicked. In your implementation of {@link android.app.Activity#onOptionsItemSelected onOptionsItemSelected()}, call the {@link android.view.MenuItem#getItemId MenuItem.getItemId()} method to determine which item was pressed. The ID returned matches the value you declared in the corresponding <a href= "{@docRoot}guide/topics/resources/menu-resource.html#item-element"><code><item></code></a> element's <code>android:id</code> attribute. </p> <p> For example, the following code checks to see which action the user selected. If the method does not recognize the user's action, it invokes the superclass method: </p> <pre> @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_settings: // User chose the "Settings" item, show the app settings UI... return true; case R.id.action_favorite: // User chose the "Favorite" action, mark the current item // as a favorite... return true; default: // If we got here, the user's action was not recognized. // Invoke the superclass to handle it. return super.onOptionsItemSelected(item); } } </pre>