Viewpagerに円タブインジケータを表示するにはどうすればいいですか？

Question

私は下のイメージのようにtabindicatorを表示したいと思います。

私はviewpagerを使用しています。私は既にTabLayoutをviewpagerで試してみました。ここではタブインジケータの色と高さのみを調整できます。どのように私はこれを実装することができます。

Answer 1

選択されていないときstate_pressesが、今では 'タブ'

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 


    <item android:drawable="@drawable/tab_selected" 
      android:state_selected="true"/> 


    <item android:drawable="@drawable/tab_unseleted"/> 



</selector> 

真であるか、ないとき

今

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 


    <item> 
     <shape 
      android:shape="ring" 
      android:useLevel="false" 
      android:thickness="4dp" 
      android:innerRadius="0dp"> 
      <solid android:color="#3b000000"/> 
     </shape> 
    </item> 



</selector> 

'をtab_unselected' 'tab_selected.xml'

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 

    <item> 
     <shape 
      android:shape="ring" 
      android:useLevel="false" 
      android:thickness="4dp" 
      android:innerRadius="0dp"> 
      <solid android:color="#000"/> 
     </shape> 
    </item> 

</selector> 

をseletedタブレイアウト

<android.support.design.widget.TabLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id="@+id/tablayout" 
    android:layout_alignParentBottom="true" 
    app:tabIndicatorHeight="0dp" 
    app:tabGravity="center" 
    app:tabBackground="@drawable/tab"/>