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,