📱

[Android]Toolbarにオプションメニューを表示させる

2022/06/12に公開

手順概要

1.styleをNoActionBarに変更する
2.xmlにtoolbarを設置
3.menuを作成する
4.Activityで紐付ける

1.styleをNoActionBarに変更する

デフォルトのアクションバーを表示しないように下記に変更

themes.xml
<style name="Theme.PracticeSample" parent="Theme.MaterialComponents.DayNight.NoActionBar">

2.xmlにtoolbarを設置

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:title="オプションサンプル"
        app:logo="@mipmap/ic_launcher"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

3.menuを作成する

プロジェクトツリーのresに合わせて右クリック>New>Android Resource Fileを選択し、
任意のFile nameとResource typeをmenuでOK押下
プロジェクトツリーのres>menu>任意のファイル名を開く
menuの中にitemを追加する

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

    <item
        android:id="@+id/option1"
        android:title="オプション1" />
    <item
        android:id="@+id/option2"
        android:title="オプション2" />
</menu>

4.Activityで紐付ける

onCreate内でレイアウトのtoolbarを紐づける

MainActivity.kt
setSupportActionBar(findViewById(R.id.toolbar))

onCreateOptionsMenuをオーバーライドし、
inflateの第一引数に紐づけたいオプションメニューのidを入れ、第二引数にonCreateOptionsMenuの引数menuを入れる

MainActivity.kt
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.option, menu)
        return true
    }

これでオプションメニューを表示できるようになる

オプションメニューのクリックリスナーを設定する

onOptionsItemSelectedをオーバーライドする
オプションメニューのアイテムのidで分岐する
ここではクリックされたらトースト表示するようにしている

MainActivity.kt
override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId) {
            R.id.option1 -> Toast.makeText(this, "option1", Toast.LENGTH_SHORT).show()
            R.id.option2 -> Toast.makeText(this, "option2", Toast.LENGTH_SHORT).show()
        }
        return super.onOptionsItemSelected(item)
    }

Discussion