androidでタブバー、BottomNavigationViewの使い方メモ

BottomNavigationViewを使ってタブバーを設置する手順をメモしておく

app/build.gradle

まずはサポートライブラリーを追加

dependencies {
    ・・・
    implementation 'com.android.support:design:28.0.0'
}

menu/item_bottom_navigation.xml

タブの基本的な設定を行う
アイコンは自分で用意した画像を使うように

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/tab1"
        android:icon="@drawable/tab2"
        android:title="タブ1" />
    <item android:id="@+id/tab2"
        android:icon="@drawable/tab2"
        android:title="タブ2" />
</menu>

values/dimens.xml

タブの文字サイズを設定

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="design_bottom_navigation_text_size">10sp</dimen>
    <dimen name="design_bottom_navigation_active_text_size">10sp</dimen>
</resources>

values/color.xml

タブバーの背景色を定義（colorTabBar）
タブの色も変更（colorPrimary）※今回はこれで十分だた

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#050f52</color>
    ・・・
    <color name="colorTabBar">#f0f8ff</color>
</resources>

layout/activity_main.xml

タブバー追加
タイトルを常に表示（labelVisibilityMode）
タブバーの背景色とエフェクトの無効化（itemBackground）

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout
    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">

    // ここにタブを選択したときのViewを配置

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:labelVisibilityMode="labeled"
        app:itemBackground="@color/colorTabBar"
        app:menu="@menu/item_bottom_navigation" />

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

MainActivity.kt

タブが選択されたときに表示するfragmentセット

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        bottom_navigation.setOnNavigationItemSelectedListener { item ->
            val transaction = supportFragmentManager.beginTransaction()
            when(item.itemId) {
                R.id.tab1 -> {
                    transaction.replace(R.id.frameLayout, MyFragment1()).commit()
                }
                R.id.tab1 -> {
                    transaction.replace(R.id.frameLayout, MyFragment2()).commit()
                }
            }
            true
        }

        supportFragmentManager.beginTransaction().replace(R.id.frameLayout, MyFragment1()).commit()
    }
}

以上です