AndroidでBottomNavigationBarを実装してみる

AndroidでBottomNavigationBarを初めて実装したのでメモです。

現在Androidアプリの実装について勉強中なので、今回はこの題材を実装して慣れていこうと思います。

BottomNavigationBarとは

よくAndroidアプリやiOSアプリを開いたときに表示される下に表示されるメニューのことです。最近のアプリにはほとんど標準搭載と言っていいくらいにBottomNavigationBarがあります。

BottomNavigationBarをメニューとして設置するメリットにはこんなものがあります。

実践

step
1フラグメントを追加

BottomNavigationBar用のフラグメントを追加します。名前は「BottomNavBarFragment」としました。

step
2フラグメントのレイアウトを修正

上記で作成したFragmentのレイアウトXMLを開いて、Components＞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/ConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BottomNavBarFragment">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_bar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

step
3メニューの追加

BottomNavigationBarに表示するためのメニューファイルを定義します。

リソース（res)フォルダで右クリックをして、「Android Resource Directory」を選択します。

Resource Typeにて「menu」を選択して、OKボタンを押下します。すると、resフォルダ内にmenuフォルダが追加されます。

次に作成したmenuフォルダの上で右クリックをし、「New＞Menu Resource File」を選択します。適当なファイルをつけてOKボタンを押下します。

step
4メニューファイルの編集

Step3で作成したメニューファイルを編集します。

<?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/menu1"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_home_24"
        app:showAsAction="ifRoom"
        android:title="ホーム"/>
    <item
        android:id="@+id/menu2"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_music_note_24"
        app:showAsAction="ifRoom"
        android:title="音楽"/>
    <item
        android:id="@+id/menu3"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_update_24"
        app:showAsAction="ifRoom"
        android:title="更新"/>
</menu>

titleとか若干横着しています。また、iconについては事前にVector Assetsにて適当なアイコンを作成しています。

これをDesignで表示させると、↓みたいになります。

step
5  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/ConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BottomNavBarFragment">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_bar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/bottom_nav_menu"/>
</androidx.constraintlayout.widget.ConstraintLayout>

app:menu=の値として先ほど作ったメニューファイルを指定します。

step
6  FragmentをActivityに組み込む

さて、Step5で作成したFragmentをActivityに組み込みます。

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

    <fragment
        android:id="@+id/fragment"
        android:name="com.example.bottomnavapp.BottomNavBarFragment"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout="@layout/fragment_bottom_nav_bar" />
</androidx.constraintlayout.widget.ConstraintLayout>

step
7とりあえずビルド

この段階で一度ビルドしてみます。

できたけどなんか微妙だな

メニューの色が黒でボタンが紫なのでなんとも言えない感じになっていますが、とりあえず表示には成功しました。

step
8配色を変更する

あまりにも配色にセンスがないので、配色を変更します。

まず、アイコンの状態に応じて色を変化させられるselector（状態に応じてアイテムの属性を変更できるやつ）を作成します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#ff8c00"/>
    <item android:state_pressed="true" android:color="#ff8c00" />
    <item android:color="#ffff00" />
</selector>

ここで設定しているのは、「アイコン（item）がチェックor押されたら色を#ff8c00にします。通常の色は#ffff00です」と定義しています。

次に、このselectorを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/ConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BottomNavBarFragment">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_bar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/bottom_nav_menu"
        android:background="#006400"
        app:itemTextColor="@drawable/bottom_menu_color"
        app:itemIconTint="@drawable/bottom_menu_color"/>
</androidx.constraintlayout.widget.ConstraintLayout>

BottomNavigationViewの背景色（android:background）、アイテムの文字色とアイコン色を設定しています。

上記を設定後再ビルドするとこんな感じにBottomNavigationViewが変化します。

無事配色の設定をすることができました。

また、現在選択中のアイコンがリアルタムで変化するので非常にわかりやすいメニューとなりました。