Multiple Tab fragments inside bottom navigation fragment

Multiple Tab Fragments Inside Bottom Navigation Fragment

Introduction

This article delves into the implementation of multiple tab fragments within a bottom navigation fragment, a common design pattern in Android app development. This architecture enhances user experience by providing seamless navigation between various content areas within a single screen.

Bottom Navigation Fragment

The bottom navigation fragment acts as a container for multiple fragments, each representing a distinct section of the app. This fragment typically contains a navigation bar with multiple icons or text labels representing different sections.

Tab Fragment

Tab fragments are used within a bottom navigation fragment to further divide a section into sub-sections. They allow for a more granular navigation experience within a specific area of the app.

Implementation

1. Setting up Bottom Navigation

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:menu="@menu/bottom_nav_menu" />

2. Creating Tab Fragments

<fragment
    android:id="@+id/fragment_home"
    android:name="com.example.app.HomeFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

3. Creating Tab Layout and ViewPager

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
<androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_above="@+id/tab_layout"
    android:layout_below="@+id/toolbar" />

4. Setting up ViewPagerAdapter

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> fragments = new ArrayList<>();
    private final List<String> fragmentTitles = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    public void addFragment(Fragment fragment, String title) {
        fragments.add(fragment);
        fragmentTitles.add(title);
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return fragmentTitles.get(position);
    }
}

5. Initializing and Connecting Components

TabLayout tabLayout = findViewById(R.id.tab_layout);
ViewPager viewPager = findViewById(R.id.view_pager);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

adapter.addFragment(new HomeFragment(), "Home");
adapter.addFragment(new ProfileFragment(), "Profile");

viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);

Benefits

• Enhanced navigation within sections
• Improved user experience
• Clear and organized content presentation

Comparison

Conclusion

Utilizing multiple tab fragments within a bottom navigation fragment provides a powerful approach to managing complex app layouts. This pattern allows for intuitive navigation while maintaining a clear and user-friendly interface.