Android Tabs Example – With Fragments and ViewPager

16 April 2016
Category Android, Applications
16 April 2016, Comments Comments Off on Android Tabs Example – With Fragments and ViewPager

One of the best things about technology is that it keeps on changing. On the same lines recently some significant improvements were made for Android by the means of support library. The new Design Support Library was included in the support repository. This new Android Design Support library features many new UI components like snackbars, floating action buttons and of-course it significantly improves the implementation of Android Tabs. Since Android design support library contains many new UI widgets which were introduced as concepts with material design. I would write separate tutorials for each one of those. Here lets concentrate on the Android tabs example.

Earlier to make tabs in Android, action bar was used. But now with API 21 onwards it has been deprecated. An alternative way to make tabs with full backward support was to use SlidingTabLayout and SlidingTabStrip classes. But now with Android Design Support Library making swipe tabs has become even more simpler. In this Android Tabs example lets explore the power of new design support library.

Making an Android Tabs Example by using Android Design Support Library

Tab type navigation mode is a very common design pattern among android apps. But since Android’s 5.0 release, material design came in to picture and allot of changes were made in various APIs. Resulting the deprecation of action bar. Although a new API, Android Toolbar was released to replace it. Due to this change, new APIs for android tabs were also released through the design support library recently. The main class used for displaying tabs through these new APIs is Android TabLayout. In this Android Tab example we would make a screen with three tabs using these new APIs for tabs with Fragments and a ViewPager which would look like the image below:

Android Tabs Example

To start off please include these libraries in the dependencies section of your build.gradle file:

Now since we will be using Android Toolbar and TabLayout classes to show tabs, lets remove the action bar from layout by using styles:

To get a better understanding on Android Toolbar and its usage have a look at this Android Toolbar tutorial. Next, to display Android tabs with fragment and ViewPager, lets define three simple fragments and their layouts:

Its layout:

Android Tab 2:

Its layout:

Android Tab 3:

Its layout:

Now that we have all the tab fragments defined, lets define a view pager adapter for the swipe tabs feature:

In the view state pager adapter above, you may see that I have just initialized the fragments as per their location. Next lets define the layout for main activity where all these tabs would be displayed.

Displaying Tabs using Android TabLayout

Earlier tabs were added to the action bar through code. But as you can see in this Android tabs example layout above we are using Toolbar and the TabLayout separately to display tabs. Also please note a view pager is also added, which would be attached to this TabLayout in the activity below through code.