Android changing Floating Action Button color

Question

I have been trying to change Material s Floating Action Button color  but without success    lt 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    gt    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

User · Answer

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!

User · Answer

lt 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   gt    Note that you add colors  in res values color xml and include the attribute in your fab      app backgroundTint   color addedColor

User · Answer

mFab setBackgroundTintList ColorStateList valueOf ContextCompat getColor mContext R color mColor

User · Answer

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

User · Answer

The FAB is colored based on your colorAccent    lt style name  AppTheme  parent  Base Theme AppCompat Light  gt       lt item name  colorAccent  gt  color accent lt  item gt   lt  style gt

User · Answer

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

User · Answer

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    lt  xml version  1 0  encoding  utf-8   gt   lt resources gt       lt color name  colorPrimary  gt  3F51B5 lt  color gt       lt color name  colorPrimaryDark  gt  303F9F lt  color gt       lt color name  colorAccent  gt  FF4081 lt  color gt        lt color name  corBotaoFoto  gt  f52411 lt  color gt       lt color name  corPar  gt  8e8f93 lt  color gt       lt color name  corImpar  gt  494848 lt  color gt    lt  resources gt    Now my Floating Action Button with the color I ve created and named  corPar     lt 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   gt    It worked for me  Good Luck

User · Answer

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     lt com google android material floatingactionbutton FloatingActionButton                   app backgroundTint             app srcCompat   drawable ic plus 24   gt     You can use fab setBackgroundTintList    You can customize your style using the  lt item name  backgroundTint  gt  attribute      lt  -- lt item name  floatingActionButtonStyle  gt  style Widget MaterialComponents FloatingActionButton lt  item gt  -- gt     lt style name  MyFloatingActionButton  parent   style Widget MaterialComponents FloatingActionButton  gt       lt item name  backgroundTint  gt  00f lt  item gt       lt  -- color used by the icon -- gt       lt item name  tint  gt  color     lt  item gt     lt  style gt     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       lt style name  MyFloatingActionButton  parent   style Widget MaterialComponents FloatingActionButton  gt       lt item name  materialThemeOverlay  gt  style MyFabOverlay lt  item gt     lt  style gt      lt style name  MyFabOverlay  gt       lt item name  colorSecondary  gt  color custom2 lt  item gt       lt  -- color used by the icon -- gt       lt item name  colorOnSecondary  gt  color     lt  item gt     lt  style gt

User · Answer

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

User · Answer

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

User · Answer

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                  lt 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   gt    Notice it is   app backgroundTint   android color white    and not   android backgroundTint   android color white

User · Answer

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       lt style name  AppTheme  parent  Theme MaterialComponents Light NoActionBar  gt       lt  --    whatever else you declare in your app theme   -- gt       lt  -- Set colorSecondary to change background of FAB  backgroundTint  -- gt       lt item name  colorSecondary  gt  color colorSecondary lt  item gt       lt  -- Customize colorSecondary to change icon text of FAB  maps to tint and rippleColor  -- gt       lt item name  colorOnSecondary  gt  android color white lt  item gt   lt  style gt

User · Answer

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    lt style name  AppTheme FloatingAccentButtonOverlay   gt       lt item name  colorAccent  gt  color colorFloatingActionBarAccent lt  item gt   lt  style gt    your layout xml    lt android support design widget FloatingActionButton        android theme  AppTheme FloatingAccentButtonOverlay               lt  android support design widget FloatingActionButton gt

User · Answer

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

User · Answer

add colors in color xml file and then add this line of code    floatingActionButton setBackgroundTintList ColorStateList valueOf getResources   getColor R color fab2 color

User · Answer

My solution  which worked for me with Data Binding val color   ContextCompat getColor context  R color colorPrimary  binding fab backgroundTintList   ColorStateList valueOf getColor

User · Answer

just use   app backgroundTint   color colorPrimary    dont use   android backgroundTint   color colorPrimary

User · Answer

in Kotlin   val gray   getColor requireContext    R color green  binding fabSubmit backgroundTintList   ColorStateList valueOf gray

User · Answer

I got the same problem and its all snatching my hair  Thanks for this  https   stackoverflow com a 35697105 5228412  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

User · Answer

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

User · Answer

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

User · Answer

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    lt 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   gt     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    lt 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    gt

User · Answer

use   app backgroundTint   color orange  in     lt 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    gt      lt  androidx coordinatorlayout widget CoordinatorLayout gt

User · Answer

You can use this code in case you want to change the color programmatically  floating setBackgroundTintList getResources   getColorStateList R color vermelho

User · Answer

Changing Floating action button background color by using below line  app backgroundTint   color blue    Changing Floating action button icon color  android tint   color white

[java] Android changing Floating Action Button color

Examples related to java

Examples related to android

Examples related to android-5.0-lollipop

Examples related to floating-action-button