Now many Android mobile terminals will use the combination of TabLayout+ViewPager. The native only has horizontal layout design. Here is a vertical tablayout control.


I use AS, just introduce compile 'q.rorbin: verticaltablelayout: 1.2.5' into gradle

Find this class q.rorbin.verticaltablayout.VerticalTabLayout

setTabHeight set TAB height
Set indicator color to set the indicator color of the selected TAB (my one is white in the above figure)
setupWithViewPager binding ViewPager
getTabAt (int) get the first few tabs get a custom class TabView inherits FrameLayout

Methods in the API alone may not meet our needs. You can create a class to inherit verticaltablelayout

For example, if I want to implement the white ellipse centered and blue right indicating shape, I need to override setIndicatorGravity() method

    protected void setIndicatorGravity () {

        switch (mIndicatorGravity) {
            case Gravity.LEFT:
                mIndicatorX = 0;
                if ( mLastWidth != 0 ) mIndicatorWidth = mLastWidth;
                setPadding(mIndicatorWidth, 0, 0, 0);
                break;

            case Gravity.RIGHT:
                if ( mLastWidth != 0 ) mIndicatorWidth = mLastWidth;
                setPadding(0, 0, mIndicatorWidth, 0);
                break;

            case Gravity.FILL:
                mIndicatorX = 0;
                setPadding(0, 0, 0, 0);
                break;

            case Gravity.CENTER_HORIZONTAL:
                setPadding(0, 0, 0, 0);
                break;
        }

        post(new Runnable() {
            @Override
            public void run () {

                switch (mIndicatorGravity) {
                    case Gravity.RIGHT:
                        mIndicatorX = getWidth() - mIndicatorWidth;
                        break;

                    case Gravity.FILL:
                        mLastWidth = mIndicatorWidth;
                        mIndicatorWidth = getWidth();
                        break;

                    case Gravity.CENTER_HORIZONTAL:
                        mIndicatorX = (getWidth() - mIndicatorWidth) / 2;
                        break;
                }

                invalidate();
            }
        });
    }

When adding tabView in addTab (TabView tabView), change the Indicator when the defocus changes

@Override
public void addTab (TabView tabView) {

    if ( tabView != null ) {

        tabView.setBackground(null);
        addTabWithMode(tabView);

        tabView.setOnFocusChangeListener(new OnFocusChangeListener() {
            @Override
            public void onFocusChange (View v, boolean hasFocus) {

                int position = mTabStrip.indexOfChild(v);

                if ( hasFocus ) {
                    chgIndicator(true);
                    setTabSelected(position);
                }

                if ( null != mTabFocusChangeListener ) {
                    mTabFocusChangeListener.onFocusChange(v, hasFocus, position);
                }
            }
        });

                    . . . 

    } else {
        throw new IllegalStateException("tabview can't be null");
    }
}

public void chgIndicator (boolean hasFocus) {
    mColorIndicator = hasFocus ? Color.WHITE : ComUtils.getClr(R.color.blue_0099e5);
    mIndicatorWidth = hasFocus ? ViewUtils.getCorrectWidth(438) : ViewUtils.getCorrectWidth(6);
    mIndicatorCorners = hasFocus ? ViewUtils.getCorrectWidth(48) : 0;
    setIndicatorGravity(hasFocus ? Gravity.CENTER_HORIZONTAL : Gravity.RIGHT);
}

I'm almost done with the introduction. Don't spray

In addition, a small problem, which I was asked by the test in development
When entering this page for the first time, switching the TAB will flash once, and then switching the blue background will not, but the re entering page will repeat
Later, it was found that when TabView was initialized, it would set a default background for it, setDefaultBackground();

public LoginTabView (Context context) {
    super(context);
    mContext = context;
    mTabIcon = new TabIcon.Builder().build();
    mTabTitle = new TabTitle.Builder().build();
    mTabBadge = new TabBadge.Builder().build();
    initView();
    int[] attrs;
    if ( Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ) {
        attrs = new int[]{android.R.attr.selectableItemBackgroundBorderless};
    } else {
        attrs = new int[]{android.R.attr.selectableItemBackground};
    }
    TypedArray a = mContext.getTheme().obtainStyledAttributes(attrs);
    mDefaultBackground = a.getDrawable(0);
    a.recycle();
    setDefaultBackground();
}

Just remove this section, or tabView.setBackground(null) in addTabView; I use the latter for security