如何结合 BottomNavigationView 和 ViewPager？

Question

I need help to combine ViewPager and BottomNavigationView. But when I swipe the screen as ViewPager works, the fragment become stacked with another fragment. How do I fix this?

Stacked fragment

On normal fragment before swiped

Here is my code:

MainActivity.java

public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {

private BottomNavigationView mBottomNavigation;
private ViewPager viewPager;
private ViewPagerAdapter mViewPagerAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    loadFragment(new HomeFragment());
    mBottomNavigation = findViewById(R.id.buttom_navigation);
    mBottomNavigation.setOnNavigationItemSelectedListener(this);

    viewPager = findViewById(R.id.view_pager);
    mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
    viewPager.setAdapter(mViewPagerAdapter);
}

private boolean loadFragment(Fragment fragment) {
    if (fragment != null) {
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.replace(R.id.container_frame_layout, fragment);
        ft.commit();
        return true;
    }
    return false;
}

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
    Fragment fragment = null;
    switch (menuItem.getItemId()) {
        case R.id.menu_home:
            fragment = new HomeFragment();
            break;
        case R.id.menu_favorite:
            fragment = new FavoriteFragment();
            break;
        case R.id.menu_account:
            fragment = new AccountFragment();
            break;
    }
    return loadFragment(fragment);
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<FrameLayout
    android:id="@+id/container_frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/buttom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:layout_alignParentBottom="true"
    app:itemIconTint="#ffff"
    app:itemTextColor="#ffff"
    app:menu="@menu/item_menu"/>
</RelativeLayout>

ViewPagerAdapter.java

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

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

@Override
public Fragment getItem(int position) {
    switch (position) {
        case 0:
            return new HomeFragment();
        case 1:
            return new FavoriteFragment();
        case 2:
            return new AccountFragment();
    }
    return null;
}

@Override
public int getCount() {
    return 3;
}

Thanks in advance!

Answer 1

Change this code in MainActivity

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {

    switch (menuItem.getItemId()) {
        case R.id.menu_home:
            viewPager.setCurrentItem(0);
            break;
        case R.id.menu_favorite:
            viewPager.setCurrentItem(1);
            break;
        case R.id.menu_account:
            viewPager.setCurrentItem(2);
            break;
    }
    return true;
}

Add this code for select bottomNavigation Tab.

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    case 0:
                        mBottomNavigation.getMenu().findItem(R.id.menu_home).setChecked(true);
                        break;
                    case 1:
                        mBottomNavigation.getMenu().findItem(R.id.menu_favorite).setChecked(true);
                        break;
                    case 2:
                        mBottomNavigation.getMenu().findItem(R.id.menu_account).setChecked(true);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

Answer 2

As the answer of Mr. @Chintan, I replaced:

return new FooFragment();

to

viewPager.setCurrentItem(index);

And remove loadFragment() function, it's perfectly works now. Thank you very much!

Answer 3

     binding.bottomNavigation.setOnClickMenuListener(model -> {
        switch (model.getId()) {
            case 1:
                binding.viewPager.setCurrentItem(0);
                break;
            case 2:
                binding.viewPager.setCurrentItem(1);
                break;
            case 3:
                binding.viewPager.setCurrentItem(2);
                break;
            case 4:
                binding.viewPager.setCurrentItem(3);
                break;
        }
        return null;
    });