Wie zeige ich einen Anzeige-Tabulator entlang des Viewpagers?

Question

Ich möchte einen Tabindicator wie im Bild unten zeigen.

ich viewpager verwende. Ich habe TabLayout bereits mit Viewpager ausprobiert, in dem wir nur die Farbe und Höhe der Tab-Anzeige anpassen können. Wie kann ich das umsetzen?

Answer 1

wenn seleted '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> 

wenn sie nicht ausgewählt 'tab_unselected'

<?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> 

jetzt, wenn state_presses wahr ist oder nicht 'Tab'

<?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> 

jetzt in tablayout

<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"/>