Android 更改浮动操作按钮颜色答案

【问题标题】：Android changing Floating Action Button colorAndroid 更改浮动操作按钮颜色
【发布时间】：2015-09-07 06:50:28
【问题描述】：

我一直在尝试更改 Material 的 Floating Action Button 颜色，但没有成功。

<android.support.design.widget.FloatingActionButton
    android:id="@+id/profile_edit_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_mode_edit_white_24dp" />

我已尝试添加：

android:background="@color/mycolor"

或通过代码：

FloatingActionButton fab = (FloatingActionButton) rootView.findViewById(R.id.profile_edit_fab);
fab.setBackgroundColor(Color.parseColor("#mycolor"));

或

fab.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#mycolor")));

但以上都没有奏效。我也尝试了提出的重复问题中的解决方案，但它们都不起作用；按钮保持绿色，也变成了一个正方形。

附：想知道怎么添加涟漪效果也不错，也看不懂。

【问题讨论】：

Change color of Floating Action Button from Appcompat 22.2.0 programmatically 的可能重复项
涟漪效果在棒棒糖之前的设备上不可用，因为它使用了新的RenderThread。
@karaokyo 好的，但我是怎么做到的？
在我看来，Google 在让这些东西可以访问方面做得非常糟糕
要以编程方式执行此操作并向后兼容，请参阅stackoverflow.com/questions/30966222/…

标签： java android android-5.0-lollipop floating-action-button

【解决方案1】：

如documentation 中所述，默认情况下它采用styles.xml 属性colorAccent 中设置的颜色。

此视图的背景颜色默认为主题的 colorAccent。如果您希望在运行时更改此设置，则可以通过 setBackgroundTintList(ColorStateList) 进行。

如果你想改变颜色

在带有 app:backgroundTint 属性的 XML 中

<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" >

在带有 .setBackgroundTintList 的代码中（下面由ywwynm 回答）

正如@Dantalian 在 cmets 中提到的，如果您希望将设计支持库的图标颜色更改为最高 v22（含），您可以使用

android:tint="@color/white"

对于设计支持库自 v23 供您使用：

app:tint="@color/white"

同样使用androidX 库，您需要在 xml 布局中设置 0dp 边框：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" />

【讨论】：

这不适用于
请注意，如果您还想将图像颜色更改为白色，例如，您可以使用：android:tint="@android:color/white"
android:tint="@color/white" 对我不起作用，因为它由于某种原因无法解决它。 android:tint="#ffffff" 虽然对我有用
那是因为你的colors.xml中不存在@color/white。使用 @android:color/white 或创建一个名为 white 或任何你需要的颜色
使用“app:backgroundTint”而不是“android:backgroundTint”

【解决方案2】：

Vijet Badigannavar 的回答是正确的，但使用 ColorStateList 通常很复杂，他没有告诉我们该怎么做。由于我们经常关注改变View在正常和按下状态下的颜色，所以我将添加更多细节：

如果你想在正常状态下改变FAB的颜色，你可以写

mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));

如果你想在按下状态下改变FAB的颜色，感谢设计支持库22.2.1，你可以写
```
mFab.setRippleColor(your color in int);
```
通过设置此属性，当您长按FAB时，您的触摸点会出现一个带有您颜色的波纹，并显示到FAB的整个表面。请注意在正常状态下它不会改变FAB 的颜色。 API 21(Lollipop)以下，没有涟漪效应，但FAB的颜色在你按下时仍然会改变。

最后，如果你想为状态实现更复杂的效果，那么你应该深入挖掘ColorStateList，这是一个讨论它的SO问题：How do I create ColorStateList programmatically?。

更新： 感谢@Kaitlyn 的评论。要使用 backgroundTint 作为颜色去除 FAB 的笔划，您可以在 xml 中设置 app:borderWidth="0dp"。

【讨论】：

谢谢你，我不知道如何使用 ColorStateList。但是，您的代码在我的 FAB 中留下了主题强调色的笔触（轮廓）。你知道我怎样才能删除那个笔触（或者改变它的颜色）并有一个特殊颜色的FAB，看起来这种特殊颜色是强调色吗？
@KaitlynHanrahan 请查看我的更新。感谢您的评论。
效果很好——Lollypop 和 Kitkat 看起来一样，甚至两者都有一点阴影，所以 FAB 在背景中以相同的颜色弹出（我在工具栏上部分显示了它）。非常感谢！这很简单，但我不知道我是否会自己找到它。
有没有办法以编程方式设置app:borderWidth？谢谢
@Štarke 好吧，看了FloatingActionButton 的源代码，恐怕你现在不能以编程方式设置它，因为mBorderWidth 没有setter。

【解决方案3】：

正如Vasil Valchev 在评论中指出的那样，它比看起来更简单，但是我在 XML 中没有注意到一个细微的差别。

<android.support.design.widget.FloatingActionButton
    android:id="@+id/profile_edit_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_mode_edit_white_24dp"
    app:backgroundTint="@android:color/white"/>

请注意：

app:backgroundTint="@android:color/white"

而不是

android:backgroundTint="@android:color/white"

【讨论】：

这很重要，因为这是两个完全不同的东西：android:backgroundTint="" 来自 Api 级别 21 并且是 Lollipop Material Design 的一部分，在 Lollipop 下面将被忽略。它也不会完全改变FAB 颜色，因为它不是纯色。您必须使用app: 才能使其工作。
谢谢，使用android:color 导致我的应用程序崩溃，这让我发疯了！感谢您保存我的应用程序以及我的理智所剩无几 ;-)
@Kapenaar 没问题，在注意到之前我也挠了一阵子；）
这将如何以编程方式工作，因为在 java 端，XML 中的 app: 和 android: 没有区别。
@marienke 您可以使用 ColorStatesList 进行设置，发布一个新问题并在此处发布链接以便我回答；)

【解决方案4】：

如果您尝试使用应用程序更改 FAB 的颜色，则会出现一些问题。按钮的框架有不同的颜色，所以你必须做什么：

app:backgroundTint="@android:color/transparent"

并在代码中设置颜色：

actionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.white)));

【讨论】：

这适用于普通颜色。如果我给出了像 #44000000 这样的 alpha 颜色，则框架颜色问题是可重现的。
getResources.getColor() 已弃用，请考虑使用 ContextCompat.getColor(context, your colour);反而。希望对你有帮助

【解决方案5】：

只是使用，

app:backgroundTint="@color/colorPrimary"

不要使用，

android:backgroundTint="@color/colorPrimary"

【讨论】：

hmmmm 这导致 android studio 自动完成给出结果使用 android:backgroundTint ，这个答案很好

【解决方案6】：

FAB 根据您的colorAccent 着色。

<style name="AppTheme" parent="Base.Theme.AppCompat.Light">
    <item name="colorAccent">@color/accent</item>
</style>

【讨论】：

嗯，默认颜色不是绿色。你在哪里设置了绿色？
我没有。如您所见，这个xml是我设置按钮布局的唯一地方...
也许您应该只使用 FAB 创建一个新项目并发布整个项目的代码。
哇...我基本上只是要求你做同样的事情而你不愿意这样做。你认为你的代码是足够的，但我对你的代码的添加是不够的，这是非常虚伪的。创建一个MCVE 由提问者负责。谢谢。
不再，基于Theme Attribute Mapping，浮动操作按钮现在（我验证了自己）被着色为 colorSecondary (com.google.android.material:material :1.1.0-alpha02)

【解决方案7】：

mFab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(mContext,R.color.mColor)));

【讨论】：

这是最简单的解决方案，比使用自定义drawable更容易。

【解决方案8】：

材料 1.1.0 中 Floating Action Button 的新主题属性映射

在您的应用主题中：

设置 colorSecondary 为 FAB 的背景设置颜色（映射到 backgroundTint）
设置 colorOnSecondary 以设置图标/文本的颜色和 FAB 的波纹颜色（映射到 tint 和ippleColor）

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- ...whatever else you declare in your app theme.. -->
    <!-- Set colorSecondary to change background of FAB (backgroundTint) -->
    <item name="colorSecondary">@color/colorSecondary</item>
    <!-- Customize colorSecondary to change icon/text of FAB (maps to tint and rippleColor) -->
    <item name="colorOnSecondary">@android:color/white</item>
</style>

【讨论】：

终于有人为FAB背景和前景（图标）颜色提供简单的解决方案了。
谢谢。这就是我一直在寻找的
更多信息：material.io/develop/android/theming/color + material.io/design/color/…

【解决方案9】：

其他解决方案可能有效。这是 10 磅大猩猩的方法，其优点是广泛适用于这种情况和类似情况：

样式.xml：

<style name="AppTheme.FloatingAccentButtonOverlay" >
    <item name="colorAccent">@color/colorFloatingActionBarAccent</item>
</style>

你的布局 xml：

<android.support.design.widget.FloatingActionButton
       android:theme="AppTheme.FloatingAccentButtonOverlay"
       ...
 </android.support.design.widget.FloatingActionButton>

【讨论】：

嗯，看起来应该可以，但我在布局文件String types not allowed (at 'theme' with value 'AppTheme.FloatingAccentButtonOverlay') 中遇到编译器错误。也许我错过了styles.xml的一点......
@ScottBiggs 使用android:theme="@style/AppTheme.FloatingAccentButtonOverlay"，但无论哪种方式，这个解决方案都对我不起作用......
API 16 没有 colorAccent 属性怎么办？

【解决方案10】：

文档建议默认使用@color/accent。但是我们可以使用

在代码上覆盖它

fab.setBackgroundTintList(ColorStateList)

还记得，

使用此库的最低 API 版本为 15，因此您需要更新它！如果你不想这样做，那么你需要定义一个自定义的drawable并装饰它！

【讨论】：

有效，但我必须以 api 21+ 为目标。如果我以 api 8 为目标，则无法调用此方法。
只要包含这个google已经发布的设计库“com.android.support:design:22.2.0”。这可以在非棒棒糖版本的设备上使用！干杯！！
当然可以，但这是此代码的错误：调用需要 API 级别 21（当前最低为 8）：android.widget.ImageView#setBackgroundTintList
使用这个库的最低API版本是15，所以你需要更新它！如果你不想这样做，那么你需要定义一个自定义的drawable并装饰它！
哦，谢谢！我不知道，以为是 21，因为这是错误所说的。请将此作为答案发布，我会接受！

【解决方案11】：

使用Material Theme 和材质组件 FloatingActionButton 默认采用styles.xml 属性colorSecondary 中设置的颜色。

您可以在xml中使用app:backgroundTint属性：

<com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
       app:backgroundTint=".."
       app:srcCompat="@drawable/ic_plus_24"/>

您可以使用fab.setBackgroundTintList();
您可以使用 <item name="backgroundTint"> 属性自定义您的样式

  <!--<item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item> -->
  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="backgroundTint">#00f</item>
    <!-- color used by the icon -->
    <item name="tint">@color/...</item>
  </style>

从材料组件的 1.1.0 版本开始，您可以使用新的 materialThemeOverlay 属性仅覆盖某些组件的默认颜色：

  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="materialThemeOverlay">@style/MyFabOverlay</item>
  </style>

  <style name="MyFabOverlay">
    <item name="colorSecondary">@color/custom2</item>
    <!-- color used by the icon -->
    <item name="colorOnSecondary">@color/...</item>
  </style>

【讨论】：

【解决方案12】：

使用下面的行更改浮动操作按钮的背景颜色

app:backgroundTint="@color/blue"

更改浮动操作按钮图标颜色

android:tint="@color/white"

【讨论】：

【解决方案13】：

感谢自动完成。经过几次打击和试验，我很幸运：

    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    card_view:backgroundTint="@color/whicheverColorYouLike"

--或--（两者基本相同）

    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:backgroundTint="@color/whicheverColorYouLike"

这适用于我的 API 版本 17 和设计库 23.1.0。

【讨论】：

【解决方案14】：

我遇到了同样的问题，而且都在抢我的头发。谢谢你 https://stackoverflow.com/a/35697105/5228412

我们能做什么..

 favourite_fab.setImageDrawable(ContextCompat.getDrawable(getBaseContext(), R.drawable.favourite_selected));

它对我来说很好，并希望其他能到达这里的人。

【讨论】：

虽然理论上这可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。

【解决方案15】：

 <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:elevation="6dp"
    app:backgroundTint="@color/colorAccent"
    app:pressedTranslationZ="12dp"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/add"/>

请注意，您在 res/values/color.xml 中添加颜色并在您的工厂中包含该属性

   app:backgroundTint="@color/addedColor"

【讨论】：

【解决方案16】：

使用Data Binding 时，您可以执行以下操作：

android:backgroundTint="@{item.selected ? @color/selected : @color/unselected}"

我做了一个很简单的example

【讨论】：

【解决方案17】：

如果您有一个没有可绘制对象的浮动操作按钮，您可以使用以下方式以编程方式更改色调：

fab.getBackground().mutate().setTint(ContextCompat.getColor(yourContext, R.color.anyColor));

【讨论】：

这就是我正在寻找的解决方案。我有一个带有 backgrountTint 的简单晶圆厂，在找到它之前找不到以编程方式更改它的方法。
我使用数据绑定，但我得到了 NullPointerException...

【解决方案18】：

对于材料设计，我只是像这样更改了浮动操作按钮的颜色，在浮动操作按钮 xml 中添加以下两行。完成了，

 android:backgroundTint="@color/colorPrimaryDark"
 app:borderWidth="0dp"

【讨论】：

【解决方案19】：

我是这样做的 android:background="@color/colorAccent" 我只是去文件夹 res 然后单击文件夹值，然后单击 colors.xml 中的 colors.xml 我只是更改 colorAccent 的颜色并在 android:background 中调用它并完成

【讨论】：

【解决方案20】：

我们缺少的一点是，在您为按钮设置颜色之前，为该颜色设置所需的值很重要。所以你可以去值>颜色。您会找到默认的颜色，但您也可以通过复制和粘贴来创建颜色，更改颜色和名称。然后...当你去改变浮动按钮的颜色时（在activity_main中），你可以选择你创建的那个

示例 - 值代码 > 默认颜色的颜色 + 我创建的另外 3 种颜色：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="corBotaoFoto">#f52411</color>
    <color name="corPar">#8e8f93</color>
    <color name="corImpar">#494848</color>

</resources>

现在是我创建并命名为“corPar”的颜色的浮动操作按钮：

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_input_add"
        android:tint="#ffffff"
        app:backgroundTint="@color/corPar"/>

它对我有用。祝你好运！

【讨论】：

【解决方案21】：

我的解决方案，适用于数据绑定

val color = ContextCompat.getColor(context, R.color.colorPrimary)
binding.fab.backgroundTintList = ColorStateList.valueOf(getColor)

【讨论】：

【解决方案22】：

在 Kotlin 中：

val gray = getColor(requireContext(), R.color.green)
binding.fabSubmit.backgroundTintList = ColorStateList.valueOf(gray)

【讨论】：

【解决方案23】：

在 color.xml 文件中添加颜色，然后添加这行代码... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));

【讨论】：

【解决方案24】：

如果您想以编程方式更改颜色，可以使用此代码

floating.setBackgroundTintList(getResources().getColorStateList(R.color.vermelho));

【讨论】：

【解决方案25】：

使用

app:backgroundTint="@color/orange" in


<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/id_share_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/share"
        app:backgroundTint="@color/orange"
        app:fabSize="mini"
        app:layout_anchorGravity="end|bottom|center" />



</androidx.coordinatorlayout.widget.CoordinatorLayout>

【讨论】：