Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to combine BottomNavigationView and ViewPager?

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

1

On normal fragment before swiped

1

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!

like image 978
Bagus Eka Saputra Avatar asked Sep 27 '19 05:09

Bagus Eka Saputra


People also ask

When should I use ViewPager?

ViewPager in Android is a class that allows the user to flip left and right through pages of data. This class provides the functionality to flip pages in app. It is a widget found in the support library. To use it you'll have to put the element inside your XML layout file that'll contain multiple child views.

Can we add activity in ViewPager?

You can't use ViewPager to swipe between Activities . You need to convert each of you five Activities into Fragments , then combine everything in one FragmentActivity with the Adapter you use with ViewPager .

How the ViewPager is implemented?

Android ViewPager widget is found in the support library and it allows the user to swipe left or right to see an entirely new screen. Today we're implementing a ViewPager by using Views and PagerAdapter. Though we can implement the same using Fragments too, but we'll discuss that in a later tutorial.


2 Answers

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) {

            }
        });
like image 78
Chintan Avatar answered Oct 03 '22 14:10

Chintan


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!

like image 40
Bagus Eka Saputra Avatar answered Oct 03 '22 15:10

Bagus Eka Saputra