Select Page

BottomNavigationView makes it easy for users to explore and switch between top-level views in a single tap.You can find basic details about BottomNavigationView in my previous post.

In this post, you will learn how to make swipe tab with viewpager using android BottomNavigationView.

1.First, you need to create an application with latest Design Support Library(25) to your build.gradle to use BottomNavigationView.

2.Then add all the necessary resources ( color, drawable’s ) to the resource directory. For example, add the tint color selector into the drawable directory.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorAccent" android:state_checked="true" />
<item android:color="@color/colorTextPrimary" android:state_checked="false" />
</selector>

3.Create a view with ViewPager and BottomNavigationView using the code below.

<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="droidmentor.bnv_with_viewpager.MainActivity">
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="@color/colorPrimary"
app:itemIconTint="@drawable/bottom_navigation_color_selector"
app:itemTextColor="@drawable/bottom_navigation_color_selector"
app:menu="@menu/menu_bottom_navigation" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottom_navigation"
android:layout_alignParentTop="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</RelativeLayout>

4.Create necessary fragments for each tab of the viewpager.

5.Then setup the viewpager using fragments and viewpager adapter which extends FragmentPagerAdapter.

private void setupViewPager(ViewPager viewPager)
{
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
callsFragment=new CallsFragment();
chatFragment=new ChatFragment();
contactsFragment=new ContactsFragment();
adapter.addFragment(callsFragment);
adapter.addFragment(chatFragment);
adapter.addFragment(contactsFragment);
viewPager.setAdapter(adapter);
}

6.Add OnNavigationItemSelectedListener to BottomNavigationView and override OnNavigationItemSelected with the relevant action. Here you will have to set the respective item to the viewpager using the following snippet.

bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.action_call:
viewPager.setCurrentItem(0);
break;
case R.id.action_chat:
viewPager.setCurrentItem(1);
break;
case R.id.action_contact:
viewPager.setCurrentItem(2);
break;
}
return false;
}
});

BottomNavigation

7.Once done with the previous step add OnPageChangeListener to the ViewPager and override the PageSelected method. The magic happens here, the following code selects the relevant item in the BottomNavigationView.

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (prevMenuItem != null)
prevMenuItem.setChecked(false);
else
bottomNavigationView.getMenu().getItem(0).setChecked(false);
bottomNavigationView.getMenu().getItem(position).setChecked(true);
prevMenuItem = bottomNavigationView.getMenu().getItem(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
Elsewhere

Jaison Fernando

Android Developer at NFN Labs
Elsewhere