Значок Android FAB всегда черный с темой MaterialComponents

Я создаю приложение для Android и использую библиотеки AndroidX и тему дизайна материалов. Моя тема приложения на styles.xml:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

У меня есть следующий FAB из пользовательской библиотеки:

<com.leinardi.android.speeddial.SpeedDialView
        android:id="@+id/work_log_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:layout_behavior="@string/speeddial_scrolling_view_snackbar_behavior"
        app:sdMainFabClosedSrc="@drawable/ic_add_white_24dp"
        app:sdOverlayLayout="@id/overlay" />

А также попробовал FAB по умолчанию:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_add_white_24dp"
        android:layout_margin="16dp" />

Независимо от цвета значка (векторное изображение), значок внутри FAB (из библиотеки и по умолчанию) всегда черный. Я сузил проблему до темы дизайна материала, поскольку, используя старый Theme.AppCompat.Light.DarkActionBar вместо нового Theme.MaterialComponents.Light.DarkActionBar значок внутри FAB позволяет получить цвет исходного вектора для рисования.

Кто-нибудь знает, почему это происходит и как это решить?

Ответ 1

Я решил это с помощью:

app:tint="@color/COLOR_OF_ICON"

и не:

android:tint="@color/COLOR_OF_ICON"

Ссылка: https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md

Ответ 2

Как сказано в этом ответе, если ваш значок имеет несколько цветов или вы хотите сохранить исходный цвет значка, тогда присвойте @null оттенок:

app:tint="@null"

Ответ 3

Для темы MaterialComponents вы можете определить следующие цвета.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primaryDark</item>
        <item name="colorPrimaryVariant">@color/primaryVariant</item>
        <item name="colorOnPrimary">@color/onPrimary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSecondaryVariant">@color/secondaryVariant</item>
        <item name="colorOnSecondary">@color/onSecondary</item>
        <item name="colorAccent">@color/accent</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorOnSurface">@color/onSurface</item>
        <item name="colorError">@color/error</item>
        <item name="colorOnError">@color/onError</item>
        <item name="colorButtonNormal">@color/buttonNormal</item>
        <item name="colorControlNormal">@color/controlNormal</item>
        <item name="colorControlActivated">@color/controlActivated</item>
        <item name="colorControlHighlight">@color/controlHighlight</item>
        <item name="colorBackgroundFloating">@color/backgroundFloating</item>
    </style>

colorSecondary является ответственным цветом для FloatingActionButton. и colorOnSecondary является ответственным цветом за цвет значка FloatingActionButton.

В вашем AppTheme вы не бросили вызов colorSecondary. Таким образом, он взял черный цвет по умолчанию от родительского Theme.MaterialComponents.Light.DarkActionBar.

Ссылка: Android Dev Summit, 2018 - Компоненты материального дизайна

Ответ 4

Согласно странице документации GitHub для библиотеки компонентов материалов FloatingActionButton, единственными атрибутами, которые влияют на значок, являются

app:srcCompat
app:tint
app:maxImageSize

В этом случае, поскольку ваш цвет определен как константа (#FFF), единственным, который имеет смысл, является app:tint. Возможно, что-то в вашей теме настроило это на черный?

Вы должны иметь возможность переопределить его, установив app:tint="#FFF" на вашем FAB.

Ответ 5

Является ли ваша иконка многоцветной

Добавить только

app:tint="@null"

но если вы хотите изменить только цвет

@dimension/fab_margin → 16dp

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    style="@style/Widget.MaterialComponents.FloatingActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:backgroundTint="@color/colorAccent"
    app:srcCompat="@drawable/ic_add"
    app:tint="@color/colorWhite" />

Стиль:

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>