Comment changer la couleur d'arrière-plan d'un onglet lors de l'utilisation de TabLayout?

119

Ceci est mon code dans l'activité principale

public class FilterActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_filter);

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    PageAdapter pageAdapter = new PageAdapter(getSupportFragmentManager(), FilterActivity.this);
    viewPager.setAdapter(pageAdapter);

    // Give the TabLayout the ViewPager
    final TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);



  }
}

Et c'est mon code dans le XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/app_bar"
        layout="@layout/app_bar">
    </include>

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="fill_parent"
        style="@style/MyCustomTabLayout"
        android:layout_height="48dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

Je souhaite modifier la couleur d'arrière-plan d'un onglet lorsqu'il est sélectionné

Joël Lara
la source

Réponses:

285

Ce qui a finalement fonctionné pour moi est similaire à ce que @ 如果 我 是 DJ a suggéré, mais le tabBackgrounddevrait être dans le layoutfichier et non dans le style, donc ça ressemble à:

res/layout/somefile.xml:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

et le sélecteur res/drawable/tab_color_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>
Tako
la source
2
Vous pouvez également ajouter une valeur de couleur à cet attribut: ex: app: tabBackground: @ color / colorAccent
Val Martinez
Merci pour la solution. Cependant, j'ai perdu l'effet d'entraînement par défaut avec lui.
Ken Ratanachai S.
4
Comment puis-je faire cela par programme?
TSR
1
@TSR, si vous n'avez pas besoin de couleurs différentes pour chaque onglet, vous pouvez le faire tabLayout.setBackgroundColor(colorInt). Si vous en avez besoin pour chaque onglet, vous pouvez extraire les enfants de votre TabLayout
karl
1
pour améliorer l'apparence, je pense que nous devrions également ajouter state_pressed : <item android: drawable = "@ color / tab_background_selected" android: state_pressed = "true" />
Think Twice Code Once
21

Vous pouvez essayer ceci:

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabBackground">@drawable/background</item>
</style>

Dans votre fichier xml d'arrière-plan:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@color/white" />
    <item android:drawable="@color/black" />
</selector>
如果 我 是 DJ
la source
et comment mettre en œuvre cela?
TSR
13

Ajouter un attribut dans xml:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

Et créez dans le dossier dessinable, tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>
Hai Rom
la source
5

Avez-vous essayé de vérifier le API ?

Vous devrez créer un écouteur pour l' OnTabSelectedListenerévénement, puis lorsqu'un utilisateur sélectionne un onglet, vous devez vérifier s'il est le bon, puis changer la couleur d'arrière-plan en utilisant tabLayout.setBackgroundColor(int color), ou si ce n'est pas le bon onglet, assurez-vous de revenir au couleur normale à nouveau avec la même méthode.

sorifiend
la source
Oui, j'ai essayé cela, mais tabLayout change la couleur du widget onglet complet, et je ne trouve pas de méthode sur tabLayout.Tab qui ne change que la couleur de l'onglet et les autres onglets restent avec la même couleur.
Joel Lara du
Je ne suis pas sûr à 100% de ce que vous recherchez. Si vous ne voulez colorer que le corps d'un onglet, vous pouvez ajouter un conteneur / une vue à l'intérieur de cet onglet, alors vous devriez pouvoir définir la couleur d'arrière-plan du conteneur / de la vue dans le XML comme d'habitude, par exemple, ce qui suit définira l'arrière-plan to redandroid:background=FF0000
sorifiend
Ces autres questions / réponses peuvent vous aider: stackoverflow.com/questions/30904138/... et stackoverflow.com/a/30755351/1270000
sorifiend le
3

Vous pouvez l'avoir dans le xml.

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabTextColor="@color/colorGray"
        app:tabSelectedTextColor="@color/colorWhite"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
XurajB
la source
2

Comme j'ai trouvé l'option la meilleure et la plus appropriée pour moi et cela fonctionnera également avec l'animation.

Vous pouvez utiliser indicator comme arrière-plan.

Vous pouvez définir app:tabIndicatorGravity="stretch" attribut à utiliser comme arrière-plan.

Exemple:

   <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorGravity="stretch"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/colorAccent">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chef" />


        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="User" />

    </android.support.design.widget.TabLayout>

J'espère que cela vous aidera.

Pratik Butani
la source
Cela prend automatiquement la couleur d'accent. Comment lui donner une couleur différente sans changer la couleur d'accentuation. merci
MindRoasterMir
1
Vous pouvez utiliser app:tabIndicatorColor@MindRoasterMir
Pratik Butani
1

Vous pouvez changer la couleur d'arrière-plan ou d'ondulation de chaque onglet comme ceci:

    //set ripple color for each tab
    for(int n = 0; n < mTabLayout.getTabCount(); n++){

        View tab = ((ViewGroup)mTabLayout.getChildAt(0)).getChildAt(n);

        if(tab != null && tab.getBackground() instanceof RippleDrawable){
            RippleDrawable rippleDrawable = (RippleDrawable)tab.getBackground();
            if (rippleDrawable != null) {
                rippleDrawable.setColor(ColorStateList.valueOf(rippleColor));
            }
        }
    }
José Maurício
la source
1

Après quelques déconner, c'est ainsi que j'ai obtenu le look souhaité (au moins dans l'émulateur) et cela conserve l'effet d'entraînement.

mise en page avec onglet sélecteur avec argument de couleur

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_selector"
    app:tabIconTint="@drawable/tab_selector"
    app:tabIconTintMode="src_atop"
    app:tabTextColor="@drawable/tab_selector" />

Et le @drawable/tab_selector:

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

FYI: C'est ce que l'émulateur a montré avant d'ajouter l' colorargument à @drawable/tab_selector:

mise en page des onglets avec sélecteur d'onglets sans argument de couleur

rexxar
la source
0

Vous pouvez changer la couleur d'arrière-plan de l'onglet par cet attribut

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
'android:background="@color/primary_color"/>'
M_Owais
la source
0

L'un des moyens que j'ai pu trouver consiste à utiliser l'indicateur d'onglet comme celui-ci:

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@color/normal_unselected_color"
    app:tabIndicatorColor="@color/selected_color"
    app:tabIndicatorGravity="center"
    app:tabIndicatorHeight="150dp"
    app:tabSelectedTextColor="@color/selected_text_color"
    app:tabTextColor="@color/unselected_text_color">

    ..... tab items here .....

</com.google.android.material.tabs.TabLayout>

L'astuce consiste à:

  • Aligner l'indicateur de tabulation au centre
  • Faites en sorte que la hauteur de l'indicateur soit suffisamment grande pour qu'elle recouvre toute la languette

Cela prend également en charge l'animation fluide lors du changement d'onglet

Anubhab Maji
la source
-2

Une des solutions les plus simples consiste à changer colorPrimary à partir du fichier colors.xml.

Ahmad Sadiq
la source