The story or tablayout the master, at the time of making the official demo https://github.com/googlesamples/android-media-controller, rendering has a pointer effect, so I ordered in to see code, Hand base changed a little something found a little problem

1. Official Demo ViewPage indicator rendering

Code address github.com/googlesampl…

The implementation principle is also very simple to use tabLayout, the core code snippet is the following code binding tabLayout and ViewPager

 final TabLayout pageIndicator = findViewById(R.id.page_indicator);
        pageIndicator.setupWithViewPager(mViewPager);
Copy the code
 <android.support.design.widget.TabLayout
            android:id="@+id/page_indicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@android:color/transparent"
            app:tabBackground="@drawable/tab_indicator"
            app:tabGravity="center"
            app:tabIndicatorHeight="0dp" />
Copy the code

The tabBackground property is the style of the indicator for a single circle. The drawable/tab_indicator code is shown below

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true">
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="3dp"
            android:useLevel="false">
                <solid android:color="@color/colorAccent" />
        </shape>
    </item>

    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="3dp"
            android:useLevel="false">
            <solid android:color="@color/colorInactive" />
        </shape>
    </item>
</selector>
Copy the code

This code implements a simple viewpager indicator that is centered at the bottom of the interface, changing it if you want the circle selected to be larger

 <item android:state_selected="true">
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="Change it to whatever size you want." 
            android:useLevel="false">
                <solid android:color="@color/colorAccent" />
        </shape>
    </item>
Copy the code

I changed 10DP here and it looks like this

2. The point is, who limited my width!

After shaking hands, the thickness property value of the selected circle is changed to 100dp, and the result is very surprising. The effect picture is as follows

setPaddingRelative
mTabPaddingStart
mTabPaddingEnd
mTabPaddingStart
mTabPaddingEnd

We definitely don’t want the system default to interfere with the Android: Thickness size of our indicator, so we recommend adding it to the XML of the TabLayout declaration

app:tabPaddingStart="Android: Thickness value /2"
app:tabPaddingEnd="Android: Thickness value /2"
Copy the code

Of course, the current android: Thickness value /2 is just for reference. You can set it by yourself