Android ActionBar/toolBarにmenuItemを配置

アコーディオンメニューとなるアイテムを設置

よくある以下のようなアコーディオンメニューを設置します。

以下の例はActionBarに設置したものです。

リソースファイルの作成

res/menu/にmenu resource fileを作成します。

main_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:id="@+id/menu1"
            android:title="メニュー1"
            app:showAsAction="never"/>
    <item
            android:id="@+id/menu2"
            android:title="メニュー2"
            app:showAsAction="never"/>
</menu>

app:showAsActionがActionBarに配置される定義となります。

ActionBarに配置せずにオーバーフローメニューとするので、neverを指定します。

リソースファイルの設置

作成したmenu resource fileはActivityで配置します。

アイテムの設置

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    getMenuInflater().inflate(R.menu.main_menu, menu);
    return super.onCreateOptionsMenu(menu)
}

リスナー

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    if( item?.itemId == R.id.menu1 ){ }
    else if( item?.itemId == R.id.menu2 ){ }
    return super.onOptionsItemSelected(item)
}

アイコンアイテムを設置

toolBarにアイコンアイテムを設置します。

リソースファイルの作成

item_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:title="アイテム1" android:id="@+id/menu_item1" android:icon="@android:drawable/btn_star_big_on"
          app:showAsAction="always"/>
    <item android:title="アイテム2" android:id="@+id/menu_item2" android:icon="@android:drawable/btn_star_big_off"
          app:showAsAction="always"/>
</menu>

app:showAsActionは常にアプリバーに配置するalwaysを指定します。但し、アイテムと他の項目が重なる可能性があります。スペースに空きがある場合のみアプリバーに配置するにはifRoomを指定します(空きがない場合はオーバーフローメニューに入ります)。

リソースファイルの設置 / リスナー

ActionBarと同様に作成したmenu resource fileはActivityで配置します。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    //アイテムの設置
    toolbar.inflateMenu(R.menu.item_menu)
    //リスナー
    toolbar.setOnMenuItemClickListener {
        if(it.itemId == R.id.menu_item1){ }
        else if(it.itemId == R.id.menu_item1){ }
        true
    }
}

コードからアイコンの動的変更

例えば押下時にアイコン画像をoff -> onに切り替えるようなことをするには以下のように記述します。

toolbar.setOnMenuItemClickListener {
    if(it.itemId == R.id.menu_item1){
        it.setIcon(android.R.drawable.btn_star_big_on)
    }
    true
}

リスナーをかまさない場合は、

toolbar.menu.findItem(R.id.menu1).setIcon(android.R.drawable.btn_star_big_on)

のようにfindItem()を使用してアクセスします。

リンク

リンク