BottomNavigationViewの実装について

BottomNavigationViewの実装についてメモ書き。
レイアウトファイルへの定義だけで実装が済んでしまうので思ったよりも簡単でした。
なお、公式ページのUsageに則りつつ最小限の実装しかしていませんのであしからず。

Usage

１．ライブラリのダウンロード

BottomNavigationViewを利用するために必要なライブラリをdependenciesに追記。

・build.gradle

implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'

２．Viewに表示させるアイテム用のmenu resourceを作成する

まずは、表示させたいアイテムをmenu resourceに定義していきます。
尚、表示できるアイテムは最大で5つとなっています。

下記はアイテム4つ分のサンプルコード。
アイコンについては公式が出しているIcons - Material Designから素材を探すと◎。

・res/menu/bottom_navigation_item.xml

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

    <item
            android:id="@+id/nav_home"
            android:icon="@drawable/baseline_home_white_24dp"
            android:title="Home"/>
    <item
            android:id="@+id/nav_schedule"
            android:icon="@drawable/baseline_calendar_today_white_24dp"
            android:title="Schedule"/>

    <item
            android:id="@+id/nav_favorite"
            android:icon="@drawable/baseline_favorite_white_24dp"
            android:title="Like"/>

    <item
            android:id="@+id/nav_other"
            android:icon="@drawable/baseline_more_horiz_white_24dp"
            android:title="Other"/>

</menu>

３．BottomNavigationViewの作成＋menu resourceを紐づける

レイアウトのxml(下記例はMainActivity用)に、BottomNavigationViewのウィジェットを追加します。
各属性の内容は下記のようになっています。

属性	内容
android:background	BottomNavigationViewの背景色を変更する。
app:itemIconTint	itemのアイコンカラーを変更する。
app:itemTextColor	itemのテキストカラーを変更する。
app:menu	menu resourceを設定する。

・res/layout/activity_main.xml

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

    <!-- Main content -->

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@color/colorPrimary"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            app:menu="@menu/bottom_navigation_item" />

</FrameLayout>

４．Selectorの設定

app:itemIconTintおよびapp:itemTextColorについて、単純に色を設定できるだけでなく、Selectorを書くことでアイテムの状態変化に応じて色を設定することができます。
これで、選択されているアイテムはホワイト、それ以外はグレーアウトにする、みたいなことができます。

・res/drawable/bottom_navigation_colors.xml

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

  <!-- 選択されているとき -->
  <item
      android:state_checked="true"
      android:color="@color/colorPrimary" />

  <!-- 選択されていないとき -->
  <item
      android:state_checked="false"
      android:color="@color/grey" />
 </selector>

・res/layout/activity_main.xml

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

    <!-- Main content -->

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@color/colorPrimary"
            app:itemIconTint="@drawable/bottom_navigation_colors"
            app:itemTextColor="@drawable/bottom_navigation_colors"
            app:menu="@menu/bottom_navigation_item" />

</FrameLayout>

５．実行画面

実際に実行してみると下記の様な感じになります。リソースファイルだけでここまで実装できるのは本当にすごいですね...！

f:id:hamup:20190609194632g:plain

まとめ

あとは、選択されたアイテムごとにそれぞれのレイアウトを紐づけることができればシュッとしたいい感じのアプリになりそうです。
なんとなく大変そうなイメージですが、AACのNavigationコンポーネントを利用することレイアウトとの紐づけや画面遷移の設定について簡単に実装することができます。

実際の方法についてを下記に追記しました。
hamup.hatenablog.com

hamup’s blog