Android FAB icon always black with MaterialComponents theme

Question

I'm creating an Android app and I'm using the AndroidX libraries and Material design theme. My app theme on styles.xml is:

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

I have the following FAB from a custom library:

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

And also tried the default 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" />

No mater the color of the icon (a vector drawable), the icon inside the FAB (from the library and from the default) is always black. I have narrowed down the problem to the material design theme, since using the old Theme.AppCompat.Light.DarkActionBar instead of the new Theme.MaterialComponents.Light.DarkActionBar the icon inside the FAB gets the color of the original vector drawable.

Does anyone know why this is happening and how to solve it?

What is the color of the icon defined as? Is it a theme attribute like `?attr/colorControlNormal` or a defined color like `#ffaacc` or `@color/orange` ? — Ben P., Nov 18 '18 at 21:34
Please see this link: https://stackoverflow.com/a/71892873/12272687 — Mori, Apr 16 '22 at 10:24

Gab Ledesma · Answer 1 · 2020-02-17T11:01:21.873

170

I solved this by using:

app:tint="@color/COLOR_OF_ICON"

and NOT:

android:tint="@color/COLOR_OF_ICON"

Reference: https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md

edited Feb 17 '20 at 11:01

answered Dec 19 '18 at 01:18

Gab Ledesma

1,785
1
7
13

What if the icon is multi coloured... Then tint is not the solution. – Shashank singh Jan 30 '19 at 13:06
Totally was the fix for me! I get so confused which of those attribute prefixes you are supposed to use. – Booger Feb 03 '19 at 02:45
3

@Shashanksingh use app:tint="@null" to use the icon's original color – Gab Ledesma Sep 23 '19 at 06:03
3

Just a quick mention that, `app:tint` doesn't come up automatically. You have to type it. – Mangesh Mar 04 '20 at 18:46
5

None of these work for me. What's wrong with Google? Seriously. OMFg – TheRealChx101 May 31 '20 at 13:57
2

Thank you so very much. You wouldn't believe how many days I wasted looking for this! – confusedstudent Dec 13 '21 at 14:50

Ifta · Answer 2 · 2019-05-26T02:36:45.900

For MaterialComponents Theme you can define the following colors.

<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 is the responsible color for FloatingActionButton. and colorOnSecondary is the responsible color for icon color of FloatingActionButton.

In your AppTheme you have not defied the colorSecondary. So, it took the default black color from parent Theme.MaterialComponents.Light.DarkActionBar.

Reference : Android dev summit, 2018 - The Components of Material Design

you can use app:tint="@color/colorAccent" to change it immediately. — Mahmoud Ayman, May 26 '19 at 00:58
@MahmoudAyman you can do that. The benefit of using the approach from Ifta is that you use theme instead. So then your styles and colors are flexible enough to apply in other theme.. such as dark theme :) — Leandro Ocampo, Nov 06 '19 at 14:15
app:tint="@null" didin't work but this answer worked perfectly. — TeachMeJava, Nov 27 '20 at 22:39

Mahozad · Answer 3 · 2022-02-11T12:28:32.077

46

As said in this answer, if your icon has multiple colors or if you want to keep your icon original color(s), then assign @null as the tint:

app:tint="@null"

edited Feb 11 '22 at 12:28

answered Feb 11 '19 at 14:25

Mahozad

18,032
13
118
133

score 15 · Answer 4 · answered Nov 18 '18 at 23:57

According to the GitHub documentation page for the Material Components library's FloatingActionButton, the only attributes that affect the icon are

app:srcCompat
app:tint
app:maxImageSize

In this case, since your color is defined as a constant (#FFF), the only one that seems to make sense is app:tint. Perhaps something in your theme has set this to black?

You ought to be able to override it by setting app:tint="#FFF" on your FAB.

Irvin Joao · Answer 5 · 2019-10-30T15:38:46.193

Is Your Icon is multicolor

Add Only

app:tint="@null"

but if you only want to change color

@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 :

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

Programmatically in kotlin :

fab.setImageDrawable(ContextCompat.getDrawable(context!!, R.drawable.your_drawable))

score 3 · Answer 6 · answered May 16 '20 at 18:22

In my case, I just follow this

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

And my result is

score 3 · Answer 7 · answered Jun 13 '20 at 15:08

use app: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"/>

score 1 · Answer 8 · edited Mar 18 '21 at 10:04

1

I was looking for it and the following code worked.

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

edited Mar 18 '21 at 10:04

BDL

21,052
22
49
55

answered Mar 04 '21 at 05:54

iamjpsharma

85
2
9

score 1 · Answer 9 · answered Jun 20 '21 at 18:23

Using vector asset as icon for FAB . Here is what worked for me .

app:tint is changing vector icon color and app:backgroundTint is changing background of 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" />

zhezha · Answer 10 · 2021-08-18T12:22:31.617

I'm also using Heinardi speed dial library. According to the document about customizing items, you can define a theme for the component:

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

Note that colorPrimary defines the color of extended buttons,

colorAccent the color of main button,

colorOnSecondary the color of icon.

Then you can add the theme to 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" />

score 0 · Answer 11 · answered Aug 26 '22 at 07:33

0

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

answered Aug 26 '22 at 07:33

Aitha Ranjeeth

96
8

score 0 · Answer 12 · answered Sep 30 '22 at 11:18

Color of icons are overrided by colorOnSecondary (see themes.xml).

To put the icon colour you want you must use:

app:tint="@colour/icon_colour"

And for the background:

app:backgroundTint="@colour/icon_colour"

You can change these colours automatically by the theme using https://stackoverflow.com/a/24043959/1200914

score 0 · Answer 13 · answered Nov 25 '22 at 15:14

Just want to add my 2 cents. There are a few options how to fix your color issue for Material Components. The majority of them are already covered in the answers.

However, there's another and, probably, more general approach in this case. You can set a default "floatingActionButtonStyle" to your theme which will be used for all 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>

More details about styling of FloatingActionButtons is available there Theming Fabs

dansamosudov · Answer 14 · 2021-05-31T13:20:46.043

UPDATED

Shortly: @gab-ledesma comment did the trick: https://stackoverflow.com/a/53843325/5451349

implementation '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 changed an icon color. I've found it in the source code:

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

Of cource, you need to check the instruction before: https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md

Android FAB icon always black with MaterialComponents theme

14 Answers14

Linked

Related