29. 【Android/Kotlin】ToolBarのメニュー

はじめに
設定事項
1. メニューのイメージダウンロード
2. メニューのxmlファイル作成
Activityとレイアウトの設定
アプリ起動
終わりに

はじめに

DreamHanksのMOONです。

前回は「FrameLayout」というLayoutについて説明しました。

28. 【Android/Kotlin】FrameLayout

今回はToolBarにメニューを追加することについて説明していきます。

設定事項

・メニューのイメージダウンロード

・メニューのxmlファイル作成

・Activityとレイアウトの設定

メニューのイメージダウンロード

「app」パッケージを右クリックして下の画像の「Vector Asset」選択

下の画像のClip Artをクリック

望むアイコンを選択

Nameを望むファイル名に変更してNextをクリック

「drawable」フォルダーに入ります。

メニューのxmlファイル作成

toolbar_option_buttons.xml

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

    <item
        android:id="@+id/setting"
        android:title="設定"
        android:icon="@drawable/ic_baseline_settings_24"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/add"
        android:title="追加"
        android:icon="@drawable/ic_baseline_add_24"
        app:showAsAction="ifRoom"/>

</menu>

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android"

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

<item

android:id="@+id/setting"

android:title="設定"

android:icon="@drawable/ic_baseline_settings_24"

app:showAsAction="ifRoom"/>

<item

android:id="@+id/add"

android:title="追加"

android:icon="@drawable/ic_baseline_add_24"

app:showAsAction="ifRoom"/>

</menu>

Activityとレイアウトの設定

ToolbarActivity.kt

package com.example.practiceapplication

import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar

class ToolbarActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_toolbar)

        val toolbar = findViewById<Toolbar>(R.id.toolbar)
        setSupportActionBar(toolbar)
        supportActionBar!!.setDisplayShowTitleEnabled(false)

    }

    /**
     * ToolBarのメニューを初期化するためのメソッド
     */
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        val menuInflater = menuInflater
        menuInflater.inflate(R.menu.toolbar_option_buttons, menu)
        return super.onCreateOptionsMenu(menu)
    }

    /**
     * ToolBarのメニューのクリックイベントを初期化するためのメソッド
     */
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            R.id.setting -> {
                Toast.makeText(applicationContext, "設定メニュー", Toast.LENGTH_SHORT).show()
                true
            }
            R.id.add -> {
                Toast.makeText(applicationContext, "追加メニュー", Toast.LENGTH_SHORT).show()
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }
}

package com.example.practiceapplication

import android.os.Bundle

import android.view.Menu

import android.view.MenuItem

import android.widget.Toast

import androidx.appcompat.app.AppCompatActivity

import androidx.appcompat.widget.Toolbar

class ToolbarActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_toolbar)

val toolbar = findViewById<Toolbar>(R.id.toolbar)

setSupportActionBar(toolbar)

supportActionBar!!.setDisplayShowTitleEnabled(false)

}

/**

* ToolBarのメニューを初期化するためのメソッド

override fun onCreateOptionsMenu(menu: Menu?): Boolean {

val menuInflater = menuInflater

menuInflater.inflate(R.menu.toolbar_option_buttons, menu)

return super.onCreateOptionsMenu(menu)

}

/**

* ToolBarのメニューのクリックイベントを初期化するためのメソッド

override fun onOptionsItemSelected(item: MenuItem): Boolean {

return when (item.itemId) {

R.id.setting -> {

Toast.makeText(applicationContext, "設定メニュー", Toast.LENGTH_SHORT).show()

true

}

R.id.add -> {

Toast.makeText(applicationContext, "追加メニュー", Toast.LENGTH_SHORT).show()

true

}

else -> super.onOptionsItemSelected(item)

}

レイアウトのxmlを作成

activity_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".ToolbarActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#2a5a4c"
        android:minHeight="?attr/actionBarSize"
        app:titleTextColor="@android:color/white">

        <TextView
            android:id="@+id/toolbarTitle"
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ToolBar"
            android:textColor="@android:color/white" />

    </androidx.appcompat.widget.Toolbar>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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"

android:orientation="vertical"

tools:context=".ToolbarActivity">

<androidx.appcompat.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#2a5a4c"

android:minHeight="?attr/actionBarSize"

app:titleTextColor="@android:color/white">

<TextView

android:id="@+id/toolbarTitle"

style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="ToolBar"

android:textColor="@android:color/white" />

</androidx.appcompat.widget.Toolbar>

</LinearLayout>

アプリ起動

・初期の画面

・設定アイコンをクリックした場合

終わりに

今回はToolBarにメニューを追加することについて説明しました。

次回は「ProgressBar」というViewについて説明していきます。

30. 【Android/Kotlin】ProgressBar