[Android] Toolbar:ツールバーのメニューを表示する

Toolbar
は従来のActionBar
と同様にメニューを表示することが出来ます。ここでは、ツールバーにメニューを表示する方法、ポップアップメニュー項目を追加する方法、ポップアップメニューのテーマを変更する方法について説明します。
広 告
目次
前提条件
動作確認端末
- Google Nexus 5 – 5.0.0 – API21(エミュレータ)
1. ツールバーにメニューを表示する
Toolbar
はsetActionBar()に設定することでActionBar
と同じように扱うことができます。そのため、ツールバーにメニューを表示する方法は、アクションバーにメニューを表示する方法は同じです。
メニューを表示させるためには、MainActivity
クラスにonCreateOptionsMenu()メソッドをオーバライドさせる必要があります。(アクションバーが表示されるテーマでプロジェクトを新規作成すると、自動でオーバライドされているメソッドであるため、既に記述されているかもしれません)
onCreateOptionsMenu()
メソッドの実装例は以下のとおりです。
java/<packagename>/MainActivity.java
public class MainActivity extends Activity { … @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; } }
R.menu.menu_main
が参照しているファイルは、res/menu/menu_main.xml
で、このファイルの内容は、ツールバーのメニューをクリックした時に表示されるポップアップメニューの項目を定義しています。内容については次章にて説明します。
アプリを実行すると以下のようにツールバー右側にメニューが表示されています。(もしかしたら元々表示されているかもしれません)

onCreateOptionsMenu()メソッドを削除した場合は、メニューが消えることが確認できます。

2. ポップアップメニュー項目を追加する
ポップアップメニューの項目は、main/res/menu/menu_main.xml
で定義します。ポップアップメニューの項目は、タグを追加することで追加することができます。
ポップアップメニュー項目を2つ表示するコード例は以下のとおりです。
res/menu/menu_main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity"> <item android:id="@+id/action_settings" android:title="@string/action_settings" android:orderInCategory="100" android:showAsAction="never" /> <item android:id="@+id/action_settings2" android:title="@string/action_settings2" android:orderInCategory="200" android:showAsAction="never" /> </menu>
android:title
属性の値は、メニュー項目に表示される文字列になります。
android:orderInCategory
属性の値は、メニュー項目が表示される順序を定義しています。値が小さいほど上に表示されます。
android:showAsAction
属性の値は、ツールバー上に項目をどのように表示するかを定義します。今回は、ツールバー上には表示させないため"never"
を設定しています。
アプリを実行しメニューをクリックすると以下のように表示されます。

3. ポップアップメニューのテーマを変更する
ツールバーのポップアップメニュー部分のテーマを変えるためには、<Toolbar>
タグのandroid:popupTheme
属性を使います。
以下にandroid:popupTheme属性を使った例を示します。
res/layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?android:actionBarSize" android:background="#FF4081" android:elevation="20dp" android:popupTheme="@android:style/Theme.Material" > </Toolbar> <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
アプリを実行しメニューをクリックすると以下のように表示されます。
