设置FAB图标颜色


82

目前的晶圆厂
当前的FAB

我想知道如何将'com.android.support:design:22.2.0'库提供的FAB(浮动操作按钮)小部件的图标颜色从绿色更改为白色。

style.xml

<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/color_primary</item>
    <item name="colorPrimaryDark">@color/color_primary_dark</item>
    <item name="colorAccent">@color/accent</item>

</style>
<color name="color_primary">#00B33C</color>
<color name="color_primary_dark">#006622</color>
<color name="accent">#FFB366</color>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <include android:id="@+id/toolbar" layout="@layout/toolbar" />

    <TextView android:id="@+id/text"
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:paddingTop="16dp"
        android:textSize="20sp" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingTop="8dp"
        android:paddingBottom="16dp" />

</LinearLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@android:drawable/ic_input_add"
    android:layout_margin="24dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:borderWidth="0dp" />

Answers:


54

更新2

如果您使用com.google.android.material.floatingactionbutton.FloatingActionButton,请使用app:tint代替android:tint

更新

请参阅@Saleem Khan的答案,这是使用以下方法设置色调的标准方法:

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

通过FAB上的XML。

OLD(2015年6月)

该答案写于2015年10月之前,当时 android:tint只有API> = 21才支持FAB。

您可以使用ColorFilter以编程方式对其进行更改。

//get the drawable
Drawable myFabSrc = getResources().getDrawable(android.R.drawable.ic_input_add);
//copy it in a new one
Drawable willBeWhite = myFabSrc.getConstantState().newDrawable();
//set the color filter, you can use also Mode.SRC_ATOP
willBeWhite.mutate().setColorFilter(Color.WHITE, PorterDuff.Mode.MULTIPLY);
//set it to your fab button initialized before
myFabName.setImageDrawable(willBeWhite);

3
设置PorterDuff.Mode.SRC_ATOP和使用时可以使用Drawable myFabSrc = ResourcesCompat.getDrawable(getResources(), android.R.drawable.ic_input_add, getTheme());
Paradiesstaub 2015年

48
您的解决方案太复杂了。只需使用android:tint =“ @ android:color / white”
Mehdi

4
@MahdiElMasaoudi并不复杂。有时在大多数情况下,有些用例必须以编程方式进行更新!由用户自行决定尽可能减少开销。
sud007'9

22
如果您FloatingActionButtoncom.google.android.material套件中使用,则应添加app:tint而不是android:tint
陈和

使用app:tint="@android:color/white"
Erkan

193

使用android:tint属性,您可以像这样设置颜色

<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:tint="@android:color/white"
    android:src="@android:drawable/ic_input_add"
   />

1
这比编程方式帮助了我很多,简单得多。
天使约瑟夫·皮斯科拉

不小心在这里看到了你的照片。好的解决方案Saleem。:-)
Anees U

这样干净的解决方案
Thiago Pereira

9
android:tint似乎仅在API级别21和更高级别中受支持:((developer.android.com/training/material/drawables.html
alexbirkett,2016年

1
@alexbirkett除了FloatingActionButton是此处的支持库之外,似乎也可以在较旧的API上实现(与API 16一起尝试过)。
arekolek

107

如果您正在使用 Material Components

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_gravity="bottom|end"
    app:fabSize="normal"
    app:tint="@color/colorAccent"
    app:srcCompat="@drawable/ic_google"/>

如果要使用图标默认颜色,请更改 app:tint="@null"


14
将用作app:backgroundTint=""背景色和app:tint=""图像色调。
雷·亨特

22
我看了约30分钟,直到我意识到它不应该android:tint,而是app:tint
Panos Gr

18

这比获取可绘制对象容易,您只需要访问滤色器并将其设置为所需的颜色即可。

FloatingActionButton myFab = (FloatingActionButton) findViewById(R.id.myfabid);

myFab.setColorFilter(Color.WHITE);

1
我不知道为什么它被否决了,这是正确的解决方案,应该是公认的答案。
伊桑(Ishaan)

1
将此片段yourFab.setColorFilter(getResources().getColor(R.color.red));
用作

如何在xml或样式中设置FAB颜色?
roghayeh hosseini

android:tintAPI 21及更高版本的@roghayehhosseini 。如果您使用支持库,它也可以工作android.support.design.widget.FloatingActionButton
Daniel Campos

使用app:tint支持21以下的API
GilbertS

17

您必须进行更改app:tint才能正常工作。android:tint没有为我做任何改变。


7

使用Google设计网站上的ic_add白色版本。

android:tint 看起来像一个干净的解决方案,但在API级别21以下不受支持

与尝试以编程方式更改现有图标的颜色相比,使用位图可以为您的应用程序增加更少的复杂性。较少的复杂性意味着较少的测试内容:)


3
在我看来,仿佛android:tint对工程android.support.design.widget.FloatingActionButton的支持库定义甚至较低API级别的设备,我只是测试它一个豆形软糖图像(API 16)上。
arekolek

7

由于FloatingActionButton扩展,ImageView我们可以使用ImageViewCompat该图标着色:

ImageViewCompat.setImageTintList(
    floatingActionButton,
    ColorStateList.valueOf(Color.WHITE)
);

如果您想切换图标颜色,这是有效的方法,也是通过代码完成此操作的最佳方法之一!谢谢!
杰里米

2

如果您使用的是材质FAB,请使用app:tint更改图标的颜色,而不是android:tint


0

如果您使用的是材质FAB,则可以使用Kotlin中的以下代码以编程方式对其进行样式设置。

fab.supportImageTintList = ContextCompat.getColorStateList(context, R.color.fab_icon_tint)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.