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!
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.
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 .
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.
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) {
}
});
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With