ツールバーにメニューやボタンを追加する方法

ツールバーにメニューやボタンを追加する方法 | Androidアプリ開発

2019.10.05

この記事ではAndroidアプリ開発においてツールバー上にメニューやボタンを実装する方法を紹介します。

この記事の内容を習得すると、
例えば下図のようなメニューを表示したり、
ボタンの処理を実装したりすることができます。
(※下図の例ではボタンでアプリが終了するようにしています)

=== 目次 ===

メニューのリソースを作成する
1. リソースファイルを作成する
2. リソースファイルを実装する
メニューやボタンを表示させる
メニューやボタンの処理を実装する

メニューのリソースを作成する

メニューを表示するためには、メニュー内容のリソースを作成する必要があります。

リソースファイルを作成する

初期状態ではリソースディレクトリ内にメニュー用のディレクトリが存在しないので、
まずはメニュー用のディレクトリを作成するところからやる必要があります。

resフォルダ上で右クリック→New→Directoryをクリックします。

ディレクトリ名は「menu」とします。

次にさきほど作成したmenuディレクトリ内にメニューのリソースファイルを作成します。

menuディレクトリで右クリック→New→Fileをクリックします。

リソールファイル名は「小文字.xml」のルールさえ守っていれば何でも良いです。
ここでは例として「menu_main.xml」としておきます。

リソースファイルを実装する

さきほど作成したmenu_main.xmlを開きます。

ここでは冒頭のGIF動画のメニューを作成してみましょう。
コードとしては下記のようになります。

<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <item
        android:id="@+id/menu1"
        android:title="MENU1"
        />

    <item
        android:id="@+id/menu2"
        android:title="MENU2"
        />

    <item
        android:id="@+id/menu_button"
        android:title="BUTTON"
        app:showAsAction="ifRoom"
        />

</menu>

ここで、titleはメニューに表示させる文字列を表します。
また、showAsActionにifRoomを指定するとメニューとしてまとめて表示されるのではなく、独立したボタンとして表示されます。

アイコンのボタンを実装するには？

今回は実装しませんが、アイコンのボタンを実装することもできます。

その場合には予めアイコンのリソースをdrawableに登録した後に、
以下のようにicon属性に設定をします。

    <item
        android:id="@+id/menu_button"
        android:title="BUTTON"
        android:icon="@drawable/XXXX"
        app:showAsAction="ifRoom"
        />

メニューやボタンを表示させる

メニューを表示するにはActivityクラス内で、
onCreateOptionsMenuをオーバーライドして実装します。

サンプルコードは以下です。

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

さきほどのメニューリソースの作成が完了していて、
上記のコードを実行すると下図のようにツールバー上にメニューが表示されるはずです。

メニューやボタンの処理を実装する

メニューやボタンの処理を実装するには、
Activityクラス内でonOptionsItemSelectedをオーバーライドします。

サンプルコードは以下です。

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menu1:

                return true;
            case R.id.menu2:

                return true;
            case R.id.menu_button:
                finish();
                return true;
        }

        return super.onOptionsItemSelected(item);
    }

item.getItemId()でタップされたメニューアイテムのIDを取得することができます。
その後、メニューリソースで設定したIDに沿ってswitch構文で処理を分岐させます。

今回では例として、ボタンをタップしたときにアプリが終了するように、
finish()のコードを挿入しています。

このコードを実装して、ボタンをタップすると以下のように処理を実行することができます。