Como alterar a nova cor e altura do indicador TabLayout

Eu estava brincando com o novo android.support.design.widget.TabLayoute encontrei um problema. Na definição da classe, não há métodos para alterar a cor do indicador e a altura padrão.

Fazendo algumas pesquisas, constatou que a cor padrão do indicador é obtida no AppTheme. Especificamente daqui:

<item name="colorAccent">#FF4081</item>

Agora, no meu caso, se eu alterar colorAccent, afetará todas as outras visualizações que usam esse valor como cor de fundo, por exemplo, ProgressBar

Agora, existe alguma maneira de alterar o indicatorColor para outra coisa além da colorAccent?

Tendo o problema de que o novo TabLayout usa a cor do indicador do valor colorAccent, decidi me aprofundar na android.support.design.widget.TabLayoutimplementação, descobrindo que não há métodos públicos para personalizar isso. No entanto, eu encontrei esta especificação de estilo do TabLayout:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

Com essa especificação de estilo, agora podemos personalizar o TabLayout assim:

<android.support.design.widget.TabLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@id/pages_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabIndicatorHeight="4dp"/>

E problema resolvido, a cor e a altura do indicador da guia podem ser alteradas a partir dos valores padrão.

Com a biblioteca de suporte ao design, agora você pode alterá-los no xml:

Para alterar a cor do indicador TabLayout:

app:tabIndicatorColor="@color/color"

Para alterar a altura do indicador TabLayout:

app:tabIndicatorHeight="4dp"

Como não consigo postar um acompanhamento do comentário do desenvolvedor do Android , aqui está uma resposta atualizada para qualquer pessoa que precise definir programaticamente a cor do indicador de guia selecionado:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

Da mesma forma, para altura:

tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

Esses métodos foram adicionados recentemente à revisão 23.0.0 da Biblioteca de suporte , e é por isso que a resposta de Soheil Setayeshi usa reflexão.

app:tabIndicatorColor="@android:color/white"

Com a biblioteca de suporte desing v23, você pode definir programaticamente a cor e a altura.

Basta usar para a altura:

TabLayout.setSelectedTabIndicatorHeight(int height)

Aqui o javadoc oficial .

Basta usar para a cor:

TabLayout.setSelectedTabIndicatorColor(int color)

Aqui o javadoc oficial .

Aqui você pode encontrar as informações no Google Tracker .

Para alterar a cor e a altura do indicador programaticamente, você pode usar a reflexão. por exemplo, para cores de indicadores, use o código abaixo:

        try {
            Field field = TabLayout.class.getDeclaredField("mTabStrip");
            field.setAccessible(true);
            Object ob = field.get(tabLayout);
            Class<?> c = Class.forName("android.support.design.widget.TabLayout$SlidingTabStrip");
            Method method = c.getDeclaredMethod("setSelectedIndicatorColor", int.class);
            method.setAccessible(true);
            method.invoke(ob, Color.RED);//now its ok
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

e para alterar a altura do indicador, use "setSelectedIndicatorHeight" em vez de "setSelectedIndicatorColor" e invoque-o pela altura desejada

O indicador Foto usa isto:

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color

do xml:

app:tabIndicatorColor="#fff"

de java:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

Você pode mudar isso usando xml

app:tabIndicatorColor="#fff"

Basta colocar esta linha no seu código. Se você alterar a cor, altere o valor da cor entre parênteses.

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

O Android facilita.

public void setTabTextColors(int normalColor, int selectedColor) {
    setTabTextColors(createColorStateList(normalColor, selectedColor));
}

Então, nós apenas dizemos

mycooltablayout.setTabTextColors(Color.parseColor("#1464f4"), Color.parseColor("#880088"));

Isso nos dará uma cor azul normal e uma cor roxa selecionada.

Agora vamos definir a altura

public void setSelectedTabIndicatorHeight(int height) {
    mTabStrip.setSelectedIndicatorHeight(height);
}

E para altura dizemos

mycooltablayout.setSelectedIndicatorHeight(6);