Set FAB icon color

current fab
current FAB

I would like to know how to change the icon color of the FAB (Floating Action Button) widget supplied by the 'com.android.support:design:22.2.0' library from green to white.

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

105659 次浏览
小开
最佳答案

更新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年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);
小开

使用 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"
/>
小开

使用白色版本的 C _ add从谷歌设计网站。

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

与尝试通过编程方式更改现有图标的颜色相比，使用位图给应用程序增加的复杂性更少。更少的复杂性意味着需要测试的东西更少:)

小开

这比得到绘图更容易，你只需要访问颜色过滤器，并设置它的颜色，你想要的。

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


myFab.setColorFilter(Color.WHITE);
小开

由于 FloatingActionButton扩展了 ImageView，我们可以使用 ImageViewCompat给图标着色:

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

如果您使用的是 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"

小开

如果你使用的是材料 FAB，你可以在 Kotlin 使用下面的代码来编程设计它的样式。

fab.supportImageTintList = ContextCompat.getColorStateList(context, R.color.fab_icon_tint)
小开

你必须改变 app:tint才能起作用。 android:tint没有为我做任何改变。

小开

如果你使用材质 FAB 使用 app: tint 来改变图标的颜色而不是 android: tint

小开

如果要更改 CollapsingToolbarLayout 中图标的颜色，请使用以下代码

app:tint="@color/white"

使用应用程序而不是 Android

小开 
 <com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/add_loan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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>

或者

使用属性

应用程序: tint = “@color/white”

小开

你可以自定义风格:

<style name="FloatingButton" parent="Widget.MaterialComponents.FloatingActionButton">
<item name="colorSecondary">@color/red</item>
<item name="colorOnSecondary">@color/white</item>
</style>

其中 color Second 是背景，color OnSecond 是按钮可绘制的颜色。

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_phone"
android:theme="@style/FloatingButton" />
小开

用爪哇语

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_width="wrap_content"
android:layout_height="wrap_content"
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" />
小开

如果您使用的是 com.google.android.material.floatingactionbutton.FloatingActionButton

然后

  1. 若要更改浮动动作按钮的 背景颜色，请使用 app:backgroundTint

  2. 若要更改浮动动作按钮的 图标的颜色，请使用 app:tint

  3. 若要更改浮动动作按钮的 图标可绘制，请使用 app:srcCompat

     <com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="@color/white"
app:srcCompat="@drawable/fb_icon"
app:tint="@android:color/black" />
小开

试试这个代码

    <com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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" />

结果 enter image description here

小开

空气污染指数 > = 21

以编程方式更改 FloatingActionButton图标颜色的解决方案

val fab = FloatingActionButton(requireContext())
fab.apply {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
imageTintList = ColorStateList.valueOf(Color.WHITE)
}
小开

如果你使用 延伸，设置 app:iconTint，你可以这样做:

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="@+id/fAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:icon="@drawable/d0"
app:iconTint="@color/white"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Material3.FloatingActionButton"
tools:ignore="SpeakableTextPresentCheck" />

提交答案