Post
Ask Question

Sliding Tab In Android

Introduction

 
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:
  1. <LinearLayout  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"  
  4. android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"  
  5. android:paddingRight="@dimen/activity_horizontal_margin"  
  6. android:paddingTop="@dimen/activity_vertical_margin"  
  7. android:orientation="vertical"  
  8. android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">  
  9.     <include  
  10. android:id="@+id/tool_bar"  
  11. layout="@layout/tool_bar"  
  12. android:layout_height="wrap_content"  
  13. android:layout_width="match_parent"  
  14. />  
  15.     <techniche.com.slidingtabs.helper.SlidingTabLayout  
  16. android:id="@+id/tabs"  
  17. android:layout_width="match_parent"  
  18. android:layout_height="wrap_content"  
  19. android:elevation="2dp"  
  20. android:background="@color/sub_title_bg"/>  
  21.     <android.support.v4.view.ViewPager  
  22. android:id="@+id/pager"  
  23. android:layout_height="match_parent"  
  24. android:layout_width="match_parent"  
  25. android:layout_weight="1"  
  26. ></android.support.v4.view.ViewPager>  
  27. </LinearLayout>  
Tool_bar.xml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <android.support.v7.widget.Toolbar  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4. android:layout_height="wrap_content"  
  5. android:layout_width="match_parent"  
  6. android:elevation="0dp"  
  7. android:contentInsetLeft="5dp"  
  8. android:contentInsetStart="5dp"  
  9. app:contentInsetLeft="5dp"  
  10. app:contentInsetStart="5dp"  
  11. android:contentInsetRight="5dp"  
  12. android:contentInsetEnd="5dp"  
  13. app:contentInsetRight="5dp"  
  14. app:contentInsetEnd="5dp"  
  15.     xmlns:android="http://schemas.android.com/apk/res/android" >  
  16.     <RelativeLayout  
  17. android:layout_width="match_parent"  
  18. android:layout_height="wrap_content" >  
  19.         <TextView  
  20. android:id="@+id/menuLeft"  
  21. android:layout_width="wrap_content"  
  22. android:layout_height="wrap_content"  
  23. android:layout_alignParentLeft="true"  
  24. android:layout_centerHorizontal="true"  
  25. android:layout_centerVertical="true"  
  26. android:layout_alignParentStart="true"  
  27. android:textColor="@color/white"  
  28. android:clickable="true" />  
  29.         <TextView  
  30. android:id="@+id/toolbar_title"  
  31. android:layout_width="wrap_content"  
  32. android:layout_height="wrap_content"  
  33. android:layout_centerHorizontal="true"  
  34. android:layout_centerVertical="true"  
  35. android:text="@string/app_name"  
  36. android:textColor="@color/white"/>  
  37.     </RelativeLayout>  
  38. </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:
  1. <style name="HomeTheme" parent="Theme.AppCompat.Light.DarkActionBar">  
  2.     <!-- Customize your theme here. -->  
  3.     <item name="colorPrimary">@color/colorPrimary</item>  
  4.     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
  5.     <item name="colorAccent">@color/colorAccent</item>  
  6.     <item name="windowActionBar">false</item>  
  7.     <item name="windowNoTitle">true</item>  
  8. </style>  
Now, bind the controls in the Java file, as given below:
  1. TextView backButton = (TextView) findViewById(R.id.menuLeft);  
  2. TextView titleText = (TextView) findViewById(R.id.toolbar_title);  
  3. backButton.setOnClickListener(new View.OnClickListener()  
  4. {  
  5.     @Override  
  6.     public void onClick(View view)  
  7.     {  
  8.         final FragmentManager fragmentManager = getFragmentManager();  
  9.         if (fragmentManager.getBackStackEntryCount() != 0)  
  10.         {  
  11.             fragmentManager.popBackStackImmediate();  
  12.         } else  
  13.             finish();  
  14.     }  
  15. });  
  16. // Creating The Toolbar and setting it as the Toolbar for the activity  
  17. toolbar = (Toolbar) findViewById(R.id.tool_bar);  
  18. setSupportActionBar(toolbar);  
  19. adapter = new HomeViewPagerAdapter(getSupportFragmentManager(), Titles, Numboftabs);  
  20. pager = (ViewPager) findViewById(R.id.pager);  
  21. pager.setAdapter(adapter);  
  22. // Assiging the Sliding Tab Layout View  
  23. tabs = (SlidingTabLayout) findViewById(R.id.tabs);  
  24. 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:
  1. public class HomeViewPagerAdapter extends FragmentStatePagerAdapter  
  2. {  
  3.     CharSequence Titles[]; // This will Store the Titles of the Tabs which are Going to be passed when ViewPagerAdapter is created  
  4.     int NumbOfTabs; // Store the number of tabs, this will also be passed when the ViewPagerAdapter is created  
  5.     // Build a Constructor and assign the passed Values to appropriate values in the class  
  6.     public HomeViewPagerAdapter(FragmentManager fm, CharSequence mTitles[], int mNumbOfTabsumb)  
  7.         {  
  8.             super(fm);  
  9.             this.Titles = mTitles;  
  10.             this.NumbOfTabs = mNumbOfTabsumb;  
  11.         }  
  12.         //This method returns the fragment for the every position in the View Pager  
  13.     @Override  
  14.     public Fragment getItem(int position)  
  15.     {  
  16.             if (position == 0) // if the position is 0 we are returning the First tab  
  17.             {  
  18.                 FragmentOne healthFragment = new FragmentOne();  
  19.                 return healthFragment;  
  20.             } else if (position == 1) // if the position is 0 we are returning the First tab  
  21.             {  
  22.                 FragmentTwo appointmentFragment = new FragmentTwo();  
  23.                 return appointmentFragment;  
  24.             } else if (position == 2) // if the position is 0 we are returning the First tab  
  25.             {  
  26.                 FragmentThree favourateFragment = new FragmentThree();  
  27.                 return favourateFragment;  
  28.             } else // As we are having 2 tabs if the position is now 0 it must be 1 so we are returning second tab  
  29.             {  
  30.                 FragmentFour messagesFragment = new FragmentFour();  
  31.                 return messagesFragment;  
  32.             }  
  33.         }  
  34.         // This method return the titles for the Tabs in the Tab Strip  
  35.     @Override  
  36.     public CharSequence getPageTitle(int position)  
  37.         {  
  38.             return Titles[position];  
  39.         }  
  40.         // This method return the Number of tabs for the tabs Strip  
  41.     @Override  
  42.     public int getCount()  
  43.     {  
  44.         return NumbOfTabs;  
  45.     }  
Now, create four fragments to show on selecting each tab, as shown below:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4. android:orientation="vertical" android:layout_width="match_parent"  
  5. android:layout_height="match_parent">  
  6.     <TextView  
  7. android:layout_width="wrap_content"  
  8. android:text="Fragment Two"  
  9. android:layout_height="wrap_content" />  
  10. </LinearLayout>  
See the screenshots also,
 
 


Similar Articles