BottomNavigationViewを使ってみる

BottomNavigationViewとは？

これではないです
https://github.com/armcha/LuseenBottomNavigation

Support Library 25.0.0で追加された、android.support.design.widget.BottomNavigationViewです。
https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html

Material Designにも追加された、Bottom navigationを簡単に実装できるようになっています。
https://material.google.com/components/bottom-navigation.html

導入

build.gradleにデザインのサポートライブラリを入れます。

build.gradle

dependencies {
    // ...
    compile 'com.android.support:design:25.0.0'
}

前述の通り、25.0.0以降が必要なので、もろもろ25に上げる必要があります。

実装

ドキュメントにあるやつが、どういう場所に置くことを想定しているのかイマイチ分からなかったので、以下のような感じにしました。

（追記：ドキュメントが間違っているようで、以下のように、
xmlns:app="http://schemas.android.com/apk/res-auto"とapp:menu="@menu/my_navigation_items"を設定する必要があります）
（STAR_ZEROさんありがとうございます！ ）
http://qiita.com/STAR_ZERO/items/e99cd2fa423d54447220

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ...>

    ...

	<android.support.design.widget.BottomNavigationView
	    android:id="@+id/navigation"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:layout_gravity="bottom"
	    app:menu="@menu/my_navigation_items" />

	...

</FrameLayout>

BottomNavigationViewもmenuを使うようなので、以下のようなファイルも用意しました。

my_navigation_items.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/add"
        android:icon="@android:drawable/ic_menu_add"
        android:title="add" />
    <item
        android:id="@+id/delete"
        android:icon="@android:drawable/ic_menu_delete"
        android:title="delete" />
    <item
        android:id="@+id/call"
        android:icon="@android:drawable/ic_menu_call"
        android:title="call" />
</menu>

ところがこれだけだとなぜか表示されない

何がいけないのか良く分からなかったので、javaの方で改めてinflateしたら表示されました。　
（追記：上に書いたようにすれば、javaの方では何もしなくても正しく表示されます）

リスナーも以下のような感じで実装できるので、一通りできそうです。

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        // ...
        return true;
    }
});

結果

3つの場合

4つの場合

カレント以外の文字が表示されないっぽいです。横方向の動きが激しい。

5つの場合

こちらもカレント以外の文字が表示されないっぽいです。横方向の動きは抑えめ。

注意

Material Designによれば、アイコンの個数は3から5個が良いとのことですが、1個や2個しかなくても動きます。
ただ、6個以上にすると、以下のメッセージとともにクラッシュしました。

java.lang.IllegalArgumentException:
    Maximum number of items supported by BottomNavigationView is 5.
    Limit can be checked with BottomNavigationView#getMaxItemCount()

おわりに

Material Designのガイドラインや、すでにGoogle+やフォトで実装されているものと、見た目が何か違う気もしますが、とりあえず動作はしました。
まだ情報が少ないので、間違っていたらすみません
情報をいただけると嬉しいです