Android – Material Design Tutorial -5 ( TabLayout part 1 )

Android Design library has brought a number of important material design components to all android 2.1 and higher devices like navigation drawer,  snackbar, tab layout , floating labels,floating action button etc .

In this tutorial , we will create one simple application to understand how to implement material tabs in android.

1. Create one project on Android Studio with an activity MainActivity and activity_main.xml as its layout.

2. Change styles.xml to use AppCompat NoActionBar theme as :

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

3. Change activity_main.xml :

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:title="@string/app_name"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

4. Create One Fragment FragmentOne with layout fragment_one.xml

public class FragmentOne extends Fragment {


    public FragmentOne() {
        // empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_one, container, false);
    }

}

 

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="@color/fragmentOneBack"
    android:layout_height="match_parent">

</ScrollView>

Similarly create seven more fragments as FragmentTwo, FragmentThree,FragmentFour,FragmentFive…etc.

5. Update your colors.xml as below and use different colours on each fragment’s xml files .

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="fragmentOneBack">#4FC3F7</color>
    <color name="fragmentTwoBack">#DCE775</color>
    <color name="fragmentThreeBack">#90A4AE</color>
    <color name="fragmentFourBack">#61a745</color>
    <color name="fragmentFiveBack">#ba68c8</color>
    <color name="fragmentSixBack">#e57373</color>
    <color name="fragmentSevenBack">#ff7043</color>
    <color name="fragmentEightBack">#aed581</color>
</resources>

6. Update your MainActivity :

  • Create one adapter for ViewPager
  • Add fragments to the adapter using addFragment() method .
  • addFragment()method inside the adapter will add the fragment to an ArrayList fragmentList and name of the fragment to a different ArrayList fragmentTitleList
  • set up the tablayout with viewpager using tabLayout.setupWithViewPager(viewPager)
public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);

        //create one adapter , add fragments and set the adapter with viewpager
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new FragmentOne(), "one");
        adapter.addFragment(new FragmentTwo(), "two");
        adapter.addFragment(new FragmentThree(), "three");
        adapter.addFragment(new FragmentFour(), "four");
        adapter.addFragment(new FragmentFive(), "five");
        adapter.addFragment(new FragmentSix(), "six");
        adapter.addFragment(new FragmentSeven(), "seven");
        adapter.addFragment(new FragmentEight(), "eight");
        viewPager.setAdapter(adapter);

        //setup tab layout with viewpager
        tabLayout.setupWithViewPager(viewPager);

    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> fragmentList = new ArrayList<>();
        private final List<String> fragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            fragmentList.add(fragment);
            fragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return fragmentTitleList.get(position);
        }
    }
}

Run this application , result should be look like as below :

android-material-design-tablayout1

You can clone this project from here .

In our next tutorial, we will discuss about different types of customization that can be done with tab layout.

Leave a Reply