Implementing Swipe Tabs

Ever wondered how to implement swipe tabs in your android app? This article will explain everything.  Having swipe tabs is a great way to provide an intuitive user experience. We can let our user simply swipe the screen to show a different UI or list item, without forcing them to navigate a menu. Android provides a very easy way to achieve this. We will need to make use of four different components: a ViewPager , a PagerAdapter , a TabLayout  and at least two  different fragments. Before getting in to any code, lets break down what a ViewPager  and PagerAdapter  are.

ViewPager & PagerAdapter

A ViewPager is essentially a layout manager that gives the user the ability to swipe right and left through “pages” of data. Fragments are the most common form of these pages. ViewPager needs an implementation of PagerAdapter in order to actually show our Fragments. Good thing for us, Android provides two such adapters built with Fragments in mind  – FragmentPagerAdapter and FragmentStatePagerAdapter.

FragmentPagerAdapter or FragmentStatePagerAdapter?

The difference between each adapter comes down to what kind of app we’re building. FragmentPagerAdapter keeps a number of Fragments in memory. This is particularly useful if we have an app comprised of a small amount of screens, or “tabs”. Having just three different fragments does not take up a lot of memory. However, if we were making a book reader app, we would not want to keep every page in memory. In this case, we would use the FragmentStatePagerAdapter. This adapter will only save the fragment’s state, but will completely destroy it when moved off screen.

Here’s a good rule of thumb for when to use each adapter:

  • Navigating through a small number of screens? FragmentPagerAdapter
  • Working with a large or unknown list of screens? FragmentStatePagerAdapter

Preparing our Activity

Let’s begin by first setting up our ViewPager along with our TabLayout. We need to define both in our Activity’s layout. Since we won’t be having any other widgets in our Activity, we can define the ViewPager as the root element like so.

We will also give our ViewPager and TabLayout an id so we can reference it in our Activity class. Speaking of our Activity, let’s write the base code we’ll be working from.

As you can see, we don’t have much code in our Activity as of yet. We will be building on this after we have written our PagerAdapter and Fragments.

Our own FragmentPagerAdapter

Since we will not be declaring our adapter anonymously, we will subclass it. Whether you want to nest this in your Activity or have it in a separate class file is up to you. Our adapter will look like the following.

We have two Lists for our class variables – which we will initialize in our constructor. One is for keeping track of our fragments and the other for our titles. We have also added a method for adding fragments easily – addFragment(). This method will take a Fragment along with the title we want it to have. This title will be the text that shows up in each of our tabs. The other methods are override methods of FragmentPagerAdapter. They are responsible for keeping track of what Fragment or title should be shown when the user scrolls to a certain position. Now let’s move on to actually writing the Fragments we want to display. For the purpose of this article, we will make three different Fragments with different background colours – red, green and blue.

 

Making our Swipe Tabs

We will have three Fragment classes altogether, RedFragment, BlueFragment and GreenFragment. Here is how our BlueFragment class and layout will look.

You can repeat this process for the red and green fragments. Just be sure to change the text for their TextViews as well as the layout’s background colour (Red: #FFFF4444 , Green: #FF99CC00). Once you have that done, it’s time to wire everything together. Let’s go back to our Activity.

 

Hooking up our Swipe Tabs

The only code we have left is for our setUpViewPager() method. It will look as follows.

All we need to do is first create an instance of our adapter. Note that we need to add all the fragments we want to display BEFORE we call setAdapter() on our ViewPager. If you followed through this example, you should now have an intuitive interface with swipe tabs!

Further reading:

FragmentPagerAdapter vs FragmentStatePagerAdapter

 

 

Liked the article? Share it!

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of