Android changing Floating Action Button color

Asked 21/6, 2015 at 21:20 Answered 5/9, 2023 at 9:3

Solved java android android-5.0-lollipop floating-action-button

648

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"));

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.

Ulu answered 21/6, 2015 at 21:20 Comment(5)

possible duplicate of Change color of Floating Action Button from Appcompat 22.2.0 programmatically – Excommunicative 21/6, 2015 at 21:57

Ripple effect is not available on pre-lollipop devices because it utilizes a new RenderThread. – Jarv 21/6, 2015 at 22:0

@karaokyo ok but how am I doing it? – Ulu 22/6, 2015 at 17:20

Google does a real bad job in my opinion to make these things accesible – Chamade 17/7, 2015 at 13:51

To do this programmatically and backwards compatible, see #30966722 – Dania 27/7, 2016 at 16:1

1236

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

Invocate answered 2/7, 2015 at 8:24 Comment(9)

This doesn't work in Design Support Library v23 for < API 12 devices. It was working in v22, so they broke something, apparently. – Dharna 6/10, 2015 at 5:39

Is there a way how to set app:borderWidth programatically? Thanks – Spiegleman 22/10, 2015 at 6:50

Note that if you want to also change the image color to white for example you can use: android:tint="@android:color/white" – Brinson 4/11, 2015 at 11:11

android:tint="@color/white" didnt work for me because it couldn't resolve it for some reason. android:tint="#ffffff" Works for me though – Tunis 6/11, 2015 at 2:2

That is because @color/white does not exists in your colors.xml. use @android:color/white or create a color named white or whatever you need – Brinson 12/11, 2015 at 8:40

use "app:backgroundTint" not "android:backgroundTint" – Beautifully 4/2, 2016 at 8:47

When coloring the background, please be careful of the auto-complete and use app:backgroundTint and not android:tint, which is the default. – Catamnesis 25/8, 2016 at 6:36

@VasilValchev But the latter seems to work fine for me – Laporte 21/11, 2017 at 16:43

AAPT: error: duplicate attribute. Just remove one of app:borderWidth="0dp" – Snowshed 13/1, 2020 at 13:16

263

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:

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

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

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.

Murraymurre answered 16/8, 2015 at 1:27 Comment(9)

Thanks for this, I didn't know how to use ColorStateList. However, your code leaves my FAB with a stroke (outline) of the theme accent color. Do you have any idea how I can remove that stroke (or change it's color, rather) and have a FAB in a special color that looks like that special color is the accent color? – Seducer 20/8, 2015 at 15:8

@KaitlynHanrahan Please see my update. Thanks for your comment. – Murraymurre 21/8, 2015 at 9:12

That works perfect -- Lollypop and Kitkat look the same, even both have that little shading so the FAB pops against the same color in the background (I have it partially over the Toolbar). Thanks so much! It's simple but I don't know if I ever would have found that on my own. – Seducer 22/8, 2015 at 17:21

Is there a way how to set app:borderWidth programatically? Thanks – Spiegleman 22/10, 2015 at 6:50

@Štarke Well, after looking at the source code of FloatingActionButton, I'm afraid that you cannot set it programatically right now since there is no setter for mBorderWidth. – Murraymurre 22/10, 2015 at 13:7

@mutkan Yes, as far as I know, someone committed a bug about this and Google fixed it in 23.2.1. So please update your project. – Murraymurre 6/4, 2016 at 16:20

One thing to be careful of is that #123456 and #12345678 has a difference. The first one is transparent (probably assumes 00 for the first two hex integers). – Unbeaten 26/4, 2016 at 14:12

getResources().getColor(int id) is deprecated now needs getResources().getColor(int id, Theme theme) – Bouchard 6/10, 2017 at 16:59

That's what I needed. Works with android.support.v7 – Pritchard 17/4, 2018 at 21:39

142

As Vasil Valchev noted in a comment it is simpler than it looks, but there is a subtle difference that I wasn't noticing in my XML.

<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"
    app:backgroundTint="@android:color/white"/>

Notice it is:

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

and not

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

Cachexia answered 12/2, 2016 at 11:9 Comment(5)

This is important because these are two completely different things: android:backgroundTint="" is from Api level 21 and part of the Lollipop Material Design and will be ignored below Lollipop. Also it doesn't change the FAB colour completely because it is not a solid color. You have to use the app: one to make it work. – Quintessa 5/2, 2017 at 15:33

Thanks, using android:color caused my app to crash, and it was driving me nuts! Thanks for saving my app and what's left of my sanity ;-) – Biparous 30/3, 2017 at 17:47

@Biparous no problem, was scratching my head for a while as well before noticing ;) – Cachexia 31/3, 2017 at 12:56

How would this work programatically since on the java side there is no difference like app: and android: in the XML. – Eastward 22/5, 2017 at 7:58

@Eastward you can set it with a ColorStatesList, post a new question and post the link here so I can answer it ;) – Cachexia 22/5, 2017 at 8:31

if you try to change color of FAB by using app, there some problem. frame of button have different color, so what you must to do:

app:backgroundTint="@android:color/transparent"

and in code set the color:

actionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.white)));

Lagniappe answered 16/9, 2015 at 14:7 Comment(2)

This work for normal colors. If I have given alpha color like #44000000 the frame color issue is reproducible. – Beguine 12/2, 2016 at 9:38

getResources.getColor() is deprecated, consider using ContextCompat.getColor(context, your colour); instead. Hope it helps – Enchain 6/5, 2016 at 9:24

just use,

app:backgroundTint="@color/colorPrimary"

dont use,

android:backgroundTint="@color/colorPrimary"

Innes answered 8/3, 2016 at 9:0 Comment(1)

hmmmm this cause android studio autocomplete give result use android:backgroundTint , this answer verry good – Medellin 25/4, 2019 at 7:31

The FAB is colored based on your colorAccent.

<style name="AppTheme" parent="Base.Theme.AppCompat.Light">
    <item name="colorAccent">@color/accent</item>
</style>

Jarv answered 21/6, 2015 at 21:55 Comment(11)

Well, the default color is not green. Where did you set a green color? – Jarv 22/6, 2015 at 17:44

I did not. As you see, this xml is the only place I set up the layout of the button... – Ulu 22/6, 2015 at 17:50

Maybe you should create a new project with just the FAB and post the code for the entire thing. – Jarv 22/6, 2015 at 17:59

I really don't see anything I can add. Maybe this: My AppTheme's parent is "@style/Theme.AppCompat.Light", min version is 8 and target version is 21. Maybe it's related to this theme that no color is affecting the fab? I can't use Material theme because it's only for min api 21. – Ulu 22/6, 2015 at 18:11

Well, it works great for me. So, if you aren't willing to do anything else to help replicate the issue, then I guess that's it. – Jarv 22/6, 2015 at 18:17

Could you please post an answer with all related code, so I open up a new project / copy it to mine and see if that works at least? – Ulu 22/6, 2015 at 18:20

Wow... I basically just asked you to do the same thing and you weren't willing to do it. It is quite hypocritical of you to believe that your code was adequate, but that my addition to your code is not adequate. It falls to the asker to create an MCVE. Thanks. – Jarv 22/6, 2015 at 18:27

how will it be in the XML though ? – Broeder 7/11, 2015 at 18:54

You must modify the theme you're using for that Activity in your AndroidManifest.xml. <activity android:name=".Activities.MainActivity" android:theme="@style/AppTheme" /> – Skyline 25/2, 2016 at 19:22

Not anymore, based on Theme Attribute Mapping the Floating Action Button now (I verified myself) is colored to colorSecondary (com.google.android.material:material:1.1.0-alpha02) – Matthaeus 4/2, 2019 at 7:26

The correct way. Tinting gives fill but tiny stroke of colorAccent remains around FAB. To use this needed to set theme for FAB:

<style name="FabTheme" parent="Widget.MaterialComponents.FloatingActionButton">  <item name="colorAccent">@color/your_color</item> </style>

then add android:theme="@style/FabTheme". – Schick 20/11, 2019 at 16:31

mFab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(mContext,R.color.mColor)));

Seritaserjeant answered 16/6, 2017 at 11:22 Comment(1)

This is the easiest solution, way easier than using a custom drawable. – Chlorinate 14/11, 2017 at 20:55

New theme attribute mapping for Floating Action Button in material 1.1.0

In your app theme:

Set colorSecondary to set a color for background of FAB (maps to backgroundTint)
Set colorOnSecondary to set a color for icon/text and ripple color of FAB (maps to tint and rippleColor)

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- ...whatever else you declare in your app theme.. -->
    <!-- Set colorSecondary to change background of FAB (backgroundTint) -->
    <item name="colorSecondary">@color/colorSecondary</item>
    <!-- Customize colorSecondary to change icon/text of FAB (maps to tint and rippleColor) -->
    <item name="colorOnSecondary">@android:color/white</item>
</style>

Bifarious answered 15/5, 2019 at 23:33 Comment(2)

Finally someone who provides simple solutions for FAB background and foreground (icon) colors. – Restaurant 5/1, 2020 at 15:16

for more info: material.io/develop/android/theming/color + material.io/design/color/… – Brownout 21/6, 2021 at 21:50

Other solutions may work. This is the 10 pound gorilla approach that has the advantage of being broadly applicable in this and similar cases:

Styles.xml:

<style name="AppTheme.FloatingAccentButtonOverlay" >
    <item name="colorAccent">@color/colorFloatingActionBarAccent</item>
</style>

your layout xml:

<android.support.design.widget.FloatingActionButton
       android:theme="AppTheme.FloatingAccentButtonOverlay"
       ...
 </android.support.design.widget.FloatingActionButton>

Creativity answered 21/11, 2015 at 15:10 Comment(3)

Hmm, seems like this should work, but I'm getting compiler errors in the layout file String types not allowed (at 'theme' with value 'AppTheme.FloatingAccentButtonOverlay'). Maybe I'm missing a point with the styles.xml.... – Catamnesis 25/8, 2016 at 6:30

@ScottBiggs use android:theme="@style/AppTheme.FloatingAccentButtonOverlay" but this solutin does not work for me either way... – Centring 14/1, 2017 at 21:20

What about API 16 which does not have coloarAccent atrribute? – Bumbling 23/4, 2017 at 9:51

With the Material Theme and the material components FloatingActionButton by default it takes the color set in styles.xml attribute colorSecondary.

You can use the app:backgroundTint attribute in xml:

<com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
       app:backgroundTint=".."
       app:srcCompat="@drawable/ic_plus_24"/>

You can use fab.setBackgroundTintList();
You can customize your style using the <item name="backgroundTint"> attribute

  <!--<item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item> -->
  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="backgroundTint">#00f</item>
    <!-- color used by the icon -->
    <item name="tint">@color/...</item>
  </style>

starting from version 1.1.0 of material components you can use the new materialThemeOverlay attribute to override the default colors only for some components:

  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="materialThemeOverlay">@style/MyFabOverlay</item>
  </style>

  <style name="MyFabOverlay">
    <item name="colorSecondary">@color/custom2</item>
    <!-- color used by the icon -->
    <item name="colorOnSecondary">@color/...</item>
  </style>

Jampack answered 28/8, 2019 at 9:26 Comment(0)

Changing Floating action button background color by using below line

app:backgroundTint="@color/blue"

Changing Floating action button icon color

android:tint="@color/white"

Wieren answered 12/10, 2017 at 7:23 Comment(1)

app:tint should be used instead of android:tint – Beveridge 12/10, 2023 at 23:30

The document suggests that it takes the @color/accent by default. But we can override it on code by using

fab.setBackgroundTintList(ColorStateList)

Also remember,

The minimum API version to use this library is 15 so you need to update it! if you dont want to do it then you need to define a custom drawable and decorate it!

Sandor answered 24/6, 2015 at 18:5 Comment(5)

works, but then I have to target api 21+. if I target api 8 can't call this method. – Ulu 26/6, 2015 at 15:12

Just include this design library that has been released by google "com.android.support:design:22.2.0". This can be used on devices that are non-lollipop versions! cheers!! – Sandor 27/6, 2015 at 18:10

of course I do, but this is the error on this code: Call requires API level 21 (current min is 8): android.widget.ImageView#setBackgroundTintList – Ulu 27/6, 2015 at 18:23

The minimum API version to use this library is 15 so you need to update it! if you dont want to do it then you need to define a custom drawable and decorate it! – Sandor 27/6, 2015 at 18:53

Oh thanks! I didn't know, thought it was 21 since this is what the error said. Please post this as an answer and I'll accept it! – Ulu 28/6, 2015 at 17:29

Thanks to autocomplete. I got lucky after a few hit and trials:

    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    card_view:backgroundTint="@color/whicheverColorYouLike"

-- or -- (both are basically the same thing)

    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:backgroundTint="@color/whicheverColorYouLike"

This worked for me on API Version 17 with design library 23.1.0.

Phenomenalism answered 16/11, 2015 at 9:30 Comment(0)

I got the same problem and its all snatching my hair. Thanks for this https://mcmap.net/q/65028/-android-dynamically-change-fab-floating-action-button-icon-from-code

What we can do..

 favourite_fab.setImageDrawable(ContextCompat.getDrawable(getBaseContext(), R.drawable.favourite_selected));

it works fine for me and wish for others who'll reach here.

Shropshire answered 22/3, 2016 at 17:44 Comment(1)

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. – Votary 22/3, 2016 at 17:51

 <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:elevation="6dp"
    app:backgroundTint="@color/colorAccent"
    app:pressedTranslationZ="12dp"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/add"/>

Note that you add colors in res/values/color.xml and include the attribute in your fab

   app:backgroundTint="@color/addedColor"

Surrebutter answered 21/6, 2016 at 7:7 Comment(0)

for Material design, I just changed the floating action button color like this, Add the below two lines in your Floating action button xml. And done,

 android:backgroundTint="@color/colorPrimaryDark"
 app:borderWidth="0dp"

Coach answered 25/4, 2020 at 7:18 Comment(0)

When using Data Binding you can do something like this:

android:backgroundTint="@{item.selected ? @color/selected : @color/unselected}"

I have made a very simple example

Headgear answered 13/9, 2018 at 8:50 Comment(0)

If you have a Floating Action Button with no drawable you can change the tint programmatically using:

fab.getBackground().mutate().setTint(ContextCompat.getColor(yourContext, R.color.anyColor));

Stronski answered 6/3, 2020 at 12:30 Comment(2)

Thats the solution I was searchin for. I had a simple fab with backgrountTint and couldn't find a way to change it programmatically until I found this. – Thessalonians 3/4, 2020 at 16:42

I use Data Binding, and I got a NullPointerException... – Beavers 26/8, 2020 at 15:19

i did it like this android:background="@color/colorAccent" i just go to folder res then click on folder values and then on colors.xml in colors.xml I just change the color of colorAccent and call it in android:background and its done

Ringler answered 29/4, 2018 at 16:46 Comment(0)

The point we are missing is that before you set the color on the button, it's important to work on the value you want for this color. So you can go to values > color. You will find the default ones, but you can also create colors by copping and pasting them, changing the colors and names. Then... when you go to change the color of the floating button (in activity_main), you can choose the one you have created

Exemple - code on values > colors with default colors + 3 more colors I've created:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="corBotaoFoto">#f52411</color>
    <color name="corPar">#8e8f93</color>
    <color name="corImpar">#494848</color>

</resources>

Now my Floating Action Button with the color I've created and named "corPar":

<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"
        android:src="@android:drawable/ic_input_add"
        android:tint="#ffffff"
        app:backgroundTint="@color/corPar"/>

It worked for me. Good Luck!

Stimson answered 15/4, 2016 at 17:16 Comment(0)

My solution, which worked for me with Data Binding

val color = ContextCompat.getColor(context, R.color.colorPrimary)
binding.fab.backgroundTintList = ColorStateList.valueOf(getColor)

Beavers answered 26/8, 2020 at 15:25 Comment(0)

in Kotlin:

val gray = getColor(requireContext(), R.color.green)
binding.fabSubmit.backgroundTintList = ColorStateList.valueOf(gray)

Bedel answered 8/6, 2020 at 19:44 Comment(0)

You can use Extended, so set app:iconTint like this:

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       
        app:icon="@drawable/d0"
        app:iconTint="@color/white"
         />

Troup answered 16/4, 2022 at 10:6 Comment(0)

You can achieve this in Kotlin by the below code.

 binding.fabAddPostMenu.backgroundTintList =
    ColorStateList.valueOf(ContextCompat.getColor(this,R.color.complaint_red))

Ales answered 28/3, 2023 at 4:54 Comment(0)

You can use this code in case you want to change the color programmatically

floating.setBackgroundTintList(getResources().getColorStateList(R.color.vermelho));

Subtreasury answered 7/6, 2018 at 19:11 Comment(0)

add colors in color.xml file and then add this line of code... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));

Bracelet answered 31/8, 2018 at 16:32 Comment(0)

use

app:backgroundTint="@color/orange" in


<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/id_share_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/share"
        app:backgroundTint="@color/orange"
        app:fabSize="mini"
        app:layout_anchorGravity="end|bottom|center" />



</androidx.coordinatorlayout.widget.CoordinatorLayout>

Wahlstrom answered 1/9, 2019 at 12:0 Comment(0)

In styles.xml add:

<style name="FloatButtonSytle" parent="Widget.MaterialComponents.FloatingActionButton">
    <item name="colorAccent">@color/main_gradient_end</item>
</style>

and in your FloatingActionButton element add:

style="@style/FloatButtonSytle"

like this:

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/aparat_button"
            style="@style/FloatButtonSytle"
            android:layout_width="75dp"
            android:layout_height="75dp"
            />

Pizarro answered 5/9, 2023 at 9:3 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags