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

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

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

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

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

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

11 94
android material-design android-design-library

11 ответов:

имея проблему, что новый 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"/>

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

206

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

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

app:tabIndicatorColor="@color/color"

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

app:tabIndicatorHeight="4dp"
82

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

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

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

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

эти методы были только недавно добавлены в редакция 23.0.0 библиотеки поддержки, поэтому ниже среднего Setayeshi это использует отражение.

31

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

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

TabLayout.setSelectedTabIndicatorHeight(int height)
на официальный javadoc.

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

TabLayout.setSelectedTabIndicatorColor(int color)
на официальный javadoc.

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

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

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

        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" затем вызовите его по нужной высоте

8

вы можете изменить это с помощью XML

app:tabIndicatorColor="#fff"
1
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));
1

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

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

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

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