Android更改浮动操作按钮颜色

Question

一直试图改变材质的浮动动作按钮颜色,但没有成功.

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

但以上都没有奏效.我也在"重复的问题"中尝试了解决方案,但它们都没有工作,按钮保持绿色并且也变成了正方形.

我想详细解答一下,谢谢.

PS知道如何添加涟漪效果也不错,也无法理解.

Answer 1

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

此视图的背景颜色默认为主题的colorAccent.如果您希望在运行时更改此设置,则可以通过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的代码中(由ywwynm回答如下)

正如@Dantalian在评论中提到的,如果你想改变图标颜色,你可以使用

android:tint="@color/white"     

Answer 2

Vijet Badigannavar的答案是正确的,但使用ColorStateList通常很复杂,他没有告诉我们该怎么做.由于我们经常专注于View在正常和按压状态下改变颜色,我将添加更多细节:

1. 如果你想FAB在正常状态下改变颜色,你可以写

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

2. 如果你想改变FAB按下状态的颜色,感谢Design Support Library 22.2.1,你可以写

   mFab.setRippleColor(your color in int);
   

   通过设置此属性,当您长FAB按时,您的颜色的波纹将出现在您的触摸点并显示为整个表面FAB.请注意,FAB在正常状态下它不会改变颜色.在API 21(Lollipop)下面,没有涟漪效应,但是FAB当你按下它时,颜色仍会改变.

最后,如果你想为状态实现更复杂的效果,那么你应该深入研究ColorStateList,这是一个讨论它的SO问题:如何以编程方式创建ColorStateList？.

更新: 感谢@ Kaitlyn的评论.要使用backgroundTint作为颜色删除FAB的笔划,可以app:borderWidth="0dp"在xml中进行设置.

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

Answer 4

如果您尝试使用应用程序更改FAB的颜色,则存在一些问题.按钮框有不同的颜色,所以你必须做的事情:

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

并在代码中设置颜色:

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

Answer 5

只是用,

app:backgroundTint="@color/colorPrimary"

不要用,

android:backgroundTint="@color/colorPrimary"

Answer 6

FAB根据您的颜色着色colorAccent.

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

Answer 7

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

Answer 8

材质 1.1.0 中浮动操作按钮的新主题属性映射

在您的应用主题中：

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

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

其他解决方案也可行.这是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 10

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

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

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

Answer 11

该文档表明它默认采用@ color/accent.但是我们可以通过使用来覆盖代码

fab.setBackgroundTintList(ColorStateList)

还记得,

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

Answer 12

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

    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 13

我遇到了同样的问题，所有的问题都让我抓狂。感谢这个 /sf/answers/2498797381/

我们能做的..

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

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

Answer 14

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

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

app:backgroundTint="@color/blue"

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

android:tint="@color/white"     

Answer 16

对于材料设计，我只是更改了浮动操作按钮的颜色，如下所示，在浮动操作按钮 xml 中添加以下两行。并做了，

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

Answer 17

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

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

Answer 18

使用数据绑定时，您可以执行以下操作：

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

我举了一个非常简单的例子