Android BottomNavigationを追加する

今回は、既存の画面にBottomNavigationを追加します。
元々はマップのみが表示される画面ですが、右図のようにBottomNavigationを追加していきたいと思います。

手順

ざっくりとした流れは以下の通りです。

1. menu.xmlを追加
2. layoutの修正
3. NavigationBarのタップイベント処理の追加

メニューのxmlを追加

リソースフォルダ下にbottom_nav_menu.xmlを追加します。
※ファイル名はなんでもOK。

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

    <item
        android:id="@+id/navigation_game"
        android:icon="@drawable/baseline_sports_esports_24"
        android:title="@string/title_game" />

    <item
        android:id="@+id/navigation_edit"
        android:icon="@drawable/outline_edit_24"
        android:title="@string/title_edit" />

</menu>

アイコンは、Material Iconsからダウンロードしてきました。

layoutの修正

＜修正前＞

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapsActivity" />

＜修正後＞
BottomNavigationViewを追加しています。

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/nav_view"
        tools:context=".MapsActivity" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        app:layout_constraintTop_toBottomOf="@+id/map"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>

Designで表示するとこのようになります。

NavigationBarのタップイベント処理の追加

最後にNavigationBarのイベント処理を追加していきます。

まず、OnItemSelectedListenerのimplementsを追加します。

public class MapsActivity extends FragmentActivity implements
        OnMapReadyCallback, PositionService.OnPositionListener, GoogleMap.OnMarkerClickListener,
        NavigationBarView.OnItemSelectedListener {

次に、onCreate()で、リスナーを登録します。

BottomNavigationView navView = findViewById(R.id.nav_view);
navView.setOnItemSelectedListener(this);

そして、onNavigationItemSelectedメソッドを実装して、イベントを処理します。 今回は、BottomNavigationに、GameとEditのメニューを設置しており、ゲームモードと編集モードを切り替えられるようにしました。

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    if (R.id.navigation_game == item.getItemId()) {
        mode = MODE_GAME;
    } else {
        mode = MODE_EDIT;
    }

    return true;
}

ソース

ソース全体は、Githubに登録しています。
GitHub - TaizooTech/SampleMap

参考

BottomNavigationView入門 - Qiita
AndroidでBottomNavigationBarを実装してみる - Re:30からはじめるエンジニア生活（仮）
Google Fonts