KotlinでAndroidのオーバーフローメニューアイコンをプログラムから変更する方法

概要

このチュートリアルでは、Kotlinを使ってAndroidアプリのオーバーフローメニューアイコン（縦3点の「⋮」アイコン）をプログラムから変更する方法を解説します。Toolbarのカスタマイズとメニューリソースの作成を通じて、オプションメニューの表示や動作の制御方法もあわせて学べます。

手順1：新規プロジェクトの作成

Android Studioを起動し、「File」→「New Project」を選択します。必要な項目をすべて入力して、新しいプロジェクトを作成してください。

手順2：レイアウトファイル（activity_main.xml）の編集

res/layout/activity_main.xml に以下のコードを追加します。ここではLinearLayoutの中にToolbarを配置しています。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="4dp"
    tools:context=".MainActivity">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tootBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

手順3：MainActivity.kt の実装

src/MainActivity.kt に以下のコードを記述します。onCreateOptionsMenu()でメニューを展開し、onOptionsItemSelected()で各メニュー項目が選択されたときの処理をToastで表示しています。また、onPrepareOptionsMenu()ではメニュー項目の表示・非表示を動的に切り替えています。

import android.graphics.Color
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.widget.Toolbar
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
    lateinit var toolBar: Toolbar
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        toolBar = findViewById(R.id.tootBar)
        toolBar.title = "MyToolBar"
        toolBar.setTitleTextColor(Color.WHITE)
    }
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        val inflater = menuInflater
        inflater.inflate(R.menu.menu, menu)
        return true
    }
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            R.id.option1 -> {
                Toast.makeText(
                    applicationContext, "Bluetooth Option Selected",
                    Toast.LENGTH_SHORT
                ).show()
                true
            }
            R.id.option2 -> {
                Toast.makeText(applicationContext, "Call Option Selected", Toast.LENGTH_SHORT)
                    .show()
                true
            }
            R.id.option3 -> {
                Toast.makeText(applicationContext, "About Option Selected", Toast.LENGTH_SHORT)
                    .show()
                true
            }
            R.id.option4 -> {
                Toast.makeText(applicationContext, "Chat Option Selected", Toast.LENGTH_SHORT)
                    .show()
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }
    override fun onPrepareOptionsMenu(menu: Menu): Boolean {
        invalidateOptionsMenu()
        menu.findItem(R.id.option2).isVisible = false
        menu.findItem(R.id.option4).isVisible = true
        return super.onPrepareOptionsMenu(menu)
    }
}

手順4：メニューリソースファイルの作成

まずAndroid Resource Directoryとして「menu」タイプのディレクトリを作成し、その中にメニューリソースファイルを追加します。そして以下のコードを記述してください。showAsAction属性の指定により、スペースがある場合にアクションバーへアイコンを表示するか、オーバーフローメニューに格納するかを制御できます。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/option1"
        android:orderInCategory="1"
        android:title="Bluetooth"
        android:icon="@drawable/ic_baseline_bluetooth_24"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/option2"
        android:orderInCategory="2"
        android:title="Call"
        android:icon="@drawable/ic_baseline_call_24"
        app:showAsAction="ifRoom|collapseActionView" />
    <item android:id="@+id/option4"
        android:title="Chat"
        android:visible="false"
        android:orderInCategory="3"
        android:icon="@drawable/ic_baseline_chat_24"
        app:showAsAction="ifRoom|collapseActionView"/>
    <item
        android:id="@+id/option3"
        android:title="About"
        app:showAsAction="never" />
</menu>

手順5：AndroidManifest.xml の編集

androidManifest.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.q11">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

アプリの実行と確認

それでは、実際にアプリを実行してみましょう。実機のAndroidスマートフォンをパソコンに接続していることを前提とします。Android Studioでプロジェクト内のいずれかのActivityファイルを開き、ツールバーの「Run（▶）」アイコンをクリックしてください。デバイス選択画面で自分のモバイル端末を選ぶと、端末にアプリの初期画面が表示されます。