BottomNavigationViewを試してみる

  • 22
    いいね
  • 0
    コメント

SupportLibrary 25.0.0から BottomNavigationView が入ったので早速試しました。

Androidでは色々言われてきた下タブですね。

build.gradle

ライブラリを追加します。

compile 'com.android.support:design:25.0.0'

メニュー

まずはナビゲーションで使うメニューをXMLで定義します。

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

    <item
        android:id="@+id/nav_camera"
        android:icon="@drawable/ic_menu_camera"
        android:title="Import" />
    <item
        android:id="@+id/nav_gallery"
        android:icon="@drawable/ic_menu_gallery"
        android:title="Gallery" />
    <item
        android:id="@+id/nav_slideshow"
        android:icon="@drawable/ic_menu_slideshow"
        android:title="Slideshow" />
    <item
        android:id="@+id/nav_manage"
        android:icon="@drawable/ic_menu_manage"
        android:title="Tools" />

</menu>

レイアウト

次にレイアウトです。これドキュメントのサンプルに罠があってハマりました。

xmlns:design="http://schema.android.com/apk/res/android.support.design"

だと動かないので、下のようにします。いつも使うやつですね。

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

レイアウトファイルはこんな感じです。単純にBottomNavigationViewを下に配置してるだけです。

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.AppBarLayout>

        <include layout="@layout/content_main" />
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:menu="@menu/bottom_navigation" />
</LinearLayout>

Activityコード

setOnNavigationItemSelectedListenerでタブ選択時の処理が行えます。

MainActivity.java
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()) {
                    case R.id.nav_camera:
                        Log.d("MainActivity", "nav_camera");
                        break;
                    case R.id.nav_gallery:
                        Log.d("MainActivity", "nav_gallery");
                        break;
                    case R.id.nav_slideshow:
                        Log.d("MainActivity", "nav_slideshow");
                        break;
                    case R.id.nav_manage:
                        Log.d("MainActivity", "nav_manage");
                        break;
                }
                return false;
            }
        });
    }

}

実行