How to load Viewpager (Swipeable views) in TabLayout

Updated 29 October 2021


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:

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 which will be used for rendering the different tab options.

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 component will be used to page between the various fragments we will create.

Setup Sliding Tabs

Method setupWithViewPager will:

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.

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.

Stay updated to know know more about design library.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home