¿Cómo cambio el color de fondo de una pestaña cuando uso TabLayout?

119

Este es mi código en la actividad 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);



  }
}

Y este es mi código en 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>

Quiero cambiar el color de fondo de una pestaña cuando está seleccionada

Joel Lara
fuente

Respuestas:

285

Lo que finalmente funcionó para mí es similar a lo que sugirió @ 如果 我 是 DJ, pero tabBackgrounddebería estar en el layoutarchivo y no dentro del style, por lo que se ve así:

res/layout/somefile.xml:

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

y el selector 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
fuente
2
También puede agregar un valor de color a ese atributo: es decir: app: tabBackground: @ color / colorAccent
Val Martinez
Gracias por la solución. Sin embargo, perdí el efecto dominó predeterminado con él.
Ken Ratanachai S.
4
¿Cómo puedo hacer esto programáticamente?
TSR
1
@TSR, si no necesita colores diferentes para cada pestaña, puede hacerlo tabLayout.setBackgroundColor(colorInt). Si lo necesita para cada pestaña, puede extraer los elementos secundarios de su TabLayout
karl
1
para mejorar la apariencia, creo que también deberíamos agregar state_pressed : <item android: drawable = "@ color / tab_background_selected" android: state_pressed = "true" />
Think Twice Code Once
21

Puedes probar esto:

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

En su archivo xml de fondo:

<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
fuente
y como implementar esto?
TSR
13

Agregar atributo en xml:

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

Y cree en la carpeta dibujable, 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
fuente
5

¿Has probado a comprobar la API? ?

Deberá crear un oyente para el OnTabSelectedListenerevento, luego, cuando un usuario seleccione cualquier pestaña, debe verificar si es la correcta, luego cambiar el color de fondo usando tabLayout.setBackgroundColor(int color), o si no es la pestaña correcta, asegúrese de volver a cambiar a la color normal de nuevo con el mismo método.

hechicero
fuente
Sí, lo he intentado, pero tabLayout cambia el color del widget de pestaña completa, y no puedo encontrar un método en tabLayout.Tab que solo cambia el color de la pestaña y las otras pestañas permanecen con el mismo color.
Joel Lara
No estoy 100% seguro de lo que buscas. Si solo desea colorear el cuerpo de una pestaña, entonces puede agregar un contenedor / vista dentro de esa pestaña, entonces debería poder configurar el color de fondo del contenedor / vista en el XML como de costumbre, por ejemplo, lo siguiente establecerá el fondo a rojoandroid:background=FF0000
sorifiend
Estas otras preguntas / respuestas pueden ayudarlo: stackoverflow.com/questions/30904138/… y stackoverflow.com/a/30755351/1270000
sorifiend
3

Puede tenerlo en 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
fuente
2

Como encontré la mejor y adecuada opción para mí y también funcionará con animación.

Puedes usarlo tú indicatormismo como fondo.

Puede configurar el app:tabIndicatorGravity="stretch"atributo para usarlo como fondo.

Ejemplo:

   <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 te ayude.

Pratik Butani
fuente
Esto toma el color de acento automáticamente. Cómo darle un color diferente sin cambiar el color de acento. gracias
MindRoasterMir
1
Puede usar app:tabIndicatorColor@MindRoasterMir
Pratik Butani
1

Puede cambiar el color de fondo o de ondulación de cada pestaña de esta manera:

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

Después de jugar un poco, así es como obtuve el aspecto deseado (al menos en el emulador) y mantiene el efecto dominó.

diseño de pestaña con selector de pestaña con argumento de color

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

Y el @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: Esto es lo que mostró el emulador antes de agregar el colorargumento a @drawable/tab_selector:

diseño de pestaña con selector de pestaña sin argumento de color

rexxar
fuente
0

Puede cambiar el color de fondo de la pestaña con 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
fuente
-2

Una de las soluciones más simples es cambiar colorPrimary del archivo colors.xml.

Ahmad Sadiq
fuente