Android changing Floating Action Button color

Question

I have been trying to change Material's Floating Action Button color, but without success.

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

I have tried to add:

android:background="@color/mycolor" 

or via code:

FloatingActionButton fab = (FloatingActionButton) rootView.findViewById(R.id.profile_edit_fab); fab.setBackgroundColor(Color.parseColor("#mycolor")); 

or

fab.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#mycolor"))); 

But none of the above worked. I have also tried the solutions in the proposed duplicate question, but none of them works; the button remained green and also became a square.

P.S. It would be also nice to know how to add ripple effect, couldn't understand that either.

Answer 1

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

Answer 2

Vijet Badigannavar's answer is correct but using ColorStateList is usually complicated and he didn't tell us how to do it. Since we often focus on changing View's color in normal and pressed state, I'm going to add more details:

1. If you want to change FAB's color in normal state, you can just write

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

2. If you want to change FAB's color in pressed state, thanks for Design Support Library 22.2.1, you can just write

   mFab.setRippleColor(your color in int); 

   By setting this attribute, when you long-pressed the FAB, a ripple with your color will appear at your touch point and reveal into whole surface of FAB. Please notice that it won't change FAB's color in normal state. Below API 21(Lollipop), there is no ripple effect but FAB's color will still change when you're pressing it.

Finally, if you want to implement more complex effect for states, then you should dig deeply into ColorStateList, here is a SO question discussing it: How do I create ColorStateList programmatically?.

UPDATE: Thanks for @Kaitlyn's comment. To remove stroke of FAB using backgroundTint as its color, you can set app:borderWidth="0dp" in your xml.