How to load Viewpager (Swipeable views) in TabLayout

Tabs make it easy to explore and switch between different views. Provides a way for displaying grouped content. – google design specification

Supporting tabs in android is the most common and elegant design pattern. Beautiful applications are created using this design pattern namely Google play store app, Google IO 2015 application, Snapdeal application, whats app and many other. The best thing about them is

Almost every other eCommerce application use Tab Layout design pattern.

The best thing about them is the utilization of limited space and displaying content separated in different tabs just at a single place.

In this post, we will be using Google’s new TabLayout included in the support design library release for Android “M”.

The Design library’s TabLayout implements both fixed tabs, where the view’s width is divided equally between all of the tabs, as well as scrollable tabs, where the tabs are not a uniform size and can scroll horizontally. Tabs can be added programmatically:

TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

1 2	TabLayout tabLayout = ...; tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

However, if you are using a ViewPager for horizontal paging between tabs, you can create tabs directly from your PagerAdapter’s getPageTitle() and then connect the two together using setupWithViewPager() This ensures that tab selection events update the ViewPager and page changes update the selected tab.

Sliding Tabs Layout

Simply add android.support.design.widget.TabLayout which will be used for rendering the different tab options.

<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@drawable/tab_color_selector"
app:tabIndicatorColor="@color/dark_primary_color"
app:tabMode="scrollable" />

<android.support.design.widget.TabLayout

android:id="@+id/sliding_tabs_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabBackground="@drawable/tab_color_selector"

app:tabIndicatorColor="@color/dark_primary_color"

app:tabMode="scrollable" />

Upon closer inspection on how the Tabs actually behave, you would have noticed each Tab upon being active brings in another screen (Fragment). In essence, the entirety of those Tab screens are Fragments, which will be handled by a ViewPager (think of it like a gallery slideshow).

The android.support.v4.view.ViewPager component will be used to page between the various fragments we will create.

<android.support.v4.view.ViewPager 
android:id="@+id/viewpager" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" />

<android.support.v4.view.ViewPager

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

Setup Sliding Tabs

mViewpager = (NonSwipeableViewPager) findViewById(R.id.viewpager);
mSlidingTab = (TabLayout) findViewById(R.id.sliding_tabs_product);
mViewpager.setAdapter(new SampleFragmentPagerAdapter(getSupportFragmentManager(), ... );
mSlidingTab.setupWithViewPager(mViewpager);

mViewpager = (NonSwipeableViewPager) findViewById(R.id.viewpager);

mSlidingTab = (TabLayout) findViewById(R.id.sliding_tabs_product);

mViewpager.setAdapter(new SampleFragmentPagerAdapter(getSupportFragmentManager(), ... );

mSlidingTab.setupWithViewPager(mViewpager);

Method setupWithViewPager will:

Add a ViewPager.OnPageChangeListener that will forward events to this TabLayout.
Populate the TabLayout’s tabs from the ViewPager’s PagerAdapter.
Set our TabLayout.OnTabSelectedListener which will forward selected events to the ViewPager

Create Fragment

Now that we have the ViewPager and our tabs in our layout, we should start defining the content of each of the tabs. Since each tab is just a fragment being displayed, we need to create and define the Fragment to be shown. You may have one or more fragments in your application depending on your requirements.

public class PageFragment extends Fragment {
public static final String ARG_PAGE = "ARG_PAGE";

 public static final String public static PageFragment newInstance(int page, ...) {
 Bundle args = new Bundle();
 args.putInt(ARG_PAGE, page);
 PageFragment fragment = new PageFragment();
 fragment.featuredProducts = featuredProducts;
 fragment.setArguments(args);
 return fragment;
 }

 @Override 
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState); // setting up fragment 
 } 
 @Override 
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ 
 View view=...; 
// create view used in the fragment
 return view; 
 } 
}

public class PageFragment extends Fragment {

public static final String ARG_PAGE = "ARG_PAGE";

public static final String public static PageFragment newInstance(int page, ...) {

Bundle args = new Bundle();

args.putInt(ARG_PAGE, page);

PageFragment fragment = new PageFragment();

fragment.featuredProducts = featuredProducts;

fragment.setArguments(args);

return fragment;

}

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState); // setting up fragment

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){

View view=...;

// create view used in the fragment

return view;

}

Implement FragmentPagerAdapter

he next thing to do is to implement the adapter for your ViewPager which controls the order of the tabs, the titles and their associated content. The most important methods to implement here are getPageTitle(int position) which is used to get the title for each tab and getItem(int position) which determines the fragment for each tab.

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {
final int PAGE_COUNT = 5;
private String tabTitles[] = new String[] {
"Featured Products",
"Latest Products",
"Most Viewed",
"New Products",
"Sale Products"
};
private Context context;
private JSONArray homePageExtraData;
private MobikulApplication mMobikulApplication;
private int categoryIndex;
public SampleFragmentPagerAdapter(FragmentManager fm, Context context, ...) {
super(fm);
this.context = context;
}
@Override public int getCount() {
return PAGE_COUNT;
}
@Override public Fragment getItem(int position) { // Return fragment for each page to be displayed in viewpager return PageFragment.newInstance(position, ...);
}

@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
return tabTitles[position];
}
}

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {

final int PAGE_COUNT = 5;

private String tabTitles[] = new String[] {

"Featured Products",

"Latest Products",

"Most Viewed",

"New Products",

"Sale Products"

};

private Context context;

private JSONArray homePageExtraData;

private MobikulApplication mMobikulApplication;

private int categoryIndex;

public SampleFragmentPagerAdapter(FragmentManager fm, Context context, ...) {

super(fm);

this.context = context;

}

@Override public int getCount() {

return PAGE_COUNT;

}

@Override public Fragment getItem(int position) { // Return fragment for each page to be displayed in viewpager return PageFragment.newInstance(position, ...);

}

@Override

public CharSequence getPageTitle(int position) {

// Generate title based on item position

return tabTitles[position];

}

Stay updated to know know more about design library.

Shubham Agarwal

29 Oct, 2021
Updated by - Mobikul Admin
31 Dec, 2015
Created by - Shubham Agarwal

. . .

How to load Viewpager (Swipeable views) in TabLayout

Sliding Tabs Layout

Setup Sliding Tabs

Create Fragment

Implement FragmentPagerAdapter

Leave a Comment Cancel Reply

Message Sent!