Android FAB 图标总是黑色的材质组件主题

我正在创建一个 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 获得原矢量绘制的颜色。

有人知道为什么会发生这种事，以及如何解决吗？

19715 次浏览
小开

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.

小开

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

小开

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

小开

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"
小开

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

小开

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

小开

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

enter image description here

小开

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

I was looking for it and the following code worked.

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

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

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" />
小开 
app:backgroundTint="@color/white"
app:fabSize="mini"
app:srcCompat="@drawable/ic_"
app:tint="@null"
小开

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

小开

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


提交答案