Sliding TabLayout Example in Android

Introduction:

This feature comes with Android design support library. Android Sliding Tab Layout shows a custom view pager, tab strip which provides us a continuity in the layout when scrolling.

Real Time Example:

YouTube application uses the functionality of Sliding Tab Layout. We can see this while sliding it.

Classes & Methods:

There is a requirement of two classes to create this application i.e. SlidingTabLayout.java & SlidingTabStrip.java.

We have to use both files for this application it should be updated with the method setDistribiteEvenly() to fix the tabs.

It is available on google developers site. Take both the files in your project before building the application.

Now, we see how to create this awesome feature i.e. sliding tab layout in your application.

Example with Code:

Sliding Tab Layout can also act like TabStrip, we can place it anywhere inside the layout. We also add ViewPager for sliding the pages.

Let’s do it programmatically:

STEPS:

1. Create new Application AndroidSlidingTabLayoutExample.

Requirements:

Four layout files are needed to create a simple application i.e.

tool_bar.xml, tab_1.xml, tab_2.xml, and activity_main.xml.

As I discussed above two files i.e. SlidngTabLayout.java and SlidingTabStrip.java is needed and then we have to create MainActivity.java, Tab1Fragment.java, Tab2Fragment.java and ViewPagerAdapter.

You can also add more Fragments as the need of Tabs.

tool_bar.xml:

Add the code in this layout file for activity_main.xml

activity_main.xml:

Add the code in this XML file the toolbar layout and view pager in LinearLayout.

tab_1.xml:

Add the code for first Tab inside RelativeLayout.

tab_2.xml:

Same as for second Tab

<TextView
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:textAppearance=“?android:attr/textAppearanceMedium”
android:text=“You Are In Events”
android:id=“@+id/textView”
android:layout_centerVertical=“true”
android:layout_centerHorizontal=“true” />

Now we are going to create .java files.

Create two .java files for Tab1 and Tab2 creating fragments

Tab1Fragment.java:

Add the code in onCreateView() method:

Tab2Fragment.java:

Similarly Add the code for this

ViewPagerAdapter.java:

To create the view of every Tab or every page we will need this ViewPagerAdapter.

Add the code inside this

Inside getItem() method, It returns fragment for every position in view pager

MainActivity.java:

Initialize Toolbar, ViewPager and other variables.

Add the code in onCreate(..){..}:

Take the reference of Toolbar and assign ViewPager

Pass the Fragment Manager, Titles, no. of Tabs in your adapter.

Assign SlidingTabLayout view.

To set the tabs fixed, call this method.

We can also set colors of TabView.

So, these are the initial requirements to create a simple application of SlidingTabLayout in Android.

Output:

Conclusion:

This is the basic idea of creating such an application like SlidingTabLayout in android. We can customize it as we want by using its features. We can see the example of YouTube which uses the same functionality. It is a new feature which is added in android design support library. This functionality is very famous in android development.