设置 FAB 图标颜色
Posted
技术标签:
【中文标题】设置 FAB 图标颜色【英文标题】：Set FAB icon color 【发布时间】：2015-09-15 19:21:25 【问题描述】：当前 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_
android:layout_
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_
android:layout_
android:orientation="vertical" >
<include android:id="@+id/toolbar" layout="@layout/toolbar" />
<TextView android:id="@+id/text"
android:text="@string/hello_world"
android:layout_
android:layout_
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_
android:layout_
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp"
android:paddingBottom="16dp" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_
android:layout_
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" />
【问题讨论】：
【参考方案1】：使用 android:tint 属性你可以像这样设置颜色
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_
android:layout_
android:layout_gravity="bottom|end"
android:tint="@android:color/white"
android:src="@android:drawable/ic_input_add"
/>
【讨论】：
这对我帮助很大，比以编程方式简单得多。 不小心在这里看到了你的照片。很好的解决方案萨利姆。 :-) 这么干净的解决方案android:tint 似乎仅在 API 级别 21 及更高版本中受支持:( developer.android.com/training/material/drawables.html
@alexbirkett 除了 FloatingActionButton 是这里支持库的一部分，并且似乎也在旧 API 上实现它（使用 API 16 进行了尝试）。【参考方案2】：
更新 2
如果您使用的是com.google.android.material.floatingactionbutton.FloatingActionButton，请使用app:tint
app:tint="@android:color/white"
更新
参考@Saleem Khan 的回答，这是设置app:tint 的标准方法：
android:tint="@android:color/white"
通过FloatingActionButton上的XML。
旧（2015 年 6 月）
此答案是在 2015 年 10 月之前编写的，当时 FloatingActionButton 上的 android:tint 仅支持 API >= 21。
您可以使用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);
【讨论】：
设置PorterDuff.Mode.SRC_ATOP和使用Drawable myFabSrc = ResourcesCompat.getDrawable(getResources(), android.R.drawable.ic_input_add, getTheme());时有效
你的解决方案太复杂了。只需使用 android:tint="@android:color/white"
这并不复杂@MahdiElMasaoudi。有时和大多数时候都有必须以编程方式更新的用例！尽可能减少开销取决于用户。
如果你在com.google.android.material包中使用FloatingActionButton，你应该添加app:tint而不是android:tint。
使用app:tint="@android:color/white"【参考方案3】：
如果您使用的是Material Components
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_
android:layout_
android:layout_margin="16dp"
android:layout_gravity="bottom|end"
app:fabSize="normal"
app:tint="@color/colorAccent"
app:srcCompat="@drawable/ic_google"/>
如果要使用图标默认颜色，请更改app:tint="@null"
【讨论】：
使用app:backgroundTint=""作为背景颜色，使用app:tint=""作为图像色调。
我找了大约 30 分钟，直到我意识到它不应该是 android:tint 而应该是 app:tint。
'app:tint="@null"' 拯救我的一天 :)【参考方案4】：
您必须更改 app:tint 才能使其正常工作。 android:tint 没有为我做任何改变。
【讨论】：
【参考方案5】：这比获取drawables更容易，您只需要访问颜色过滤器并将其设置为您想要的颜色。
FloatingActionButton myFab = (FloatingActionButton) findViewById(R.id.myfabid);
myFab.setColorFilter(Color.WHITE);
【讨论】：
我不知道为什么它被否决了，这是正确的解决方案，应该是公认的答案。 在片段中使用这个yourFab.setColorFilter(getResources().getColor(R.color.red));
如何在xml或style中设置FAB颜色？
@roghayehhosseini android:tint 适用于 API 21 及更高版本。如果您使用支持库android.support.design.widget.FloatingActionButton，它也可以工作
使用app:tint支持21以下的API【参考方案6】：
由于FloatingActionButton 扩展了ImageView，我们可以使用ImageViewCompat 为图标着色：
ImageViewCompat.setImageTintList(
floatingActionButton,
ColorStateList.valueOf(Color.WHITE)
);
【讨论】：
这是有效的，如果你想切换图标颜色，这是通过代码实现它的最佳方法之一！谢谢！ 我尝试使用 setImageResource 使用不同颜色的相同可绘制对象，但没有锻炼。这对我来说是最好的方式 这对我也有用。我必须在点击它时更改 fab 图标和它的颜色。【参考方案7】：使用来自 google 设计网站的白色版本的 ic_add。
android:tint 看起来像一个干净的解决方案，但它在 API 级别 21 以下不受支持
与尝试以编程方式更改现有图标的颜色相比，使用位图为您的应用增加的复杂性更低。更少的复杂性意味着要测试的东西更少:)
【讨论】：
在我看来，android:tint 似乎适用于支持库中定义的android.support.design.widget.FloatingActionButton，即使在较低 API 级别的设备上也是如此，我刚刚在 JellyBean 图像（API 16）上对其进行了测试。 【参考方案8】：
如果您使用的是材质 FAB，请使用 app:tint 来更改图标的颜色，而不是 android:tint
【讨论】：
【参考方案9】：如果要更改 CollapsingToolbarLayout 中图标的颜色，请使用以下代码
app:tint="@color/white"
使用应用而不是 Android
【讨论】：
【参考方案10】：试试这个代码
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_
android:layout_
android:layout_gravity="bottom|end"
android:backgroundTint="@color/sm_blue"
app:tint="@color/white"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_input_add" />
结果
【讨论】：
【参考方案11】：对于 API >= 21
我以编程方式更改 FloatingActionButton 图标颜色的解决方案
val fab = FloatingActionButton(requireContext())
fab.apply
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M)
imageTintList = ColorStateList.valueOf(Color.WHITE)
【讨论】：
【参考方案12】：如果您使用的是材料 FAB，您可以使用以下 Kotlin 代码以编程方式对其进行样式设置。
fab.supportImageTintList = ContextCompat.getColorStateList(context, R.color.fab_icon_tint)
【讨论】：
【参考方案13】： <com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/add_loan"
android:layout_
android:layout_
android:layout_margin="@dimen/medium"
android:layout_marginBottom="16dp"
android:backgroundTint="@color/ci_blue"
android:theme="@style/fabtheme"
app:srcCompat="@drawable/ic_baseline_add_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:rippleColor="@color/white" />
主题
<style name="fabtheme" parent="Widget.Design.FloatingActionButton">
<item name="colorOnSecondary">@color/white</item>
</style>
或
使用属性
app:tint="@color/white"
【讨论】：
【参考方案14】：您可以自定义样式：
<style name="FloatingButton" parent="Widget.MaterialComponents.FloatingActionButton">
<item name="colorSecondary">@color/red</item>
<item name="colorOnSecondary">@color/white</item>
</style>
其中 colorSecondary 是背景，colorOnSecondary 是按钮可绘制对象的颜色。
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_
android:layout_
android:src="@drawable/ic_phone"
android:theme="@style/FloatingButton" />
【讨论】：
【参考方案15】：如果您使用的是com.google.android.material.floatingactionbutton.FloatingActionButton
然后
要更改浮动操作按钮的背景颜色，请使用app:backgroundTint
要更改浮动操作按钮的图标颜色，请使用app:tint
要更改 Floating Action Button 的 Icon Drawable，请使用 app:srcCompat
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_
android:layout_
app:backgroundTint="@color/white"
app:srcCompat="@drawable/fb_icon"
app:tint="@android:color/black" />
【讨论】：
【参考方案16】：在 Java 中
private FloatingActionButton login;
login = findViewById(R.id.loginbtn);
login.setColorFilter(android.R.color.white);
在 XML 中
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/loginbtn"
android:layout_
android:layout_
android:backgroundTint="@color/colorPrimaryDark"
android:src="@drawable/loginicon"
app:rippleColor="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/pass_l" />
【讨论】：
以上是关于设置 FAB 图标颜色的主要内容，如果未能解决你的问题，请参考以下文章