Как изменить цвет и высоту нового индикатора TabLayout


124

Я играл с новым android.support.design.widget.TabLayoutи обнаружил проблему в определении класса, нет методов для изменения цвета индикатора и высоты по умолчанию.

Проведя небольшое исследование, выяснилось, что цвет индикатора по умолчанию взят из AppTheme. А именно отсюда:

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

Теперь, в моем случае, если я изменю colorAccent, это повлияет на все другие представления, которые используют это значение в качестве цвета фона, например ProgressBar

Теперь есть ли способ изменить indicatorColor на другое, кроме colorAccent?

Ответы:


250

Столкнувшись с проблемой того, что новый TabLayout использует цвет индикатора из значения colorAccent, я решил покопаться в android.support.design.widget.TabLayoutреализации и обнаружил, что нет общедоступных методов для настройки этого. Однако я нашел эту спецификацию стиля 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>

Имея эту спецификацию стиля, теперь мы можем настроить TabLayout следующим образом:

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

И проблема решена, и цвет, и высота индикатора вкладки могут быть изменены со значений по умолчанию.


5
Есть ли способ изменить tabSelectedTextColor (не цвет или высоту табуляции) с помощью java-кода.
Prakash

2
Атрибут app: tabIndicatorColor в виджете tabLayout xml - единственное изменение, которое мне нужно было внести, чтобы исправить эту проблему. Спасибо!
Брейден Холт

Я сделал это как родительский стиль:parent="@style/Base.Widget.Design.TabLayout"
Ultimo_m

Это решение признано законным
Nikhil

101

Теперь с помощью библиотеки поддержки дизайна вы можете изменить их в xml:

Чтобы изменить цвет индикатора TabLayout:

app:tabIndicatorColor="@color/color"

Чтобы изменить высоту индикатора TabLayout:

app:tabIndicatorHeight="4dp"

4
Я поставил эту строчку, но цвет по-прежнему является цветом акцента
Махди

@Kenji, вы уверены, что эта строка была помещена в TabLayout, а не в бит панели инструментов xml? Легко ошибиться :)
Уэс Винн

Идеальное решение для высоты. Работает нормально. Спасибо, Малек.
Hardik Joshi

1
Что, если я захочу вместо этого применить цвет градиента?
хамза хан

35

Поскольку я не могу опубликовать продолжение комментария разработчика Android , вот обновленный ответ для всех, кому нужно программно установить цвет индикатора выбранной вкладки:

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

Аналогично для высоты:

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

Эти методы были только недавно добавлены в версию 23.0.0 библиотеки поддержки , поэтому в ответе Сохейла Сетаеши используется отражение.


2
setSelectedTabIndicatorHeight теперь устарел, есть идеи, что использовать сейчас?
Michalsx


13

С помощью библиотеки поддержки дизайна v23 вы можете программно установить цвет и высоту.

Просто используйте для высоты:

TabLayout.setSelectedTabIndicatorHeight(int height)

Вот официальный javadoc .

Просто используйте для цвета:

TabLayout.setSelectedTabIndicatorColor(int color)

Вот официальный javadoc .

Здесь вы можете найти информацию в Google Tracker .


Какие целые числа мы должны использовать для цвета?
the_prole

Вы можете использовать класс Color для примера Color.RED
Soumya

setSelectedTabIndicatorHeight устарел
APP

9

Для программного изменения цвета и высоты индикатора можно использовать отражение. например, для цвета индикатора используйте код ниже:

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

и для изменения высоты индикатора используйте "setSelectedIndicatorHeight" вместо "setSelectedIndicatorColor", затем вызовите его по желаемой высоте.


1
Спасибо! это мне помогает! Думаю, Google забыл предоставить метод для этого в своей библиотеке поддержки.
Shinta S

1
Зачем использовать отражение, если оно уже доступно как публичные функции? developer.android.com/reference/android/support/design/widget/…
Android

@SoheilSetayeshi О, хорошо. Спасибо. Может, тогда тебе стоит обновить ответ.
разработчик Android,

1
Но это идеальное решение для API ниже библиотеки поддержки 23.0.0. Я имею в виду Whaao! Отличный ответ!
sud007 09

6

Индикатор фото использует это:

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

6

из xml:

app:tabIndicatorColor="#fff"

из java:

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


0

Просто вставьте эту строку в свой код. Если вы измените цвет, измените значение цвета в скобках.

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

0

Android упрощает эту задачу.

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

Итак, мы просто говорим

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

Это даст нам нормальный синий цвет и выбранный фиолетовый цвет.

Теперь устанавливаем высоту

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

А по высоте мы говорим

mycooltablayout.setSelectedIndicatorHeight(6);
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.