Android Studio の使い方解説 ~オーバーフローメニューを追加しよう【サンプルコード付き】~

※本記事は2021年7月2日に更新しました。

「アプリバーにもっとボタンを追加したい！」
「オーバーフローメニューって何？」

今回はそんな疑問にお答えします。
まずは下の動画をご覧ください。

画面右上の縦に並んだ『・・・』マークをタップすると、
右からメニューが出てきます。

このメニューのことを『オーバーフローメニュー』と呼びます。

今回はこのオーバーフローメニューの追加の仕方について解説します。

前提として、本記事はAndroid Studio 4.2.1を対象に記載します。
また、筆者のAndroid Studioは日本語化しているため、日本語にて解説します。

本記事の使用言語はJavaとなります。
今回はProgate のJavaのレッスンがすべて理解できている、
という前提の上進めていきます。

では早速参りましょう！

前回の記事はこちら
今回は特に前回の記事と内容重複しますので、ぜひこちらからお読みください。

オーバーフローメニューの追加の仕方
まとめ

オーバーフローメニューの追加の仕方

オーバーフローメニューの追加の仕方は以下の通りです。

メニューXMLファイルを用意する
アクティビティファイルにて、メニューを実装する
メニューを押したときの動作を定義する

一つ一つ解説していきます。

メニューXMLファイルを用意する

前回のアクションボタンの追加の仕方と同様、
まずメニューXMLファイルを入れるmenuフォルダを用意します。

menuフォルダの用意の仕方

resフォルダの上で右クリック⇒新規⇒Androidリソースディレクトリーを選択
ファイル名を「menu」、リソースタイプを「menu」にしてOKを押す

続いて、XMLファイルの用意の仕方です。
menuフォルダの中にxmlファイルを用意します。

XMLの用意の仕方

menuフォルダの上で右クリック⇒新規⇒Menuリソース・ファイルを選択

※　今回はファイル名を『overflow_menu』としてください。

overflow_menu.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">

    <!-- アクションボタンを設定 -->
    <!-- showAsActionはneverでオーバーフローメニューにボタンが配置される-->
    <item
        android:id="@+id/mercury"
        android:title="@string/mercury_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/venus"
        android:title="@string/venus_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/earth"
        android:title="@string/earth_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/mars"
        android:title="@string/mars_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/jupiter"
        android:title="@string/jupiter_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/saturn"
        android:title="@string/saturn_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/uranus"
        android:title="@string/uranus_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/neptune"
        android:title="@string/neptune_title"
        app:showAsAction="never"/>

</menu>

オーバーフローメニューの実装も、『menu』で囲み、『item』で要素を追加する形となります。

android:titleはこのアイコンのタイトルです。

app:showAsAcrionはこの要素を、

スペースがあれば最初から表示する (ifRoom)
隠して表示する(never)

どちらにするか、という内容です。
今回はオーバーフローメニューに隠して表示させたいのでneverを記載します。

以上がXMLファイルの用意の仕方となります。

アクティビティファイルにて、メニューを実装する

前回と同内容です。
以下のコードで、メニューを実装することができます。

//アプリバーにメニューを作成するメソッド
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    //インフレーターを使ってメニューを表示させる
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.overflow_menu, menu);
    return true;
}

メニューを押したときの動作を定義する

メニューを押したときの動作を定義します。
以下の記事の『複数のボタンを使ってみよう』と同様、
押されたメニューのIDを取得し、そのIDによって条件分岐する形で記載します。

実装文は以下の通りです。

//メニューボタンを押したときの反応を定義するメソッド
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    //テキストビューに文字を表示する様に定義
    //押されたボタンのIDで条件分岐を行う
    TextView textView = findViewById(R.id.text_view);
    switch(item.getItemId()) {
        case R.id.mercury:
            textView.setText(R.string.mercury);
            return true;
        case R.id.venus:
            textView.setText(R.string.venus);
            return true;
        case R.id.earth:
            textView.setText(R.string.earth);
            return true;
        case R.id.mars:
            textView.setText(R.string.mars);
            return true;
        case R.id.jupiter:
            textView.setText(R.string.jupiter);
            return true;
        case R.id.saturn:
            textView.setText(R.string.saturn);
            return true;
        case R.id.uranus:
            textView.setText(R.string.uranus);
            return true;
        case R.id.neptune:
            textView.setText(R.string.neptune);
            return true;
        default:
            //オーバーライド元の結果を返すように指示
            return super.onOptionsItemSelected(item);
    }

}

最後にdefault:としてオーバーライド元のメソッドの結果を返しています。

以上がオーバーフローメニューの設定方法となります。

サンプルコード

最後に今回のサンプルコードを提示します。

今回のアプリはGitHubに公開しています。
下記URLの『SampleOverflowMenu』です。
是非参考にしてください。

GitHub - Umigishi-Aoi/SampleOverflowMenu: Android Studioでのオーバーフローメニューの使い方です。このプロジェクトは自分のAndroid Studio の勉強の中で作られたものです。この解説は、 https://zerokara-app.com/603/にあります。How to use overflow menu in Android Studio. This project is created in studying how to use Android Studio. This Commentary is in https://zerokara-app.com/603/

Android Studioでのオーバーフローメニューの使い方です。このプロジェクトは自分のAndroid Studio の勉強の中で作られたものです。この解説は、にあります。How to use overflow menu in Android Studio. This project is created in ...

文字列リソースファイル　string.xml

<resources>
    <string name="app_name">SampleOverflowMenu</string>
    <string name="text_view">オーバーフローメニューを選択してください</string>
    <string name="mercury_title">Mercury</string>
    <string name="venus_title">Venus</string>
    <string name="earth_title">Earth</string>
    <string name="mars_title">Mars</string>
    <string name="jupiter_title">Jupiter</string>
    <string name="saturn_title">Saturn</string>
    <string name="uranus_title">Uranus</string>
    <string name="neptune_title">Neptune</string>
    <string name="mercury">水星</string>
    <string name="venus">金星</string>
    <string name="earth">地球</string>
    <string name="mars">火星</string>
    <string name="jupiter">木星</string>
    <string name="saturn">土星</string>
    <string name="uranus">天王星</string>
    <string name="neptune">海王星</string>
</resources>

レイアウトファイル　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">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_view"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

メニュー用XMLファイル　overflow_menu.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">

    <!-- アクションボタンを設定 -->
    <!-- showAsActionはneverでオーバーフローメニューにボタンが配置される-->
    <item
        android:id="@+id/mercury"
        android:title="@string/mercury_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/venus"
        android:title="@string/venus_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/earth"
        android:title="@string/earth_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/mars"
        android:title="@string/mars_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/jupiter"
        android:title="@string/jupiter_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/saturn"
        android:title="@string/saturn_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/uranus"
        android:title="@string/uranus_title"
        app:showAsAction="never"/>
    <item
        android:id="@+id/neptune"
        android:title="@string/neptune_title"
        app:showAsAction="never"/>

</menu>

アクティビティファイル　MainActivity.java

package com.zerokaraapp.sampleoverflowmenu;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    //アプリバーにメニューを作成するメソッド
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //インフレーターを使ってメニューを表示させる
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.overflow_menu, menu);
        return true;
    }

    //メニューボタンを押したときの反応を定義するメソッド
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //テキストビューに文字を表示する様に定義
        //押されたボタンのIDで条件分岐を行う
        TextView textView = findViewById(R.id.text_view);
        switch(item.getItemId()) {
            case R.id.mercury:
                textView.setText(R.string.mercury);
                return true;
            case R.id.venus:
                textView.setText(R.string.venus);
                return true;
            case R.id.earth:
                textView.setText(R.string.earth);
                return true;
            case R.id.mars:
                textView.setText(R.string.mars);
                return true;
            case R.id.jupiter:
                textView.setText(R.string.jupiter);
                return true;
            case R.id.saturn:
                textView.setText(R.string.saturn);
                return true;
            case R.id.uranus:
                textView.setText(R.string.uranus);
                return true;
            case R.id.neptune:
                textView.setText(R.string.neptune);
                return true;
            default:
                //オーバーライド元の結果を返すように指示
                return super.onOptionsItemSelected(item);
        }

    }
}

※javaファイルについて、1行目packageの部分は人によって異なります。
コピペする場合は2行目以降をコピペしてください。

ここまで出来たら一度アプリを実行してみましょう。
一番上の動画のアプリのように動作すれば成功です。