Sử dụng CoordinatorLayout + BottomNavigationView + TabLayout + ViewPager2 + Fragment

Trong bài viết này, chúng ta sẽ từng bước tạo một ứng dụng mẫu để minh họa hoạt động của ứng dụng sử dụng kết hợp các component CoordinatorLayout + BottomNavigationView + TabLayout + ViewPager2 + Fragment

Dưới đây là video demo:

1. Tạo file menu cho BottomNavigationView: menu/bottom_navigation_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="Tab 1"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music1"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="Tab 2"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="Tab 3"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="Tab 4"
        app:showAsAction="ifRoom" />

</menu>

2. Tạo layout chính: fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
    android:background="@color/colorWhite"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorWhite"
        app:elevation="0dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|snap">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingVertical="12dp"
                app:layout_collapseMode="parallax">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_centerVertical="true"
                    android:paddingStart="16dp"
                    android:text="APP NAME"
                    android:textColor="@color/colorPrimary"
                    android:textSize="26sp"
                    android:textStyle="bold" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:layout_marginEnd="8dp"
                    android:padding="8dp"
                    android:src="@android:drawable/ic_menu_search" />
            </RelativeLayout>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_collapseMode="pin">

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="42dp"
                app:tabGravity="center"
                app:tabIndicator="@color/colorPrimary"
                app:tabIndicatorGravity="bottom"
                app:tabIndicatorHeight="4dp"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/colorPrimary"
                app:tabTextColor="@color/colorTabText" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_gravity="bottom"
                android:background="@color/colorLine" />
        </LinearLayout>
    </com.google.android.material.appbar.AppBarLayout>


    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:itemBackground="@color/colorWhite"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:labelVisibilityMode="labeled"
        app:layout_anchor="@+id/viewPager"
        app:layout_anchorGravity="bottom|center"
        app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
        app:menu="@menu/bottom_navigation_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Một số thuộc tính cần lưu ý:

• Hiệu ứng scroll ẩn BottomNavigationView

      app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
      app:layout_behavior="@string/appbar_scrolling_view_behavior" 

• Neo TabLayout ở header khi scroll

 app:layout_collapseMode="pin"

• Scroll header app name: lưu ý cần đc đặt trong CollapsingToolbarLayout

    app:layout_collapseMode="parallax"

3. Tiến hành setup data cho viewPager và tablayout

Phần này các bạn có thể xem ở phần hướng dẫn của bài viết trước đó.

Xây dựng ViewPager2 – Tablayout – Carousel