Como mudo a cor de fundo de uma guia ao usar TabLayout?

119

Este é o meu código na atividade principal

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);



  }
}

E este é o meu código no 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>

Quero mudar a cor de fundo de uma guia quando estiver selecionada

Joel Lara
fonte

Respostas:

285

O que finalmente funcionou para mim é semelhante ao que @ 如果 我 是 DJ sugeriu, mas o tabBackgrounddeve estar no layoutarquivo e não dentro do style, por isso parece:

res/layout/somefile.xml:

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

e o seletor 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
fonte
2
Você também pode adicionar um valor de cor a esse atributo: isto é: app: tabBackground: @ color / colorAccent
Val Martinez
Obrigado pela solução. No entanto, perdi o efeito cascata padrão com ele.
Ken Ratanachai S.
4
Como posso fazer isso programaticamente?
TSR
1
@TSR, se você não precisa de cores diferentes para cada guia, você pode fazer tabLayout.setBackgroundColor(colorInt). Se precisar para cada guia, você pode extrair os filhos de seu TabLayout
karl
1
para melhorar a aparência, acho que também devemos adicionar state_pressed : <item android: drawable = "@ color / tab_background_selected" android: state_pressed = "true" />
Think Twice Code Once
21

Você pode tentar isto:

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

Em seu arquivo xml de fundo:

<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
fonte
e como implementar isso?
TSR
13

Adicionar atributo em xml:

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

E crie na pasta 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>
Hai Rom
fonte
5

Você já tentou verificar a API ?

Você precisará criar um ouvinte para o OnTabSelectedListenerevento, então, quando um usuário selecionar qualquer guia, você deve verificar se é a correta e, em seguida, alterar a cor de fundo usando tabLayout.setBackgroundColor(int color)ou, se não for a guia correta, certifique-se de voltar para o cor normal novamente com o mesmo método.

amigo
fonte
Sim, eu tentei isso, mas tabLayout muda a cor do widget da guia completa e não consigo encontrar um método em tabLayout.Tab que apenas altera a cor da guia e as outras guias permanecem com a mesma cor.
Joel Lara
Não estou 100% certo do que você está procurando. Se você deseja apenas colorir o corpo de uma guia, você pode adicionar um contêiner / visualização dentro dessa guia, então você deve ser capaz de definir a cor de fundo do contêiner / visualização no XML como normal, por exemplo o seguinte definirá o fundo para vermelhoandroid:background=FF0000
sorifiend
Estas outras perguntas / respostas podem ajudá-lo: stackoverflow.com/questions/30904138/… e stackoverflow.com/a/30755351/1270000
sorifiend
3

Você pode tê-lo no 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
fonte
2

Como achei a opção mais adequada para mim e funcionará com animação também.

Você pode usar indicator lo como pano de fundo.

Você pode definir app:tabIndicatorGravity="stretch" atributo para usar como plano de fundo.

Exemplo:

   <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>

Espero que ajude você.

Pratik Butani
fonte
Isso está tomando a cor de destaque automaticamente. Como dar uma cor diferente sem alterar a cor de destaque. obrigado
MindRoasterMir
1
Você pode usar app:tabIndicatorColor@MindRoasterMir
Pratik Butani
1

Você pode alterar o plano de fundo ou a cor ondulada de cada guia assim:

    //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
fonte
1

Depois de algumas bagunças, consegui o visual desejado (pelo menos no emulador) e manteve o efeito cascata.

layout de guia com seletor de guia com argumento de cor

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

E o @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>

Para sua informação: Isso é o que o emulador mostrou antes de eu adicionar o colorargumento para @drawable/tab_selector:

layout de guia com seletor de guia sem argumento de cor

rexxar
fonte
0

Você pode alterar a cor de fundo da guia por este atributo

<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
fonte
-2

Uma das soluções mais simples é alterar colorPrimary do arquivo colors.xml.

Ahmad Sadiq
fonte