Sample android material tabs with custom headers

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:padding="0dp"
              android:orientation="vertical"
              tools:context=".MainActivity">

    <!-- Will be used for rendering the different tab options -->
    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="72dp"
        style="@style/MyCustomTabLayout"
        />

    <!-- Will be used to page between the various fragments -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white"
        />

</LinearLayout>

CustomTabLayoutActivity.java

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

import roboguice.RoboGuice;
import roboguice.activity.RoboFragmentActivity;
import roboguice.inject.ContentView;
import roboguice.inject.InjectView;

/***
 * Activity with tab layout with custom tab header
 */
@ContentView(R.layout.activity_main)
public class CustomTabLayoutActivity extends RoboFragmentActivity {

    private static final String LOGID = "newtab";

    static {RoboGuice.setUseAnnotationDatabases(false);}

    @InjectView(R.id.viewpager)
    private ViewPager mViewPager;

    @InjectView(R.id.sliding_tabs)
    private TabLayout mTabLayout;

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

        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), CustomTabLayoutActivity.this, 3);
        mViewPager.setAdapter(adapter);
        //To scroll set
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        mTabLayout.setupWithViewPager(mViewPager);

        for(int i=0;i<mTabLayout.getTabCount();i++){
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setCustomView(adapter.getTabView(i));
        }

        //We use custom layout so we must assign respective tab and pager listener to each over
        mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));
        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

myfragment.xml

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

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn_show_snack"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="show snack"
        />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/edit_text_username_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/edit_text_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="enter username"
            />

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



    <android.support.design.widget.TextInputLayout
        android:id="@+id/edit_text_email_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/edit_text_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:hint="enter email"
            />

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

</LinearLayout>

MyFragmentPagerAdapter.java

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

/**
 * This class controls tabs creation, their titles and associated content
 */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private final int mPageCount;
    private Context mContext;

    public MyFragmentPagerAdapter(FragmentManager fm, Context context, int pageCount) {
        super(fm);
        this.mContext = context;
        this.mPageCount = pageCount;
    }

    @Override
    public int getCount() {
        return mPageCount;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "Page #" + position;
    }

    /**
     * In case we need a custom tab header layout
     * just add a tab icon creation method for convenience
     * @param position
     * @return
     */
    public View getTabView(int position){
        View v = LayoutInflater.from(mContext).inflate(R.layout.tab_indicator, null);

        TextView tv = (TextView) v.findViewById(R.id.tt);
        tv.setText("TAB ##" + position);

        return v;
    }
}

PageFragment.java

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TextInputLayout;
import android.support.v4.app.Fragment;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

/**
 * Fragment to be displayed as a tab
 */
public class PageFragment extends Fragment {
    public static final String ARG_PAGE = "ARG_PAGE";

    private static final String LOGID = "newtab";

    private int mPage;

    public static PageFragment newInstance(int page){
        Bundle bundle = new Bundle();
        bundle.putInt(ARG_PAGE, page);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(bundle);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        final View view = inflater.inflate(R.layout.myfragment, container, false);

        TextView mTextView = (TextView) view.findViewById(R.id.text);
        mTextView.setText("Fragment #" + mPage);

        Button mButtonShowSnack = (Button) view.findViewById(R.id.btn_show_snack);
        mButtonShowSnack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar
                        .make(view, "Hello", Snackbar.LENGTH_LONG)
                        .setAction("OK", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Log.d(LOGID, "OK pressed");
                            }
                        })
                        .show();
            }
        });

        final TextInputLayout til = (TextInputLayout) view.findViewById(R.id.edit_text_email_layout);
        til.setErrorEnabled(true);

        EditText editText = (EditText) view.findViewById(R.id.edit_text_email);
        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                til.setError(null);
                if(s.length() == 0){
                    til.setError("Email field cannot be empty");
                }
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

        return view;
    }
}

tab_indicator.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">

    <TextView
        android:id="@+id/tt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:paddingBottom="14dp"
        style="@style/MyCustomTabLayoutText"
        android:text="txt"
        />

    <ImageView
        android:id="@+id/ti"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/tt"
        android:src="@drawable/ic_search_white_24dp"
        android:layout_centerHorizontal="true"
        />

</RelativeLayout>