Free Shipping

Secure Payment

easy returns

24/7 support

  • Home
  • Blog
  • Sliding TabLayout Example in Android

Sliding TabLayout Example in Android

 July 8  | 0 Comments

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

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="@color/colorPrimary"
    android:elevation="2dp"
    android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"
    xmlns:android="http://schemas.android.com/apk/res/android" />

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

<include
    android:id="@+id/tool_bar"
    layout="@layout/tool_bar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    />
<com.example.shriyanshu.androidslidingtablayoutexample.SlidingTabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="2dp"
    android:background="@color/colorPrimary"/>
<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:layout_weight="1"
    ></android.support.v4.view.ViewPager>

tab_1.xml:
Add the code for first Tab inside RelativeLayout.

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

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:

View v = inflater.inflate(R.layout.tab_1,container,false);
return v;

Tab2Fragment.java:
Similarly, Add the code for this

View v =inflater.inflate(R.layout.tab_2,container,false);
return v;

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

@Override
public Fragment getItem(int position) {
    if(position == 0)
    {
        Tab1Fragment tab1 = new Tab1Fragment();
        return tab1;
    }
    else
    {
        Tab2Fragment tab2 = new Tab2Fragment();
        return tab2;
    }
}

MainActivity.java:
Initialize Toolbar, ViewPager and other variables.

Toolbar toolbar;
ViewPager pager;
ViewPagerAdapter adapter;
SlidingTabLayout tabs;
CharSequence Titles[]={"Home","Events"};
int Numboftabs =2;

Add the code in onCreate(..){..}:
Take the reference of Toolbar and assign ViewPager

toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
pager = (ViewPager) findViewById(R.id.pager);

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

adapter =  new ViewPagerAdapter(getSupportFragmentManager(),Titles,Numboftabs);
pager.setAdapter(adapter);

Assign SlidingTabLayout view.

tabs = (SlidingTabLayout) findViewById(R.id.tabs);

To set the tabs fixed, call this method.

tabs.setDistributeEvenly(true);
tabs.setViewPager(pager);
>