Android 更改浮动操作按钮颜色

Question

我一直在尝试更改 Material 的浮动操作按钮颜色，但没有成功。

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

但是上面的 none 有效。我也尝试了提出的重复问题中的解决方案，但其中 none 有效；按钮保持绿色，也变成了正方形。

P.S。如果知道如何添加涟漪效果也很好，我也看不懂。

Answer 1

FAB 的颜色基于您的 colorAccent。

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

Answer 2

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

在代码上覆盖它

fab.setBackgroundTintList(ColorStateList)

还要记住，

使用此库的最低 API 版本为 15，因此您需要更新它！如果您不想这样做，那么您需要定义一个自定义可绘制对象并对其进行装饰！

Answer 3

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

The background color of this view defaults to the your theme's colorAccent. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).

如果你想改变颜色

在 XML 中具有属性 app:backgroundTint

<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 的代码中（由在下面回答）

正如@Dantalian 在评论中提到的，如果您希望将设计支持库的图标颜色更改为 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" />

Answer 4

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"

Answer 5

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

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

并在代码中设置颜色：

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

Answer 6

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

    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。

Answer 7

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

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

Answer 8

正如 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"

Answer 9

随便用，

app:backgroundTint="@color/colorPrimary"

不要使用，

android:backgroundTint="@color/colorPrimary"

Answer 10

我遇到了同样的问题，它都在抢我的头发。感谢这个

我们能做什么..

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

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

Answer 11

我们缺少的一点是，在您为按钮设置颜色之前，确定您想要的颜色值非常重要。所以你可以去价值观>颜色。您会找到默认的颜色，但您也可以通过复制和粘贴它们、更改颜色和名称来创建颜色。然后...当你去改变浮动按钮的颜色时（在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"/>

它对我有用。祝你好运！

Answer 12

 <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 并将该属性包含在您的 fab

   app:backgroundTint="@color/addedColor"

Answer 13

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

Answer 14

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

app:backgroundTint="@color/blue"

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

android:tint="@color/white"

Answer 15

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

Answer 16

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

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

Answer 17

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

Answer 18

使用 Data Binding 时，您可以这样做：

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

我做了一个很简单的example

Answer 19

Floating Action Button 在 material 1.1.0

中的新主题属性映射

在您的应用主题中：

设置 colorSecondary 以设置 FAB 的背景颜色（映射到 backgroundTint）
设置 colorOnSecondary 以设置 icon/text 的颜色和 FAB 的波纹颜色（映射到 tint 和 rippleColor）

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

Answer 20

使用 Material Theme and the material components 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 版 material 组件开始，您可以使用新的 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>

Answer 21

使用

app:backgroundTint="@color/orange"


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

Answer 22

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

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

Answer 23

为了Material设计，我只是把浮动按钮的颜色改成这样，在您的浮动操作按钮 xml 中添加以下两行。完成了，

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

Answer 24

在 Kotlin 中：

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

Answer 25

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

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

Answer 26

您可以使用 Extended，因此设置 app:iconTint 如下：

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       
        app:icon="@drawable/d0"
        app:iconTint="@color/white"
         />

Android 更改浮动操作按钮颜色

Android changing Floating Action Button color

java

android

floating-action-button

android-5.0-lollipop