Programming Style

メニュー

初心者がアプリ開発者になるためのプログラミング学習サイト

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

APIガイド コメント
android_android-toolbar-menu_04

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で、このファイルの内容は、ツールバーのメニューをクリックした時に表示されるポップアップメニューの項目を定義しています。内容については次章にて説明します。

 

アプリを実行すると以下のようにツールバー右側にメニューが表示されています。（もしかしたら元々表示されているかもしれません）

 

android_android-toolbar-menu_01

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

 

android_android-toolbar-menu_02

 

2. ポップアップメニュー項目を追加する

ポップアップメニューの項目は、main/res/menu/menu_main.xmlで定義します。ポップアップメニューの項目は、タグを追加することで追加することができます。

ポップアップメニュー項目を２つ表示するコード例は以下のとおりです。

 

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"を設定しています。

 

アプリを実行しメニューをクリックすると以下のように表示されます。

 

android_android-toolbar-menu_03

 

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>

アプリを実行しメニューをクリックすると以下のように表示されます。

 

android_android-toolbar-menu_04

 

広 告