stepper_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
       xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/stepper_icon_color"/>
</shape>

stepper_icon_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/divider_gray_no_alpha" android:state_enabled="false"/>
    <item android:color="@color/colorAccent"/>
</selector>

stepper_text_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/divider_gray_no_alpha" android:state_enabled="false"/>
    <item android:color="@android:color/white"/>
</selector>

StepperTabLayout.java

package com.rockthevote.grommet.ui.misc;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;

import com.rockthevote.grommet.ui.views.StepperTabView;

public class StepperTabLayout extends TabLayout {

    private ViewPager viewPager;

    public StepperTabLayout(Context context) {
        super(context);
    }

    public StepperTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public StepperTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setupWithViewPager(@Nullable ViewPager viewPager) {
        this.viewPager = viewPager;
        super.setupWithViewPager(viewPager);
    }

    @Override
    public void addTab(@NonNull Tab tab, boolean setSelected) {
        int pos = getTabCount();

        tab.setCustomView(new StepperTabView(getContext())
                .setStepNumber(pos + 1)
                .setStepName(viewPager.getAdapter().getPageTitle(pos).toString())
                .showStepLine(pos + 1 != viewPager.getAdapter().getCount()));

        super.addTab(tab, setSelected);
    }


}

StepperTabView.java

package com.rockthevote.grommet.ui.views;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.TextView;

import com.rockthevote.grommet.R;

import butterknife.BindView;
import butterknife.ButterKnife;

public class StepperTabView extends FrameLayout {

    @BindView(R.id.step_number) TextView stepNumber;
    @BindView(R.id.step_name) TextView stepName;
    @BindView(R.id.step_line) View stepLine;

    public StepperTabView(Context context) {
        this(context, null);
    }

    public StepperTabView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public StepperTabView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        LayoutInflater.from(context).inflate(R.layout.tab_stepper, this);

        if (!isInEditMode()) {
            ButterKnife.bind(this);
        }

    }

    public StepperTabView setStepNumber(int num) {
        stepNumber.setText(String.valueOf(num));
        return this;
    }

    public StepperTabView setStepName(String name) {
        stepName.setText(name);
        return this;
    }

    /**
     * @param show boolean whether or not to show the step line, defaults to true
     */
    public StepperTabView showStepLine(boolean show) {
        stepLine.setVisibility(show ? View.VISIBLE : View.GONE);
        return this;
    }

    @Override
    public void setEnabled(boolean enabled) {
        stepNumber.setEnabled(enabled);
        stepName.setEnabled(enabled);
        super.setEnabled(enabled);
    }
}

tab_stepper.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"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@android:color/transparent"
              android:gravity="center_vertical"
              android:orientation="horizontal">

    <TextView
        android:id="@+id/step_number"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:background="@drawable/stepper_icon"
        android:gravity="center"
        tools:text="1"
        android:textColor="@android:color/white"/>

    <TextView
        android:id="@+id/step_name"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:gravity="center_vertical"
        android:paddingStart="@dimen/content_area_padding"
        tools:text="step 1"
        android:textColor="@color/stepper_text_color"
        tools:textColor="@android:color/black"/>

    <View
        android:id="@+id/step_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/white"
        tools:background="@android:color/black"
        android:layout_marginStart="@dimen/content_area_padding"/>

</LinearLayout>