63 votes

Couleur de la ligne inférieure de l'onglet actuel TabWidget

J'ai un TabWidget pour lequel j'ai activé et défini l'option stripLeft y stripRight ...

mTabHost.getTabWidget().setStripEnabled(true);
mTabHost.getTabWidget().setRightStripDrawable(R.drawable.redline);
mTabHost.getTabWidget().setLeftStripDrawable(R.drawable.redline);

Comme vous pouvez le voir dans l'image ci-dessous, cela ne change pas la couleur de la ligne inférieure de l'onglet actuellement sélectionné (TAB 2).

enter image description here

Comment puis-je changer la couleur de la ligne inférieure de l'onglet actuellement sélectionné, qui est par défaut bleue pour le moment ? (Je suppose que la couleur bleue est définie dans le fichier de configuration par défaut. AppTheme style dans styles.xml .)

J'ai regardé este réponse mais il ne dit pas comment changer la couleur...

77voto

MCeley Points 5753

La couleur de l'indicateur d'onglet est définie par un sélecteur drawable qui peut être trouvé aquí et ressemble à ceci :

<!-- AOSP copyright notice can be found at the above link -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
</selector>

Les objets à dessiner que le sélecteur utilise sont tous colorés en bleu clair. Vous pouvez remplacer ces éléments par vos propres versions recolorées. Les originaux ressemblent à ceci (les originaux sont petits, liens inclus) :

Vous voudrez copier le sélecteur ci-dessus dans votre propre projet, avec les objets à dessiner. Ensuite, vous devez recolorer les éléments à dessiner de la couleur de votre choix. Ensuite, vous voudrez définir votre sélecteur comme arrière-plan pour vos indicateurs de tabulation. Vous pouvez le faire comme suit (après avoir configuré vos onglets) :

TabHost host = (TabHost)view.findViewById(R.id.tab_host);
TabWidget widget = host.getTabWidget();
for(int i = 0; i < widget.getChildCount(); i++) {
    View v = widget.getChildAt(i);

    // Look for the title view to ensure this is an indicator and not a divider.
    TextView tv = (TextView)v.findViewById(android.R.id.title);
    if(tv == null) {
        continue;
    }
    v.setBackgroundResource(R.drawable.your_tab_selector_drawable);
}

Il existe peut-être un moyen plus simple de le faire en définissant votre propre disposition d'indicateur de client avec un sélecteur d'arrière-plan, mais c'est ce qui a fonctionné le mieux pour moi.

0 votes

Hey @MCeley merci pour votre réponse. J'essaye aussi de faire fonctionner ceci en ce moment et en ce qui concerne le tab_unselected_holo, tab_selected_holo etc, ce sont tous des pngs donc pour les remplacer je vais devoir faire les miens avec des couleurs différentes, mais je ne connais pas la taille des pngs par défaut et je ne sais pas s'ils fonctionnent bien.

0 votes

Il suffit de télécharger les images dont le lien figure dans mon article et de les utiliser.

0 votes

Pouvez-vous faire cela sans tableaux, mais avec des couleurs à la place ? J'ai l'impression que de cette façon, il serait beaucoup plus facile de modifier le thème si je le voulais, ou bien j'ai raté quelque chose ?

23voto

Nidhi Points 669

Vous pouvez utiliser app:tabIndicatorColor à cette fin. Il modifiera la couleur de la ligne de l'indicateur de l'onglet sélectionné en fonction de vos besoins.

<android.support.design.widget.TabLayout
                    android:id="@+id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabIndicatorColor="@android:color/white"
                    app:tabMode="fixed" />

12voto

Basim Sherif Points 2774

C'est ainsi que j'ai changé mes onglets,

private void changetabs(TabWidget tabWidget) {
    // Change background
    for(int i=0; i < tabWidget.getChildCount(); i++)
        tabWidget.getChildAt(i).setBackgroundResource(R.drawable.tab_selector);
}

et mon tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

<!-- Pressed -->
<!--    Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

<!--    Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

J'espère que cela aidera quelqu'un.

5 votes

Quand changetabs sera-t-il appelé ?

10voto

Ash Points 588

Au cas où quelqu'un tomberait dessus, il existe un outil en ligne permettant de construire rapidement les éléments à dessiner (9 patchs) pour les onglets. Il suffit de sélectionner la couleur et d'appuyer sur le bouton Voilà ...

Merci à Jeff Gilfelt


Le générateur de style de barre d'action Android vous permet de créer facilement un style de barre d'action personnalisé simple, attrayant et homogène pour votre application Android. Il génère toutes les ressources nécessaires à la création de neuf patchs, ainsi que les éléments dessinables et les styles XML associés, que vous pouvez copier directement dans votre projet.

http://jgilfelt.github.io/Android-actionbarstylegenerator/

0 votes

C'est de loin la façon la plus simple de procéder. MERCI JEFF ! :D

0 votes

Super ! Vraiment un moyen facile de changer la couleur de la ligne inférieure du tabwidget.

0 votes

J'ai essayé d'utiliser cette fonction, mais elle ne modifie pas les couleurs des onglets, seulement celles de la barre d'onglets ; avez-vous des suggestions ?

6voto

Alexey O. Points 210

Vous pouvez utiliser un filtre,
Ceci sera appliqué à la région qui n'est pas transparente.

tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).getBackground().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY);

Une seule ligne de code - pas besoin de changer d'état.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X