This blog is about adding custom Layout to TabLayout.

Here we start.

1. Create Project.

2. Open Gradle file of the project.

3. Add design dependencies to the gradle.

 compile 'com.android.support:design:24.0.0'

4. Add TabLayout to XML Layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        >

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


    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white" />
</RelativeLayout>

5. Open Activity Java Class.

6. Find instance variable of TabLayout and find from XML.

7.  Create Pager adapter which extends FragmentPagerAdapter.

public class TabsPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public TabsPagerAdapter(FragmentManager fm) {
        super(fm);

    }

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

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

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

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

8. Create TabFragment.

public class TabFragment extends Fragment {

    public TabFragment() {
        // Required empty public constructor
    }

    public static TabFragment newInstance() {
        TabFragment fragment = new TabFragment();
        return fragment;
    }

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

9. Create PagerAdapter instance.

TabsPagerAdapter adapter = new TabsPagerAdapter(getFragmentManager());

10. Add Fragment to Adapter.

  adapter.addFragment(TabFragment.newInstance(), "ONE");
        adapter.addFragment(TabFragment.newInstance(), "TWO");
        adapter.addFragment(TabFragment.newInstance(), "THREE");
        adapter.addFragment(TabFragment.newInstance(), "Four");

11. Set Adapter to ViewPager instance.

mViewPager.setAdapter(adapter);

12. set viewPager to TabLayout.

 tabs.setupWithViewPager(mViewPager);

13. get count of TabLayout Tabs.

int tabCount = tabs.getTabCount();

14.  Write below code to set CustomView to TabLayout's Tabs.

for (int i = 0; i < tabCount; i++) {
            TabLayout.Tab tab = tabs.getTabAt(i);
            View tabView = ((ViewGroup) tabs.getChildAt(0)).getChildAt(i);

            tabView.requestLayout();

            View view = LayoutInflater.from(this).inflate(R.layout.blue, null);
         
            tab.setCustomView(view);
            tab.setText(i + "");
        }

Happy Coding. :D