Coloring Buttons in Android with Material Design and AppCompat

Question

Before the AppCompat update came out today I was able to change the color of buttons in Android L but not on older versions  After including the new AppCompat update I am unable to change the color for either version  when I do try the button just disappears  Does anyone know how to change the button color   The following pictures shows what I want to achieve     The white button is default  the red one is what I want   This is what I was doing previously to change the color of the buttons in the styles xml    lt item name  android colorButtonNormal  gt insert color here lt  item gt    and to do it dynamically   button getBackground   setColorFilter getResources   getColor insert color here   PorterDuff Mode MULTIPLY     Also I did change the theme parent from  android style Theme Material Light DarkActionBar to Theme AppCompat Light DarkActionBar

User · Answer

Use    android backgroundTint   color customColor    Or even    android background   color customColor    and that will give custom color to the button

User · Answer

In my case  instead of using Button  I use androidx appcompat widget AppCompatButton and it worked for me

User · Answer

If you use style solution with colorButtonNormal  don t forget to inherit from Widget AppCompat Button Colored so the ripple effect is working     Like   lt style name  CustomButtonStyle  parent  Widget AppCompat Button Colored  gt         lt item name  colorButtonNormal  gt  android color white lt  item gt   lt  style gt

User · Answer

After 2 days looking for answers  the button theming didn t work for me in API  lt  21   My only solution is to override AppCompatButton  tinting not only with the base app theme  colorButtonNormal  but also the view backgroundTint like this    public class AppCompatColorButton extends AppCompatButton        public AppCompatColorButton Context context            this context  null              public AppCompatColorButton Context context  AttributeSet attrs            this context  attrs  android support v7 appcompat R attr buttonStyle              public AppCompatColorButton Context context  AttributeSet attrs  int defStyleAttr            super context  attrs  defStyleAttr            if  TintManager SHOULD BE USED                setSupportBackgroundTintList createButtonColorStateList getContext    attrs  defStyleAttr                         static final int   DISABLED STATE SET   new int   -android R attr state enabled       static final int   FOCUSED STATE SET   new int   android R attr state focused       static final int   PRESSED STATE SET   new int   android R attr state pressed       static final int   EMPTY STATE SET   new int 0        private ColorStateList createButtonColorStateList Context context  AttributeSet attrs  int defStyleAttr            final int     states   new int 4             final int   colors   new int 4           int i   0           final int themeColorButtonNormal   ThemeUtils getThemeAttrColor context  android support v7 appcompat R attr colorButtonNormal             TypedArray a   context obtainStyledAttributes attrs  new int     android R attr backgroundTint    defStyleAttr  0           final int colorButtonNormal   a getColor 0  themeColorButtonNormal             TypedArray a   context obtainStyledAttributes attrs  android support v7 appcompat R styleable View  defStyleAttr  0           final int colorButtonNormal   a getColor android support v7 appcompat R styleable View backgroundTint  themeColorButtonNormal           a recycle            final int colorControlHighlight   ThemeUtils getThemeAttrColor context  android support v7 appcompat R attr colorControlHighlight               Disabled state         states i    DISABLED STATE SET          colors i    ThemeUtils getDisabledThemeAttrColor context  android support v7 appcompat R attr colorButtonNormal           i             states i    PRESSED STATE SET          colors i    ColorUtils compositeColors colorControlHighlight  colorButtonNormal           i             states i    FOCUSED STATE SET          colors i    ColorUtils compositeColors colorControlHighlight  colorButtonNormal           i                Default enabled state         states i    EMPTY STATE SET          colors i    colorButtonNormal          i             return new ColorStateList states  colors             You can then define your Button color like this     lt com example views AppCompatColorButton             android layout width  match parent              android layout height  wrap content              android backgroundTint   ffff0000              app backgroundTint   ffff0000              android text  Button              android textColor   android color white    gt

User · Answer

I set android textColor to  null in my button theme and it helps   styles xml   lt style name  Button Base Borderless  parent  Widget AppCompat Button Borderless Colored  gt       lt item name  android textColor  gt  null lt  item gt   lt  style gt    some layout xml   lt Button     style   style Button Base Borderless      android layout width  wrap content      android layout height  wrap content      android text   string hint    gt    Now button text color is colorAccent defined in AppTheme   lt style name  AppTheme  parent   style Theme AppCompat Light NoActionBar  gt       lt item name  colorAccent  gt  color colorAccent lt  item gt       lt item name  borderlessButtonStyle  gt  style Button Base Borderless lt  item gt       lt item name  alertDialogTheme  gt  style AlertDialog lt  item gt   lt  style gt

User · Answer

Officially fixed in Support Library rev 22  Fri March 13  2015   See relevant google code issue   https   issuetracker google com issues 37008632  Usage example  theme xml    lt item name  colorButtonNormal  gt  color button color lt  item gt    v21 theme xml   lt item name  android colorButtonNormal  gt  color button color lt  item gt

User · Answer

One way to pull this off allows you to just point to a style and NOT theme ALL the buttons in your app the same  In themes xml add a theme       lt style name  Theme MyApp Button Primary Blue  parent  Widget AppCompat Button  gt           lt item name  colorButtonNormal  gt  color someColor lt  item gt           lt item name  android textColorPrimary  gt  android color white lt  item gt       lt  style gt    Now in styles xml add       lt style name  MyApp Button Primary Blue  parent    gt           lt item name  android theme  gt  style Theme MyApp Button Primary Blue lt  item gt       lt  style gt    Now in your layout simply point to the STYLE in your Button        lt Button                     style   style MyApp Button Primary Blue                 gt

User · Answer

This has been enhanced in v23 0 0 of AppCompat library with the addition of more themes including     Widget AppCompat Button Colored   First of all include appCompat dependency if you haven t already  compile  com android support appcompat-v7 23 0 0         exclude group   com google android   module   support-v4      now since you need to use v23 of the app compat  you ll need to target SDK-v23 as well       compileSdkVersion   23     targetSdkVersion   23   In your values theme   lt item name  android buttonStyle  gt  style BrandButtonStyle lt  item gt    In your values style   lt style name  BrandButtonStyle  parent  Widget AppCompat Button Colored  gt       lt item name  colorButtonNormal  gt  color yourButtonColor lt  item gt       lt item name  android textColor  gt  color White lt  item gt   lt  style gt    In your values-v21 style   lt style name  BrandButtonStyle  parent  Widget AppCompat Button Colored  gt       lt item name  android colorButtonNormal  gt  color yourButtonColor lt  item gt       lt item name  android textColor  gt  color White lt  item gt   lt  style gt    Since your button theme is based on Widget AppCompat Button Colored The text color on the button is by default white   but it seems there is an issue when you disable the button  the button will change its color to light grey  but the text color will remain white   a workaround for this is to specifically set the text color on the button to white  as I have done in the style shown above   now you can simply define your button and let AppCompat do the rest      lt Button         android layout width  200dp          android layout height  48dp    gt    Disabled State   Enabled State   Edit    To add  lt Button android theme   style BrandButtonStyle   gt

User · Answer

if you want to do this via code in any color use this   DrawableCompat setTintList button getBackground    ColorStateList valueOf yourColor

User · Answer

With latest Support Library you could just inherit you activity from AppCompatActivity  so it will inflate your Button as AppCompatButton and give you an opportunity to style color of every single button on the layout with using of android theme   style SomeButtonStyle   where SomeButtonStyle is    lt style name  SomeButtonStyle  parent   android style Widget Button  gt       lt item name  colorButtonNormal  gt  color example color lt  item gt   lt  style gt    Worked for me in 2 3 7  4 4 1  5 0 2

User · Answer

To support colored buttons use the latest AppCompat library   23 2 1  with      inflate - XML   AppCompat Widget   android support v7 widget AppCompatButton   AppCompat Style   style   style Widget AppCompat Button Colored    NB  To set a custom color in xml  use the attr  app instead of android    use alt enter or declare xmlns app  http   schemas android com apk res-auto  to use app   app backgroundTint   color your custom color   Example    lt android support v7 widget AppCompatButton      style   style Widget AppCompat Button Colored       app backgroundTint   color your custom color       android layout width  wrap content       android layout height  wrap content            android text  Colored Button   gt       or set it programmatically - JAVA    ViewCompat setBackgroundTintList your colored button   ContextCompat getColorStateList getContext   R color your custom color

User · Answer

Another simple solution using the AppCompatButton   lt android support v7 widget AppCompatButton      android layout width  wrap content       android layout height  wrap content       style   style Widget AppCompat Button Colored       app backgroundTint   color red       android text  UNINSTALL    gt

User · Answer

To change the color of a single button  ViewCompat setBackgroundTintList button  getResources   getColorStateList R color colorId

User · Answer

I ve just created an android library  that allows you to easily modify the button color and the ripple color  https   github com xgc1986 RippleButton   lt com xgc1986 ripplebutton widget RippleButton     android layout width  wrap content      android layout height  wrap content      android id    id btn      android text  Android button modified in layout      android textColor   android color white      app buttonColor   android color black      app rippleColor   android color white   gt    You don t need to create an style for every button you want wit a different color  allowing you to customize the colors randomly

User · Answer

If you want to use AppCompat style like Widget AppCompat Button   Base Widget AppCompat Button Colored  etc   you need to use these styles with compatible views from support library   Code below does not work for pre-lolipop devices    lt Button    android layout width  wrap content     android layout height  wrap content     android theme   style Widget AppCompat Button    gt    You need to use AppCompatButton to enabled AppCompat styles    lt android support v7 widget AppCompatButton    android layout width  wrap content     android layout height  wrap content     android theme   style Widget AppCompat Button    gt

User · Answer

I actually didn t want a change to my custom button styles but unfortunately they weren t working anymore   My App has a minSdkVersion of 9 and everything worked before   I don t know why but since I removed the android  before the buttonStyle it seems to work again  now   working    lt item name  buttonStyle  gt  style ButtonmyTime lt  item gt   before   just gray material buttons    lt item name  android buttonStyle  gt  style ButtonmyTime lt  item gt   I have no spezial folder for newver android version since my buttons are quite flat and they should look the same across all android versions   Maybe someone can tell me why I had to remove the  android   The ImageButton is still working with  android     lt item name  android imageButtonStyle  gt  style ImageButtonmyTimeGreen lt  item gt

User · Answer

Layout    lt android support v7 widget AppCompatButton   style   style MyButton            gt    styles xml    lt style name  MyButton  parent  Widget AppCompat Button Colored  gt     lt item name  backgroundTint  gt  color button background selector lt  item gt     lt item name  android textColor  gt  color button text selector lt  item gt   lt  style gt    color button background selector xml    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state enabled  false  android color   555555   gt       lt item android color   00ff00   gt   lt  selector gt    color button text selector xml    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state enabled  false  android color   888888   gt       lt item android color   ffffff   gt   lt  selector gt

User · Answer

The answer is in THEME not style  The problem is that the Button color is stick to the colorButtonNormal of the theme  I have tried to change the Style in many different ways with no luck  So I changed the button theme   Create a theme with colorButtonNormal and colorPrimary    lt style name  ThemeAwesomeButtonColor  parent  AppTheme  gt       lt item name  colorPrimary  gt  color awesomePrimaryColor lt  item gt       lt item name  colorButtonNormal  gt  color awesomeButtonColor lt  item gt   lt  style gt    Use this theme in button   lt Button         android id    id btn awesome          style   style AppTheme Button          android theme   style ThemeAwesomeButtonColor          android layout width  match parent          android layout height  wrap content          android text   string btn awesome   gt    The  AppTheme Button  can be any thing extends Button style like here I use primary color for text color    lt style name  AppTheme Button  parent  Base Widget AppCompat Button  gt               lt item name  android textColor  gt  attr colorPrimary lt  item gt           lt  style gt    And you get the button in any color you want that compatible to material design

User · Answer

this work for me with appcompat-v7 22 2 0 in android   4 0   in your styles xml    lt style name  Button Tinted  parent  Widget AppCompat Button  gt       lt item name  colorButtonNormal  gt YOUR TINT COLOR lt  item gt       lt item name  colorControlHighlight  gt  color colorAccent lt  item gt       lt item name  android textColor  gt  android color white lt  item gt   lt  style gt    in your layout file    lt Button     android id    id but next      android layout width  match parent      android layout height  wrap content      android text   string but continue      android theme   style Button Tinted    gt

User · Answer

Edit  22 06 2016   Appcompat library started to support material buttons after I posted the original response  In this post you can see the easiest implementation of raised and flat buttons  Original Answer  Since that AppCompat doesn t support the button yet you can use xml as backgrounds  For doing that I had a look at the source code of the Android and found the related files for styling material buttons  1 - Look at the original implementation of material button from source  Have a look at the btn default material xml on android source code  You can copy the file into your projects drawable-v21 folder  But don t touch the color attr here  The file you need to change is the second file  drawable-v21 custom btn xml  lt ripple xmlns android  quot http   schemas android com apk res android quot      android color  quot  attr colorControlHighlight quot  gt       lt item android drawable  quot  drawable btn default mtrl shape quot    gt   lt  ripple gt   2 - Get the shape of the original material button As you realise there is a shape used inside this drawable which you can find in this file of the source code   lt inset xmlns android  quot http   schemas android com apk res android quot     android insetLeft  quot  dimen button inset horizontal material quot     android insetTop  quot  dimen button inset vertical material quot     android insetRight  quot  dimen button inset horizontal material quot     android insetBottom  quot  dimen button inset vertical material quot  gt   lt shape android shape  quot rectangle quot  gt       lt corners android radius  quot  dimen control corner material quot    gt       lt solid android color  quot  attr colorButtonNormal quot    gt       lt padding android left  quot  dimen button padding horizontal material quot               android top  quot  dimen button padding vertical material quot               android right  quot  dimen button padding horizontal material quot               android bottom  quot  dimen button padding vertical material quot    gt   lt  shape gt    3 - Getting dimensions of the material button And in this file you there are some dimensions used from the file that you can find here  You can copy the whole file and put into your values folder  This is important for applying the same size  that is used in material buttons  to all buttons 4 - Create another drawable file for old versions For older versions you should have another drawable with the same name  I am directly putting the items inline instead of referencing  You may want to reference them  But again  the most important thing is the original dimensions of the material button  drawable custom btn xml      lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt       lt selector xmlns android  quot http   schemas android com apk res android quot  gt            lt  -- pressed state -- gt       lt item android state pressed  quot true quot  gt           lt inset xmlns android  quot http   schemas android com apk res android quot              android insetLeft  quot  dimen button inset horizontal material quot              android insetTop  quot  dimen button inset vertical material quot              android insetRight  quot  dimen button inset horizontal material quot              android insetBottom  quot  dimen button inset vertical material quot  gt               lt shape android shape  quot rectangle quot  gt                   lt corners android radius  quot  dimen control corner material quot    gt                   lt solid android color  quot  color PRESSED STATE COLOR quot    gt                   lt padding android left  quot  dimen button padding horizontal material quot                      android top  quot  dimen button padding vertical material quot                      android right  quot  dimen button padding horizontal material quot                      android bottom  quot  dimen button padding vertical material quot    gt               lt  shape gt           lt  inset gt       lt  item gt            lt  -- focused state -- gt       lt item android state focused  quot true quot  gt           lt inset xmlns android  quot http   schemas android com apk res android quot              android insetLeft  quot  dimen button inset horizontal material quot              android insetTop  quot  dimen button inset vertical material quot              android insetRight  quot  dimen button inset horizontal material quot              android insetBottom  quot  dimen button inset vertical material quot  gt               lt shape android shape  quot rectangle quot  gt                   lt corners android radius  quot  dimen control corner material quot    gt                   lt solid android color  quot  color FOCUSED STATE COLOR quot    gt                   lt padding android left  quot  dimen button padding horizontal material quot                      android top  quot  dimen button padding vertical material quot                      android right  quot  dimen button padding horizontal material quot                      android bottom  quot  dimen button padding vertical material quot    gt               lt  shape gt           lt  inset gt       lt  item gt            lt  -- normal state -- gt       lt item gt           lt inset xmlns android  quot http   schemas android com apk res android quot              android insetLeft  quot  dimen button inset horizontal material quot              android insetTop  quot  dimen button inset vertical material quot              android insetRight  quot  dimen button inset horizontal material quot              android insetBottom  quot  dimen button inset vertical material quot  gt               lt shape android shape  quot rectangle quot  gt                   lt corners android radius  quot  dimen control corner material quot    gt                   lt solid android color  quot  color NORMAL STATE COLOR quot    gt                   lt padding android left  quot  dimen button padding horizontal material quot                      android top  quot  dimen button padding vertical material quot                      android right  quot  dimen button padding horizontal material quot                      android bottom  quot  dimen button padding vertical material quot    gt               lt  shape gt           lt  inset gt       lt  item gt   lt  selector gt   Result Your button will have ripple effect on Lollipop devices  The old versions will have exactly same button except the ripple effect  But since that you provide drawables for different states  they ll also respond to touch events  as the old way

User · Answer

If you only want  Flat  material button  you can customize their background using selectableItemBackground attribute as explained here

User · Answer

if you use kotlin  can you see  All attributes from MaterialButton are supported  Do not use the android background attribute  MaterialButton manages its own background drawable  and setting a new background means Material button disabled color can no longer guarantee that the new attributes it introduces will function properly  If the default background is changed  Material Button cannot guarantee well-defined behavior  At MainActivity kt  class MainActivity   AppCompatActivity         override fun onCreate savedInstanceState  Bundle             super onCreate savedInstanceState          setContentView R layout activity main          buttonClick setOnClickListener                it as MaterialButton  apply                   backgroundTintList   ColorStateList valueOf Color YELLOW                  backgroundTintMode   PorterDuff Mode SRC ATOP                                   At activity main xml   lt  xml version  1 0  encoding  utf-8   gt   lt androidx constraintlayout widget ConstraintLayout     xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      xmlns tools  http   schemas android com tools      android layout width  match parent      android layout height  match parent      android id    id constraintLayout      tools context   MainActivity  gt       lt com google android material button MaterialButton         android id    id buttonNormal          android layout width  wrap content          android layout height  wrap content          android layout marginTop  24dp          android text  Material Button Normal          app layout constraintEnd toEndOf  parent          app layout constraintStart toStartOf  parent          app layout constraintTop toTopOf  parent    gt       lt com google android material button MaterialButton         android id    id buttonTint          android layout width  wrap content          android layout height  wrap content          android layout marginTop  16dp          android backgroundTint   D3212D          android text  Material Button Background Red          app layout constraintEnd toEndOf  parent          app layout constraintStart toStartOf  parent          app layout constraintTop toBottomOf    id buttonNormal    gt       lt com google android material button MaterialButton         android id    id buttonTintMode          android layout width  wrap content          android layout height  wrap content          android layout marginTop  16dp          android backgroundTint   D3212D          android backgroundTintMode  multiply          android text  Tint Red   Mode Multiply          app layout constraintEnd toEndOf  parent          app layout constraintStart toStartOf  parent          app layout constraintTop toBottomOf    id buttonTint    gt       lt com google android material button MaterialButton         android id    id buttonClick          android layout width  wrap content          android layout height  wrap content          android layout marginTop  32dp          android text  Click To Change Background          app layout constraintEnd toEndOf  parent          app layout constraintHorizontal bias  0 498          app layout constraintStart toStartOf  parent          app layout constraintTop toBottomOf    id buttonTintMode    gt   lt  androidx constraintlayout widget ConstraintLayout gt    resource   Material button change color example

User · Answer

For those using an ImageButton here is how you do it   In style xml    lt style name  BlueImageButton  parent  Base Widget AppCompat ImageButton  gt       lt item name  colorButtonNormal  gt  color primary lt  item gt       lt item name  android tint  gt  color white lt  item gt   lt  style gt    in v21 style xml    lt style name  BlueImageButton  parent  Widget AppCompat ImageButton  gt       lt item name  android colorButtonNormal  gt  color primary lt  item gt       lt item name  android tint  gt  color white lt  item gt   lt  style gt    Then in your layout file    lt android support v7 widget AppCompatImageButton     android id    id my button      android theme   style BlueImageButton      android layout width  42dp      android layout height  42dp      android layout gravity  center vertical      android src   drawable ic check black 24dp        gt

User · Answer

I use this  Ripple effect and button click shadow working   style xml   lt style name  Button Red  parent  Widget AppCompat Button Colored  gt       lt item name  android textColor  gt  color material white lt  item gt       lt item name  android backgroundTint  gt  color red lt  item gt   lt  style gt    Button on layout    lt Button         style   style Button Red          android layout width  match parent          android layout height  wrap content          android text   string close   gt

User · Answer

if you want below style    add this style your button   style   style Widget AppCompat Button Borderless Colored    if you want this style     add below code   style   style Widget AppCompat Button Colored

User · Answer

This SO answer helped me arrive at an answer https   stackoverflow com a 30277424 3075340  I use this utility method to set the background tint of a button  It works with pre-lollipop devices      Set button background tint programmatically so it is compatible with pre-lollipop devices  public static void setButtonBackgroundTintAppCompat Button button  ColorStateList colorStateList       Drawable d   button getBackground        if  button instanceof AppCompatButton               appcompat button replaces tint of its drawable background           AppCompatButton button  setSupportBackgroundTintList colorStateList         else if  Build VERSION SDK INT  gt   Build VERSION CODES LOLLIPOP               Lollipop button replaces tint of its drawable background            however it is not equal to d setTintList c          button setBackgroundTintList colorStateList         else              this should only happen if              manually creating a Button instead of AppCompatButton              LayoutInflater did not translate a Button to AppCompatButton         d   DrawableCompat wrap d           DrawableCompat setTintList d  colorStateList           button setBackgroundDrawable d              How to use in code   Utility setButtonBackgroundTintAppCompat myButton  ContextCompat getColorStateList mContext  R color your custom color      This way  you do not have to specify a ColorStateList if you just want to change the background tint and nothing more but maintain the pretty button effects and what not

User · Answer

UPDATE  Use design support library 23 2 0  and appcompatwidgets  as below  In Android Support Library 22 1       This is done automatically when inflating layouts - replacing Button   with AppCompatButton  TextView with AppCompatTextView  etc  to ensure   that each could support tinting  In this release  those tint aware   widgets are now publicly available  allowing you to keep tinting   support even if you need to subclass one of the supported widgets    The full list of tint aware widgets   AppCompatAutoCompleteTextView AppCompatButton AppCompatCheckBox AppCompatCheckedTextView AppCompatEditText AppCompatMultiAutoCompleteTextView AppCompatRadioButton AppCompatRatingBar AppCompatSpinner AppCompatTextView   Material Design for Pre-Lollipop Devices       AppCompat  aka ActionBarCompat  started out as a backport of the   Android 4 0 ActionBar API for devices running on Gingerbread    providing a common API layer on top of the backported implementation   and the framework implementation  AppCompat v21 delivers an API and   feature-set that is up-to-date with Android 5 0

User · Answer

For me  the problem was that in Android 5 0 the android colorButtonNormal had no effect  and actually  no item from the theme  like android colorAccent   but in Android 4 4 3  for example  did  The project was configured with compileSdkVersion and targetSdkVersion to 22  so I ve made all the changes as  Muhammad Alfaifi sugessted  but in the end  I ve noticed that the problem was the buildToolsVersion  that wasn t updated  Once I changed to 23 0 1  everything start working almost as normal  Now  the android colorButtonNormal still has no effect  but at least the button reacts to android colorAccent  which for me is acceptable   I hope that this hint could help someone  Note  I ve applied the style directly to the button  since the button s android theme       also didn t have effect

User · Answer

In Android Support Library 22 1 0  Google made the Button tint aware  So  another way to customise the background color of button is to use the backgroundTint attribute   For example    lt Button        android id    id add remove button         android layout width  wrap content         android layout height  wrap content         android backgroundTint   color bg remove btn default         android textColor   android color white         tools text  Remove    gt

[android] Coloring Buttons in Android with Material Design and AppCompat

Examples related to android

Examples related to button

Examples related to android-view

Examples related to android-button

Examples related to material-design