Sliding Tab In Android

Pranav J.Dev
8y
4.3k
0
1

Article

Here, I am going to discuss how we can create a sliding layout in Android. All the Android Applications are using sliding tabs.

Here, I have an action bar with the left side. There is a back button and in the center, it's showing the application title. Below that, it's showing the tabs. Each tab has a scrolling facility, in order to change the content. We can do click operations to the tabs.

First, create your mail layout, as shown below:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
<include
android:id="@+id/tool_bar"
layout="@layout/tool_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<techniche.com.slidingtabs.helper.SlidingTabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="@color/sub_title_bg"/>
<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>
</LinearLayout>

Tool_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:elevation="0dp"
android:contentInsetLeft="5dp"
android:contentInsetStart="5dp"
app:contentInsetLeft="5dp"
app:contentInsetStart="5dp"
android:contentInsetRight="5dp"
android:contentInsetEnd="5dp"
app:contentInsetRight="5dp"
app:contentInsetEnd="5dp"
xmlns:android="http://schemas.android.com/apk/res/android" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/menuLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_alignParentStart="true"
android:textColor="@color/white"
android:clickable="true" />
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/app_name"
android:textColor="@color/white"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>

Here, I have a custom class named SlidingLayout.java, which is the file that I am using in the main layout. One needs to add the following lines in the build.gradle file, as shown below:

compile 'com.android.support:support-v13:22.2.1'
compile 'com.android.support:appcompat-v7:23.0.1'

Now, we need to create a style for the Application bar, as shown below:

<style name="HomeTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

Now, bind the controls in the Java file, as given below:

TextView backButton = (TextView) findViewById(R.id.menuLeft);
TextView titleText = (TextView) findViewById(R.id.toolbar_title);
backButton.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View view)
{
final FragmentManager fragmentManager = getFragmentManager();
if (fragmentManager.getBackStackEntryCount() != 0)
{
fragmentManager.popBackStackImmediate();
} else
finish();
}
});
// Creating The Toolbar and setting it as the Toolbar for the activity
toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
adapter = new HomeViewPagerAdapter(getSupportFragmentManager(), Titles, Numboftabs);
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
// Assiging the Sliding Tab Layout View
tabs = (SlidingTabLayout) findViewById(R.id.tabs);
tabs.setDistributeEvenly(true); // To make the Tabs Fixed set this true, This makes the tabs Space Evenly in Available width

Now, we need to create the adapter for all the contents, as given below:

public class HomeViewPagerAdapter extends FragmentStatePagerAdapter
{
CharSequence Titles[]; // This will Store the Titles of the Tabs which are Going to be passed when ViewPagerAdapter is created
int NumbOfTabs; // Store the number of tabs, this will also be passed when the ViewPagerAdapter is created
// Build a Constructor and assign the passed Values to appropriate values in the class
public HomeViewPagerAdapter(FragmentManager fm, CharSequence mTitles[], int mNumbOfTabsumb)
{
super(fm);
this.Titles = mTitles;
this.NumbOfTabs = mNumbOfTabsumb;
}
//This method returns the fragment for the every position in the View Pager
@Override
public Fragment getItem(int position)
{
if (position == 0) // if the position is 0 we are returning the First tab
{
FragmentOne healthFragment = new FragmentOne();
return healthFragment;
} else if (position == 1) // if the position is 0 we are returning the First tab
{
FragmentTwo appointmentFragment = new FragmentTwo();
return appointmentFragment;
} else if (position == 2) // if the position is 0 we are returning the First tab
{
FragmentThree favourateFragment = new FragmentThree();
return favourateFragment;
} else // As we are having 2 tabs if the position is now 0 it must be 1 so we are returning second tab
{
FragmentFour messagesFragment = new FragmentFour();
return messagesFragment;
}
}
// This method return the titles for the Tabs in the Tab Strip
@Override
public CharSequence getPageTitle(int position)
{
return Titles[position];
}
// This method return the Number of tabs for the tabs Strip
@Override
public int getCount()
{
return NumbOfTabs;
}