Comment changer le style de l'indicateur de tabulation (par défaut est un soulignement) de l'activité des onglets dans Android?

Question

please click here to view the picture

L'image ci-dessus est une capture d'écran provenant de l'application SYMPTOMATE. Je veux créer une activité à onglets identique à celle montrée dans cette image. Lorsque les onglets sont glissés, chaque cercle est surligné en conséquence. veuillez suggérer un moyen de personnaliser les indicateurs de tabulation.

Answer 1

Pour votre TabLayout personnalisé, vous devez écrire des ressources personnalisées. En particulier, vous avez besoin de ces drawables.

1. indicateur Tab état par défaut (indicator_default.xml)

   <?xml version="1.0" encoding="utf-8"?> 
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
   <item> 
       <shape 
        android:innerRadius="0dp" 
        android:shape="ring" 
        android:thickness="5dp" 
        android:useLevel="false"> 
        <solid android:color="@android:color/darker_gray"/> 
       </shape> 
   

2. indicateur Tab état sélectionné (indicator_selected.xml)

   <?xml version="1.0" encoding="utf-8"?> 
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
   <item> 
       <shape 
        android:innerRadius="0dp" 
        android:shape="ring" 
        android:thickness="8dp" 
        android:useLevel="false"> 
        <solid android:color="@color/colorPrimary"/> 
       </shape> 
   </item> 
   

3. Sélecteur indicateur de tabulation (indicator_selector.xml)

   <?xml version="1.0" encoding="utf-8"?> 
   <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
   
       <item android:drawable="@drawable/indicator_selected" 
        android:state_selected="true"/> 
   
       <item android:drawable="@drawable/indicator_default"/> 
   </selector> 
   

Enfin, vous devez ajouter votre TablLayout dans votre mise en page définissant l'arrière-plan de l'onglet ci-dessous

<android.support.design.widget.TabLayout 
    android:id="@+id/tablayout" 
    android:layout_width="match_parent" 
    android:layout_height=" 
    app:tabBackground="@drawable/tab_selector" 
    app:tabGravity="center"/>