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

Question

Я создаю приложение для 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 получает цвет исходного вектора для рисования.

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

Answer 1

@ измерения / 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>

Answer 2

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

app:tint="@null"

Answer 3

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

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

Answer 4

Для 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 - Компоненты материального дизайна

Answer 5

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

• app:srcCompat
• app:tint
• app:maxImageSize

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

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