This tutorial is about an Android tab layout with a swipe view feature. We use an Action Bar  and ViewPager to build a multiple tab layout application in Android.

The action bar represents the top portion(bar) of the screen as indicated in the following image. So we use it to place labels corresponding to the tabs.



We use a ViewPager for the screen slides. In our case we are sliding screens corresponding to tabs.

Implementing an Android Tab Layout with a swipe feature

Let’s assume that the selected tab is ‘Tuesday’. In our example, we want that if the user swipes the screen to the left, then the focused label present in the action bar should become ‘Wednesday’ and the content corresponding to the “Wednesday” tab should be displayed below it.

Screenshot of tab layout with swipe view application


When you create a new application, make sure you have selected the action bar theme and the minimum API is 11.


Let’s create fragments for each tab in order to display the data. We need three fragments, one each for Monday, Tuesday and Wednesday.

To display data in a tab layout, we just need fragments. We will start by creating a fragment for Monday’s tab followed by the rest of the days. – Data corresponding to the monday tab
Listing 1 :

Inside the onCreateView method of the fragment, we get the layout file with which we want to display inside the tab layout. This method returns the View object which will be used by the adapter to display data on the main screen.

Layout file

Create a new file fragment_monday.xml
Listing 2 :

Similarly, we create two more fragments for the remaining two tabs (Tuesday and Wednesday).

The Adapter for a Tab Layout in Android

After building data corresponding to all tabs, we need to develop an adapter. An adapter helps to plug the data into the main screen.

Now let’s build an adapter which will help to plug the fragment screen into the main activity. We need to use a FragmentPagerAdapter to build an adapter for us. The adapter helps to place data onto the screen. The adapter will check that the first tab is ‘Monday’ so it will plug the data corresponding to the “Monday” fragment onto the main screen.

  • We will use a ViewPager for the screen slides. We need the FragmentPagerAdapter to plug the data inside the ViewPager (which is our main screen).
  • The getItem method returns the fragment corresponding to the selected tab.
  • The getCount method tells the total number of tabs in our Android application. Snippet 1 :

XML layout of the main screen

Create a new file activity_main.xml
Listing 3 :

The Main Screen of the Tab Layout

Now let’s build the main screen of our Android tab layout swipe view application. Here we will use the adapter to display the data corresponding to the tab selected. Below, you can find the explanation and the complete code of the main activity.

  1. We have extended FragmentActivty because we want to use fragments inside our tab layout.
  2. Our activity is implementing ActionBar.TabListener which provides callback methods for handling the tab click events.
  3. We use the ViewPager which will help us in sliding screens.
  4. We get a reference of the action bar so that we can add tabs to it.
  5. The setNavigationMode method of the action bar helps to set the navigation using tabs.
  6. Inside the for loop we have the addTab method which adds the corresponding tab to the action bar.
  7. The ActionBar.TabListener  has a callback method named onTabSelected, which helps to set the content of the ViewPager (meaning, the data corresponding to the selected tab).
    Snippet 2 :
  8. The setOnPageChangeListener event of the ViewPager helps to manage the swipe actions. When the page is swiped, the content of the action bar(the focused item on top of the screen) should also be changed. So for that, we use following code:
    Snippet 3 :
Listing 4 :

I hope this tutorial for building an Android tab ayout using swipe views is clear. If you have any suggestions or doubts, feel free to comment in the section below. Thank you for reading.