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

Question

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

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

89

android material-design androidx android-theme floating-action-button

Источник

user8980861 18 ноя '18 в 21:25

15 ответов

Другие вопросы по тегам android material-design androidx android-theme floating-action-button

user9419145 19 дек '18 в 01:18 2018-12-19 01:18 · Answer 1 · 2018-12-19 01:18

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

app:tint="@color/COLOR_OF_ICON"

и не:

android:tint="@color/COLOR_OF_ICON"

Не уверен, почему.. Надеюсь, это поможет!

173

Источник

user9419145 19 дек '18 в 01:18

user3467146 26 дек '18 в 03:34 2018-12-26 03:34 · Answer 2 · 2018-12-26 03:34

За 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,

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

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

user8583692 11 фев '19 в 14:25 2019-02-11 14:25 · Answer 3 · 2019-02-11 14:25

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

app:tint="@null"

47

Источник

user8583692 11 фев '19 в 14:25

user8298909 18 ноя '18 в 23:57 2018-11-18 23:57 · Answer 4 · 2018-11-18 23:57

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

app:srcCompat
app:tint
app:maxImageSize

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

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

user8974975 05 апр '19 в 19:37 2019-04-05 19:37 · Answer 5 · 2019-04-05 19:37

Ваш значок многоцветный

Только добавить

app:tint="@null"

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

@dimen/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>

Программно в котлине:

fab.setImageDrawable(ContextCompat.getDrawable(контекст!!, R.drawable.your_drawable))

user3051503 16 май '20 в 21:22 2020-05-16 21:22 · Answer 6 · 2020-05-16 21:22

В моем случае я просто следую этому

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/bottom_home"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ic_home"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_add_sign"
    app:backgroundTint="@color/app_dark_green"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal"
    app:layout_anchor="@id/nav_view"
    app:tint="#FFF" />

И мой результат

user3928747 13 июн '20 в 18:08 2020-06-13 18:08 · Answer 7 · 2020-06-13 18:08

Используйте приложение:tint="@color/white"

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        app:tint="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:srcCompat="@drawable/ic_done"/>

user1938277 20 июн '21 в 21:23 2021-06-20 21:23 · Answer 8 · 2021-06-20 21:23

Использование векторного ресурса в качестве значка для FAB. Вот что у меня сработало.

app:tint меняет цвет значка вектора, а app:backgroundTint меняет фон FAB.

      <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/idFABAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:gravity="bottom"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="70dp"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="18dp"
        android:layout_marginTop="18dp"
        android:layout_marginEnd="18dp"
        app:srcCompat="@drawable/ic_baseline_home_24"
        app:tint="@color/white"
        app:backgroundTint="@color/purple_500"
        android:contentDescription="TODO" />

user9981862 04 мар '21 в 08:54 2021-03-04 08:54 · Answer 9 · 2021-03-04 08:54

Я искал это, и следующий код сработал.

      android:backgroundTint="@color/primarycolor"
    android:textColor="@color/white"
    app:iconTint="@color/white"

1

Источник

user9981862 04 мар '21 в 08:54

user8075762 15 сен '23 в 06:36 2023-09-15 06:36 · Answer 10 · 2023-09-15 06:36

Когда вы используете тему Theme.Material3.DayNight.NoActionBar. Чтобы изменить цвет кнопки плавающего действия, используйте следующее

        <item name="colorPrimaryContainer">@color/primary</item> // this will give the color to fab
  <item name="colorOnPrimaryContainer">@color/white</item> // this sets the color of the icon on fab

Чтобы узнать больше о темах, вы можете обратиться к репозиторию Google Git https://github.com/material-comComponents/material-comComponents-android/blob/master/docs/comComponents/FloatingActionButton.md#container-attributes .

user1423876 25 ноя '22 в 15:14 2022-11-25 15:14 · Answer 11 · 2022-11-25 15:14

Просто хочу добавить свои 2 цента. Есть несколько вариантов, как исправить проблему с цветом для компонентов материала. Большинство из них уже освещены в ответах.

Однако есть и другой и, возможно, более общий подход в данном случае. Вы можете установить «floatingActionButtonStyle» по умолчанию для своей темы, которая будет использоваться для всех FloatingActionButtons.

      <style name="Theme.Design" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="floatingActionButtonStyle">@style/Theme.Design.FloatingActionButton</item>
</style>

<style name="Theme.Design.FloatingActionButton" parent="Widget.MaterialComponents.FloatingActionButton">
    <item name="tint">@null</item>
</style>

Более подробная информация о стилях FloatingActionButtons доступна здесь Theming Fabs

user5460448 18 авг '21 в 11:56 2021-08-18 11:56 · Answer 12 · 2021-08-18 11:56

Я также использую библиотеку быстрого набора Heinardi. Согласно документу о настройке элементов, вы можете определить тему для компонента:

      <style name="Theme.FAB">
    <item name="colorPrimary">@color/Primary</item>
    <item name="colorAccent">@color/Accent</item>
    <item name="colorOnSecondary">@color/white</item>
</style>

Обратите внимание, что colorPrimary определяет цвет расширенных кнопок,

colorAccent цвет основной кнопки,

colorOnSecondary цвет значка.

Затем вы можете добавить тему в SpeedDialView:

      <com.leinardi.android.speeddial.SpeedDialView
    android:id="@+id/speedDial"
    android:theme="@style/Theme.FAB"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:sdMainFabClosedSrc="@drawable/ic_add_white"
    app:sdOverlayLayout="@id/speedDialOverlay" />

user8225462 26 авг '22 в 07:33 2022-08-26 07:33 · Answer 13 · 2022-08-26 07:33

      app:backgroundTint="@color/white"
app:fabSize="mini"
app:srcCompat="@drawable/ic_"
app:tint="@null"

0

Источник

user8225462 26 авг '22 в 07:33

user1200914 30 сен '22 в 11:18 2022-09-30 11:18 · Answer 14 · 2022-09-30 11:18

Цвет значков переопределяется параметром colorOnSecondary (см. themes.xml).

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

      app:tint="@colour/icon_colour"

И для фона:

      app:backgroundTint="@colour/icon_colour"

Вы можете автоматически изменить эти цвета по теме, используя /questions/45567624/temyi-prilozheniya-izmeneniya-i-imageview-src-na-osnove-imeni-temyi-prilozheniya/45567636#45567636

user5451349 23 мар '20 в 20:26 2020-03-23 20:26 · Answer 15 · 2020-03-23 20:26

реализация 'com.google.android.material:material:1.2.0-alpha05'

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
...
app:iconTint="@color/white"
app:icon="@drawable/ic_add_white"
...

Finnaly app:iconTintизменил цвет значка. Я нашел это в исходном коде:

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/floatingactionbutton/res/values/styles.xml

Конечно, вам нужно предварительно проверить инструкцию:https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md