Android Changing Floating Action Button Color

Android changing Floating Action Button color

As described in the documentation, by default it takes the color set in styles.xml attribute 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).

If you wish to change the color

• in XML with attribute 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" >

• in code with .setBackgroundTintList (answer below by ywwynm)

As @Dantalian mentioned in the comments, if you wish to change the icon color for Design Support Library up to v22 (inclusive), you can use

android:tint="@color/white"     

For Design Support Library since v23 for you can use:

app:tint="@color/white"   

Also with androidX libraries you need to set a 0dp border in your xml layout:

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

How to change the fill color of the image of floating action button in android?

In the themes.xml file (path: app -> src -> main -> res -> values -> themes.xml) change the value of the item with colorOnSecondary from @color/black to @color/white or any color of your choice but make sure the color should be in your colors.xml else add the hexadecimal color code in your themes.xml.

The themes.xml file will look like this

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.SmartNotes" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

or in the add app:tint in the Floating Action Button's xml code like given below

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="30dp"
        android:layout_marginBottom="30dp"
        android:clickable="true"
        app:tint="#ffffff"
        app:backgroundTint="#3F51B5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:rippleColor="#ffffff"
        app:srcCompat="@drawable/ic_baseline_add_24"
        android:focusable="true"
        tools:ignore="VectorDrawableCompat" />

how to change the color of vector asset in FloatingActionButton?

try this with app:srcCompat and app:tint:

<com.google.android.material.floatingactionbutton.FloatingActionButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:backgroundTint="@color/white"
                    android:focusable="true"
                    app:srcCompat="@drawable/ic_camera_24"
                    app:tint="@color/green"
                    app:fabSize="mini"
                    app:rippleColor="@color/green" />

src: https://material.io/components/buttons-floating-action-button/android#mini-fabs

Is it possible to change the color of a floating action button every time it is clicked?

Try to add app:backgroundTint to your FloatingActionButton in xml

<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"
    app:srcCompat="@android:drawable/ic_dialog_email"
    app:backgroundTint="@color/red"/>

And in your activity change button color by adding click listener:

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        fab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(MainActivity.this, R.color.blue)));
    }
});

Set FAB icon color

UPDATE 2

If you are using com.google.android.material.floatingactionbutton.FloatingActionButton, use app:tint

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

UPDATE

Refer to the answer of @Saleem Khan which is the standard way to set the app:tint using:

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

via XML on FloatingActionButton.

OLD (June 2015)

This answer was written before October 2015, when android:tint on FloatingActionButton was supported only with API >= 21.

You can change it programmatically using 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);

Floating Action Button background color does not change on disabling when custom background color is set

Ok so I figured it out. There are other posts about it it turns out.

To have multiple states of the FAB(enabled and disabled) you need to set a ColorStateList instead of a single color.
So I created an xml: drawable/fab_custom_style.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
    <item android:color="@color/darkgray_02"/>
</selector>

and set the backgroundTint to use this xml's selector:

app:backgroundTint="@drawable/fab_custom_style.xml"

Now the FAB has two states for disabled and enabled.

For disabled FAB I use the FAB's standard disabled color = "?attr/colorOnSurface" (Found it here: https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/floatingactionbutton/res/color/mtrl_fab_bg_color_selector.xml)

For the enabled FAB I use my custom color: "@color/darkgray_02"

Why is my FloatingActionButton icon black?

If you're using AndroidX, to change the color of the icon you must use app:tint opposed to android:tint

<com.google.android.material.floatingactionbutton.FloatingActionButton
    style="@style/Widget.MaterialComponents.FloatingActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    app:backgroundTint="@color/colorPrimary"
    app:tint="@color/white"
    app:srcCompat="@drawable/ic_add"
/>

How to change the background image of Floating Action Button programatically in Kotlin?

You can use the setImageDrawable function.

imageFab.setImageDrawable(ContextCompat.getDrawable(context, R.drawable.your_drawable))

---

Related Topics