Android Material Design TabLayout With Icon

TabLayout provides a horizontal layout to display tabs. The Tabs inside the TabLayout is Scroll-able and  is also used to switch between different views .The design support library simplifies the process of Creating TabLayout  widget and  adding tabs to it . In this tutorial we will see how to create tab layout with icons .




Build Gradle


Add the design support library as dependencies to the build.gradle(Module:app) file.

file : build.gradle
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}

Color


Create a resource file in the res/values folder called colors.xml. Modify it as below:

file : colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#3F51B5</color>
    <color name="primary_dark">#303F9F</color>
    <color name="accent">#ffffff</color>
    <color name="fragment_bg">#e5e5e5</color>
</resources>

Style


Modify res/values/styles.xml as below:

file : styles.xml
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
    </style>
</resources>


XML Layout


Create a XML Layout file activity_main.xml in the res/layout . which contains Coordinate layout as parent view and isnide this add AppBarLayout and ViewPager.

  • AppBarLayout : The design library provides the AppBarLayout inside this view add Toolbar and TabLayout 
  • ViewPager :  The ViewPager will be used to enable horizontal paging between tabs.

file : 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">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.design.widget.CoordinatorLayout>


Fragment For Each Tab


Create a Fragment for each tab in tablayout .

file : people_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/fragment_bg">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="148dp"
        android:src="@drawable/ic_action_person" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:gravity="center"
        android:text="People"
        android:textSize="30sp" />

</RelativeLayout>

Create PeopleFragment and extend this class to Fragment and inflate this fragment with above defined xml layout .

file : PeopleFragment
package com.tutorialsbuzz.tablayoutdemo.TabFragments;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.tutorialsbuzz.tablayoutdemo.R;

public class PeopleFragment extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
                return inflater.inflate(R.layout.people_fragment, container, false);
    }
}


Similarly Create Two More Fragment for remaining two Tabs 


FragmentStatePagerAdapter


  • Create a ViewPagerAdapter Class and extend this class to FragmentStateViewPager .
  • Override the getItem ,getCount , getPageTitle methods of FragmentStateViewPager class .
  • Have a method addFragment which takes fragment object and title, inside this method we will create a list of fragment with it's title for each of the tabs .

file : ViewPagerAdapter.java
package com.tutorialsbuzz.tablayoutdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.ArrayList;
import java.util.List;

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

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

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

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

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

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }
}


MainActivity


  • Create a MainActivity class which extends Activity class 
  • Override the onCreate method inside this method set the content of this activity with above defined activity_main.xml layout .
  • Inside the setupViewPager method make a call to addFragment method on adapter object and then call setAdapter on ViewPager reference by passing the adapter object.
  • To Setting Icons for Tabs Tablayout  , get the refrence to tabs at each position and upon which call setIcon by passing the drawable resource id .

file : MainActivity.java
package com.tutorialsbuzz.tablayoutdemo;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import com.tutorialsbuzz.tablayoutdemo.TabFragments.PeopleFragment;
import com.tutorialsbuzz.tablayoutdemo.TabFragments.CallFragment;
import com.tutorialsbuzz.tablayoutdemo.TabFragments.GroupFragment;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;

    private int[] tabIcons = {
            R.drawable.ic_action_person,
            R.drawable.ic_action_group,
            R.drawable.ic_action_call
    };

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


        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        actionBar.setDisplayHomeAsUpEnabled(true);


        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();

    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new PeopleFragment(), "People");
        adapter.addFragment(new GroupFragment(), "Group");
        adapter.addFragment(new CallFragment(), "Calls");
        viewPager.setAdapter(adapter);
    }

    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }

}


5 comments:

chrisaparis said...

Where does all the data come from?

Suhas Bachewar said...

Here is found issue that after running demo user not able to view ToolBar & Tab.

I found solution for that just add line to viewPager in xml .

app:layout_behavior="@string/appbar_scrolling_view_behavior"

ngọc thạch nguyễn said...

It's not work, app run without tablayout, only fragment

ngọc thạch nguyễn said...

It's not work, app run without tablayout

Android RecyclerView Filter Animation - TutorialsBuzz said...

[…] Creating TabLayout is outside the scope of this tutorial , In the previous tutorial I have covered how to create TabLayout you can refer for it […]

Post a Comment