web-dev-qa-db-fra.com

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

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 ceci 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 veux changer la couleur de fond d'un onglet quand il est sélectionné

androidandroid-tabsandroid-tablayout
87
Joel Lara

Ce qui a finalement fonctionné pour moi est similaire à ce que @ 如果 我 DJ a suggéré, mais la variable tabBackground devrait figurer dans le fichier layout et pas à l'intérieur de la style;

res/layout/somefile.xml:

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

et le sélecteurres/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>
227
Tako

Vous pouvez essayer ceci:

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

Dans votre fichier XML en 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>
19
如果我是DJ

Ajouter un attribut en xml:

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

Et créez dans un dossier pouvant être dessiné, onglet couleur

<?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>
11
Hai Rom

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

Vous devrez créer un écouteur pour l'événement OnTabSelectedListener . Lorsqu'un utilisateur sélectionne un onglet, vous devez vérifier s'il est correct, puis modifier la couleur d'arrière-plan à l'aide de tabLayout.setBackgroundColor(int color) ou si ce n'est pas l'onglet approprié Assurez-vous de revenir à la couleur normale avec la même méthode.

3
sorifiend

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

Comme j'ai trouvé la meilleure option convenable pour moi et cela fonctionnera aussi avec l'animation.

Vous pouvez utiliser indicator lui-même comme arrière-plan.

Vous pouvez définirapp: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 ça vous aidera.

0
Pratik Butani

Vous pouvez changer la couleur de fond 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"/>'
0
Owais

Vous pouvez changer la couleur de fond 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));
            }
        }
    }
0
José Maurício