Edited at

BottomNavigationViewを試してみる

More than 1 year has passed since last update.

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;
}
});
}

}



実行