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:
- 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
|
1
2
3
4
5
6
7
8
|
<?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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<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.
|
1
2
3
4
5
6
7
8
|
<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:
|
1
2
|
View v = inflater.inflate(R.layout.tab_1,container,false);
return v;
|
Tab2Fragment.java:
Similarly Add the code for this
|
1
2
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@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.
|
1
2
3
4
5
6
|
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
|
1
2
3
4
|
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.
|
1
2
3
|
adapter = new ViewPagerAdapter(getSupportFragmentManager(),Titles,Numboftabs);
pager.setAdapter(adapter);
|
Assign SlidingTabLayout view.
|
1
|
tabs = (SlidingTabLayout) findViewById(R.id.tabs);
|
To set the tabs fixed, call this method.
|
1
2
3
|
tabs.setDistributeEvenly(true);
tabs.setViewPager(pager);
|
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.
