📱
[Android]Toolbarにオプションメニューを表示させる
手順概要
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