web-dev-qa-db-fra.com

Couleur de la ligne de fond de l'onglet actuel de l'onglet

J'ai un TabWidget pour lequel j'ai activé et défini les stripLeft et 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é (ONGLET 2).

enter image description here

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

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

androidandroid-tabs
62
neo108

La couleur de l'indicateur de tabulation est définie par un sélecteur qui peut être trouvé ici et qui 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 tirables que le sélecteur utilise sont tous colorés en bleu clair. Vous pouvez remplacer ces dessins avec vos propres versions recolored. Les originaux ressemblent à ceci (les originaux sont petits, les liens inclus):

Vous voudrez peut-être copier le sélecteur ci-dessus dans votre propre projet avec les éléments dessinables. Ensuite, vous voudrez recolorer les tirables à la couleur de votre choix. Ensuite, vous voudrez définir votre sélecteur comme arrière-plan pour vos indicateurs d'onglet. Vous pouvez le faire comme ceci (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);
}

Pour ce faire, il serait peut-être plus simple de définir votre propre présentation d'indicateur de client avec un sélecteur d'arrière-plan, mais c'est ce qui a fonctionné le plus facilement pour moi.

75
Michael Celey

Vous pouvez utiliser app: tabIndicatorColor à cette fin. La couleur de la ligne d'indicateur de l'onglet sélectionné sera modifiée 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" />
14
Nidhi

Voici comment 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 ça va aider quelqu'un.

12
Basim Sherif

En cas de problème, un outil en ligne permet de créer rapidement les éléments dessinables (9 correctifs) pour les onglets. Il suffit de sélectionner la couleur et appuyez sur le bouton Ici vous allez ...

Merci à Jeff Gilfelt

Le Générateur de styles de barre d'action Android vous permet de créer facilement un style de barre d'action personnalisée simple, attrayant et transparent pour votre application Android. Il générera les neuf corrigez les ressources, ainsi que les dessins et styles XML associés, que vous pouvez copier directement dans votre projet.

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

10
Ash

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 ligne de code - pas besoin de changer d'état.

5
Alexey O.

La couleur d'accent est utilisée par défaut comme couleur de tabulation active. Vous pouvez le définir/le modifier dans style.xml fichier:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">

    <item name="colorAccent">@color/myAccentColor</item>

</style>
4
dzikovskyy

Ma façon de résoudre ce problème consiste à utiliser setBackgroundResource. Tout d’abord, vous devez créer exactement le même fond

line_label_1_pressed.xml

<item Android:top="-6dp" Android:left="-6dp" Android:right="-6dp">
    <shape>
        <size Android:height="50dp"/>
        <solid Android:color="@Android:color/transparent"/>
        <stroke Android:color="@color/myColor" Android:width="6dp"/>
    </shape>
</item>

line_label_1.xml

<item>
    <shape>
        <solid Android:color="@Android:color/transparent" />
    </shape>
</item>

puis créez tab_selector.xml comme suit

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@drawable/line_label_1_pressed" Android:state_selected="true"/>
<item Android:drawable="@drawable/line_label_1"/>

puis setbackgroudResource en utilisant tab_selector.xml

<TextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="@drawable/tab_selector"
Android:gravity="center_horizontal|center_vertical" />
2
Ted_Liang

J'ai trouvé une autre solution, ouvrez styles.xml et changez une ligne:

res -> valeurs -> styles.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@Android:color/holo_orange_light</item> <!-- set the color in this line -->
    <item name="windowNoTitle">true</item>
</style>
0
skajar