Read complete story

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:

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.

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.

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.

 

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close