Bottom Navigation and Tab Layouts

# CHAPTER 12

Bottom Navigation and Tab Layouts #

1. Introduction #

2. Learning Objectives #

• Understand when to use Bottom Navigation vs. Navigation Drawers.

• Implement a BottomNavigationView using XML menus.

• Style bottom navigation bars to match your brand.

• Implement a TabLayout for swiping between categories.

• Combine TabLayout with a ViewPager (or ViewPager2) for seamless swiping.

3. BottomNavigationView Basics #

Step 1: Create the Menu XML Create a menu file (e.g., bottomnavmenu.xml) in the res/menu folder:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/nav_search"
        android:icon="@drawable/ic_search"
        android:title="Search" />
    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/ic_person"
        android:title="Profile" />
</menu>

Step 2: Add to Layout Place the BottomNavigationView at the bottom of your main layout (using a ConstraintLayout or RelativeLayout).

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_nav_menu"
    app:layout_constraintBottom_toBottomOf="parent" />

4. Customizing Bottom Navigation #

• app:itemIconTint: Set a color state list to change the color of the active vs. inactive icons.

• app:itemTextColor: Change the text color based on state.

• app:labelVisibilityMode: Choose whether the text labels always show, never show, or only show on the selected item (selected mode is a very popular modern design pattern).

5. TabLayout for Sub-Navigation #

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill" />

• app:tabMode="fixed": All tabs fit on the screen equally.

• app:tabMode="scrollable": Useful if you have many tabs; the user can swipe horizontally to see more tabs.

6. Combining TabLayout with ViewPager2 #

7. Mini Project: Multi-Screen Navigation #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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">

    <!-- Top AppBar -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent">
        
        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="Messages" />

        <!-- TabLayout directly below Toolbar -->
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextColor="#B3FFFFFF"
            app:tabSelectedTextColor="#FFFFFF"
            app:tabIndicatorColor="#FFFFFF" />
            
    </com.google.android.material.appbar.AppBarLayout>

    <!-- ViewPager for swiping screens -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@+id/appBar"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigation" />

    <!-- Bottom Navigation -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav_menu"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

8. Design Principles #

• Thumb Zone: Critical actions should be placed in the bottom third of the screen, making them accessible to a user holding a phone with one hand.

• Visual Feedback: The selected tab or bottom nav item must be visually distinct (using color or filled icons) from the unselected items so the user always knows "where they are."

9. Common Mistakes #

• Putting too many items in Bottom Nav: Adding 6 or 7 items shrinks the touch targets, causing accidental clicks. Use 3 to 5 max.

• Hiding Bottom Nav unnecessarily: While you can hide the bottom nav when scrolling down a list to save screen space, ensure it reappears immediately upon scrolling up.

10. Best Practices #

• Use outlined/hollow icons for unselected states and filled/solid icons for the selected state to create a strong visual cue.

• Use BadgeDrawable to show notification dots (like unread message counts) on your Bottom Nav items.

11. Exercises #

1. 1. Modify a BottomNavigationView so that the text labels only appear on the currently active item.

1. 2. Create a TabLayout with app:tabMode="scrollable" and add 8 dummy tabs to see how the horizontal scrolling behaves.

12. UI Design Challenges #

13. MCQ Quiz with Answers #

14. Interview Questions #

• Q: What UX problems does Bottom Navigation solve compared to a Navigation Drawer?

• Q: Explain the difference between primary navigation (Bottom Nav) and secondary navigation (Tabs).

• Q: How would you display a badge with an unread count of "3" on a BottomNavigationView item?

15. Summary #

16. Next Chapter Recommendation #