android - last - Estilo de pestaña TabLayout

com.android.support:design 26

Question

Uso el nuevo TabLayout de com.android.support:design library. Quiero cambiar el fondo de las pestañas seleccionadas / no seleccionadas. Miro las fuentes y encontré solo el atributo tabBackground que cambia el color de todas las pestañas y no controla el color de la pestaña seleccionada.

¿Cómo puedo controlar el fondo de pestaña seleccionado / no seleccionado?

Answer 1

Leí Cómo diseñar la barra de acciones, el fondo de la pestaña en la pestaña seleccionada y descubro qué hacer. Es un problema realmente similar, pero encontré una solución increíble especialmente para TabLayout :

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/tab_layout_color"
app:tabIndicatorHeight="48dp"
app:tabIndicatorColor="@color/selected_tab_color"
/>

tenga en cuenta que layout_height y tabIndicatorHeight tienen la misma altura. Entonces obtienes una bonita animación de transición de esta manera.

Answer 2

Si observa la TabLayout.class , notará la pestaña TabView.class interna para el diseño real de la pestaña. Tiene el mismo diseño que cualquier otro con el atributo isSelected . Seleccionar pestaña también tendrá un impacto en esto, por lo que todo lo que necesita hacer es crear un fondo de selector dibujable como

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@color/tab_bg_selected"/>
<item android:drawable="@color/tab_bg_unselected"/></selector>

y adjuntarlo al atributo tabBackground, por ejemplo, en XML como

<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@drawable/tab_bg"
app:tabIndicatorHeight="4dp"/>

Answer 3

También conocí este problema. Acabo de buscar tabIndicatorColor en todo el proyecto y encontré el siguiente código en algunos R.java :

 @see #TabLayout_tabBackground
@see #TabLayout_tabContentStart
@see #TabLayout_tabGravity
@see #TabLayout_tabIndicatorColor
@see #TabLayout_tabIndicatorHeight
@see #TabLayout_tabMaxWidth
@see #TabLayout_tabMinWidth
@see #TabLayout_tabMode
@see #TabLayout_tabPadding
@see #TabLayout_tabPaddingBottom
@see #TabLayout_tabPaddingEnd
@see #TabLayout_tabPaddingStart
@see #TabLayout_tabPaddingTop
@see #TabLayout_tabSelectedTextColor
@see #TabLayout_tabTextAppearance
@see #TabLayout_tabTextColor

Entonces el problema está resuelto. Que esto te sirva de ayuda.
es decir, uso IDEA

Answer 4

Definir:

 <style name="AppTabLayout" parent="Widget.Design.TabLayout">
<item name="tabMaxWidth">@dimen/tab_max_width</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabPaddingStart">6dp</item>
<item name="tabPaddingEnd">6dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">@style/AppTabTextAppearance</item>
<item name="tabSelectedTextColor">@color/range</item>
</style>
<!-- for text -->
<style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">12sp</item>
<item name="android:textColor">@color/orange</item>
<item name="textAllCaps">false</item>
</style>

Aplicar:

<android.support.design.widget.TabLayout
style="@style/AppTabLayout"
app:tabTextAppearance="@style/AppTabTextAppearance"
android:layout_width="match_parent"
.... />