Material design Tabs with Viewpager

Tabs are very powerful component of Android , which helps us to show the data in a segregated and arranged manner.

As we have seen that the most of the apps now focusing on the Tabs and View Pager components to make their app more user friendly.

Now a days users want more data on single page or we can say more data in less navigation. So Tabs and View Pager fulfilled the criteria and helps developers to show collective data in a segregated manner to user.

Don't you think its interesting and if you are an Android developer ans still you didn't dirty your hands with Tabs and View Pager, then lets start. So today you will become expert in developing tabs under View pager.

So now let's start learning it.

Prerequisite :
1. I am always encourage developers to use the Android studio , as this is an very intensive tool for programming and very proactive.

2. Use the design library to use the View pager and the Tab layout.

Please add the following text in your Module .gradle file under dependencies as follows.

dependencies { 

compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' 

compile 'com.android.support:appcompat-v7:23.4.0' 

compile 'com.android.support:design:23.4.0' 

}

After adding above design library , your code environment is ready and we will now start coding.

The coding is pretty simple as i will explain now.

1. Firstly we need to initialize the View pager
mPager = (ViewPager)findViewById(R.id.viewpager);

2. And then initialize the tabLayout
tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);

3. Now add the required listener, which helps us to track the tabs which are getting scrolled.

mPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

4. Now you should add the fragments to the viewpager ad follows. The number of fragments you add, the number of tabs will be generated.

private void initViewPager(ViewPager mPager) { 

   FragmentManager fm = getSupportFragmentManager(); 

   ViewPagerAdapter adapter = new ViewPagerAdapter(fm); 

   adapter.addFragment(new FirstTabFragment(),getString(R.string.first_tab));  adapter.addFragment(new SecTabFragment(), getString(R.string.second_tab));        mPager.setAdapter(adapter); 

} 

where below line adding the fragments to the view pager

adapter.addFragment(new FirstTabFragment(),getString(R.string.first_tab)); 

adapter.addFragment(new SecTabFragment(), getString(R.string.second_tab));

5. Now add the tabLayout to the View pager

tabLayout.setupWithViewPager(mPager);
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 

 @Override public void onTabSelected(TabLayout.Tab tab) { 

  // setting the action bar title with the selected tab 

   setActionBarTitle(tab.getText().toString().trim()); 

   setSelectedTab(tab.getPosition()); 

  }

 @Override public void onTabUnselected(TabLayout.Tab tab) { } 

 @Override public void onTabReselected(TabLayout.Tab tab) { } 

});

The initialization of the view pager includes the initialization of the ViewPager Adapter as well.

class ViewPagerAdapter extends FragmentStatePagerAdapter { 

  private final List mFragmentList = new ArrayList<>(); 

  private final List mFragmentTitleList = new ArrayList<>(); 

  public ViewPagerAdapter(FragmentManager manager) { 

    super(manager); 

  } 

@Override public Fragment getItem(int position) { 

  return mFragmentList.get(position); 

 } 

 @Override public int getCount() { 

     return mFragmentList.size(); 

  } 

  public void addFragment(Fragment fragment, String title) { 

    mFragmentList.add(fragment); mFragmentTitleList.add(title); 

  } 

@Override public CharSequence getPageTitle(int position) { 

   return mFragmentTitleList.get(position); 

  } 

}

Screenhots:

Download Code