Standard Android Button with a different color

Question

I d like to change the color of a standard Android button slightly in order to better match a client s branding   The best way I ve found to do this so far is to change the Button s drawable to the drawable located in res drawable red button 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 pressed  true  android drawable   drawable red button pressed    gt       lt item android state focused  true  android drawable   drawable red button focus    gt       lt item android drawable   drawable red button rest    gt   lt  selector gt    But doing that requires that I actually create three different drawables for each button I want to customize  one for the button at rest  one when focused  and one when pressed    That seems more complicated and non-DRY than I need   All I really want to do is apply some sort of color transform to the button   Is there an easier way to go about changing a button s color than I m doing

User · Answer

Following on from Tomasz s answer  you can also programmatically set the shade of the entire button using the PorterDuff multiply mode  This will change the button colour rather than just the tint    If you start with a standard grey shaded button   button getBackground   setColorFilter 0xFFFF0000  PorterDuff Mode MULTIPLY     will give you a red shaded button   button getBackground   setColorFilter 0xFF00FF00  PorterDuff Mode MULTIPLY     will give you a green shaded button etc   where the first value is the colour in hex format   It works by multiplying the current button colour value by your colour value  I m sure there s also a lot more you can do with these modes

User · Answer

Per material design guidelines  you need to use the style like     below code   lt style name  MyButton  parent  Theme AppCompat Light gt       lt item name  colorControlHighlight  gt  F36F21 lt  item gt       lt item name  colorControlHighlight  gt  FF8D00 lt  item gt   lt  style gt    and in layout add this property to your button      android theme   style MyButton

User · Answer

I am using this approach  style xml    lt  -- Base application theme  -- gt   lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt       lt item name  android colorPrimaryDark  gt  413152 lt  item gt       lt item name  android colorPrimary  gt  534364 lt  item gt       lt item name  android colorAccent  gt  534364 lt  item gt       lt item name  android buttonStyle  gt  style MyButtonStyle lt  item gt   lt  style gt    lt style name  MyButtonStyle  parent  Widget AppCompat Button Colored  gt       lt item name  android colorButtonNormal  gt  534364 lt  item gt       lt item name  android textColor  gt  ffffff lt  item gt   lt  style gt      As you can see from above  I m using a custom style for my button  The button color corresponds to the accent color  I find this a much better approach than setting android background as I won t lose the ripple effect Google provides

User · Answer

Its simple   add this dependency in your project and create a button with  1  Any shape 2  Any color 3  Any border 4  With material effects  https   github com manojbhadane QButton   lt com manojbhadane QButton        android layout width  match parent         android layout height  wrap content         android text  OK         app qb backgroundColor   color green         app qb radius  100         app qb strokeColor   color darkGreen         app qb strokeWidth  5    gt

User · Answer

Use it in this way   buttonOBJ getBackground   setColorFilter Color parseColor   YOUR HEX COLOR CODE    PorterDuff Mode MULTIPLY

User · Answer

values styles xml   lt style name  AppTheme  parent  Theme AppCompat Light DarkActionBar  gt       lt item name  colorPrimary  gt  color colorPrimary lt  item gt       lt item name  colorPrimaryDark  gt  color colorPrimaryDark lt  item gt       lt item name  colorAccent  gt  color colorAccent lt  item gt   lt  style gt    lt style name  RedAccentButton  parent  ThemeOverlay AppCompat Light  gt       lt item name  colorAccent  gt  ff0000 lt  item gt   lt  style gt    then    lt Button     style   style Widget AppCompat Button Colored      android layout width  match parent      android layout height  wrap content      android text  text    gt    lt Button     style   style Widget AppCompat Button Colored      android layout width  match parent      android layout height  wrap content      android enabled  false      android text  text    gt    lt Button     style   style Widget AppCompat Button Colored      android layout width  match parent      android layout height  wrap content      android text  text      android theme   style RedAccentButton    gt    lt Button     style   style Widget AppCompat Button Colored      android layout width  match parent      android layout height  wrap content      android enabled  false      android text  text      android theme   style RedAccentButton    gt

User · Answer

An easy way is to just define a custom Button class which accepts all the properties that you desire like radius  gradient  pressed color  normal color etc  and then just use that in your XML layouts instead of setting up the background using XML  A sample is here    This is extremely useful if you have a lot of buttons with same properties like radius  selected color etc  You can customize your inherited button to handle these additional properties   Result  No Background selector was used    Normal Button    Pressed Button

User · Answer

You can now also use appcompat-v7 s AppCompatButton with the backgroundTint attribute    lt android support v7 widget AppCompatButton     xmlns app  http   schemas android com apk res-auto      android layout width  match parent      android layout height  wrap content      app backgroundTint   ffaa00   gt

User · Answer

This is my solution which perfectly works starting from API 15  This solution keeps all default button click effects  like material RippleEffect  I have not tested it on lower APIs  but it should work   All you need to do  is   1  Create a style which changes only colorAccent    lt style name  Facebook Button  parent  ThemeOverlay AppCompat  gt       lt item name  colorAccent  gt  color com facebook blue lt  item gt   lt  style gt       I recommend using ThemeOverlay AppCompat or your main AppTheme as parent  to keep the rest of your styles    2  Add these two lines to your button widget   style   style Widget AppCompat Button Colored  android theme   style Facebook Button       Sometimes your new colorAccent isn t showing in Android Studio Preview  but when you launch your app on the phone  the color will be changed      Sample Button widget   lt Button     android id    id sign in with facebook      style   style Widget AppCompat Button Colored      android layout width  match parent      android layout height  wrap content      android layout gravity  center      android text   string sign in facebook      android textColor   android color white      android theme   style Facebook Button    gt

User · Answer

I discovered that this can all be done in one file fairly easily   Put something like the following code in a file named custom button xml and then set background   drawable custom button  in your button view    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 pressed  true   gt           lt shape gt               lt gradient                 android startColor   color yellow1                  android endColor   color yellow2                  android angle  270    gt               lt stroke                 android width  3dp                  android color   color grey05    gt               lt corners                 android radius  3dp    gt               lt padding                 android left  10dp                  android top  10dp                  android right  10dp                  android bottom  10dp    gt           lt  shape gt       lt  item gt        lt item android state focused  true   gt           lt shape gt               lt gradient                 android endColor   color orange4                  android startColor   color orange5                  android angle  270    gt               lt stroke                 android width  3dp                  android color   color grey05    gt               lt corners                 android radius  3dp    gt               lt padding                 android left  10dp                  android top  10dp                  android right  10dp                  android bottom  10dp    gt           lt  shape gt       lt  item gt        lt item gt                   lt shape gt               lt gradient                 android endColor   color blue2                  android startColor   color blue25                  android angle  270    gt               lt stroke                 android width  3dp                  android color   color grey05    gt               lt corners                 android radius  3dp    gt               lt padding                 android left  10dp                  android top  10dp                  android right  10dp                  android bottom  10dp    gt           lt  shape gt       lt  item gt   lt  selector gt

User · Answer

The shortest solution which is working with any Android version    lt Button      app backgroundTint   color my color    Notes Requirements     Use the app  namespace and not the android  namespace  appcompat version   24 2 0  dependencies       compile  com android support appcompat-v7 25 3 1      Explanation

User · Answer

You can Also use this online tool to customize your button http   angrytools com android button   and use android background   drawable custom btn  to define the customized button in your layout

User · Answer

You can set theme of your button to this   lt style name  AppTheme ButtonBlue  parent  Widget AppCompat Button Colored  gt    lt item name  colorButtonNormal  gt  color HEXColor lt  item gt    lt item name  android textColor  gt  color HEXColor lt  item gt   lt  style gt

User · Answer

Mike  you might be interested in color filters   An example   button getBackground   setColorFilter new LightingColorFilter 0xFFFFFFFF  0xFFAA0000      try this to achieve the color you want

User · Answer

There is a much easier way now   android-holo-colors com  It will let you change the colors of all holo drawables  buttons  spinners       easily  You select the color and then download a zip file containing drawables for all resolutions

User · Answer

The way I do a different styled button that works quite well is to subclass the Button object and apply a colour filter  This also handles enabled and disabled states by applying an alpha to the button   import android annotation TargetApi  import android content Context  import android graphics Color  import android graphics ColorFilter  import android graphics LightingColorFilter  import android graphics drawable Drawable  import android graphics drawable LayerDrawable  import android os Build  import android util AttributeSet  import android widget Button   public class DimmableButton extends Button        public DimmableButton Context context            super context              public DimmableButton Context context  AttributeSet attrs            super context  attrs              public DimmableButton Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle               SuppressWarnings  deprecation        Override     public void setBackgroundDrawable Drawable d               Replace the original background drawable  e g  image  with a LayerDrawable that            contains the original drawable          DimmableButtonBackgroundDrawable layer   new DimmableButtonBackgroundDrawable d           super setBackgroundDrawable layer               TargetApi Build VERSION CODES JELLY BEAN       Override     public void setBackground Drawable d               Replace the original background drawable  e g  image  with a LayerDrawable that            contains the original drawable          DimmableButtonBackgroundDrawable layer   new DimmableButtonBackgroundDrawable d           super setBackground layer                         The stateful LayerDrawable used by this button              protected class DimmableButtonBackgroundDrawable extends LayerDrawable               The color filter to apply when the button is pressed         protected ColorFilter  pressedFilter   new LightingColorFilter Color LTGRAY  1              Alpha value when the button is disabled         protected int  disabledAlpha   100             Alpha value when the button is enabled         protected int  fullAlpha   255           public DimmableButtonBackgroundDrawable Drawable d                super new Drawable     d                         Override         protected boolean onStateChange int   states                boolean enabled   false              boolean pressed   false               for  int state   states                    if  state    android R attr state enabled                      enabled   true                  else if  state    android R attr state pressed                      pressed   true                             mutate                if  enabled  amp  amp  pressed                    setColorFilter  pressedFilter                 else if   enabled                    setColorFilter null                   setAlpha  disabledAlpha                 else                   setColorFilter null                   setAlpha  fullAlpha                              invalidateSelf                 return super onStateChange states                       Override         public boolean isStateful                 return true

User · Answer

If you are making colour buttons with XML you can make the code a bit cleaner by specifying the focused and pressed state in a separate file and reuse them  My green button looks like this    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 focused  true  android drawable   drawable button focused   gt       lt item android state pressed  true  android drawable   drawable button pressed   gt        lt item gt           lt shape gt               lt gradient android startColor   ff00ff00  android endColor   bb00ff00  android angle  270    gt               lt stroke android width  1dp  android color   bb00ff00    gt               lt corners android radius  3dp    gt               lt padding android left  10dp  android top  10dp  android right  10dp  android bottom  10dp    gt           lt  shape gt       lt  item gt    lt  selector gt

User · Answer

The DroidUX component library has a ColorButton widget whose color can be changed easily  both via xml definition and programmatically at run time  so you can even let the user to set the button s color theme if your app allows it

User · Answer

I like the color filter suggestion in previous answers from  conjugatedirection and  Tomasz  However  I found that the code provided so far wasn t as easily applied as I expected   First  it wasn t mentioned where to apply and clear the color filter  It s possible that there are other good places to do this  but what came to mind for me was an OnTouchListener   From my reading of the original question  the ideal solution would be one that does not involve any images   The accepted answer using custom button xml from  emmby is probably a better fit than color filters if that s your goal   In my case  I m starting with a png image from a UI designer of what the button is supposed to look like  If I set the button background to this image  the default highlight feedback is lost completely  This code replaces that behavior with a programmatic darkening effect   button setOnTouchListener new OnTouchListener          Override     public boolean onTouch View v  MotionEvent event            switch  event getAction                  case MotionEvent ACTION DOWN                     0x6D6D6D sets how much to darken - tweak as desired                 setColorFilter v  0x6D6D6D                   break                 remove the filter when moving off the button                the same way a selector implementation would              case MotionEvent ACTION MOVE                  Rect r   new Rect                    v getLocalVisibleRect r                   if   r contains  int  event getX     int  event getY                           setColorFilter v  null                                     break              case MotionEvent ACTION OUTSIDE              case MotionEvent ACTION CANCEL              case MotionEvent ACTION UP                  setColorFilter v  null                   break                    return false             private void setColorFilter View v  Integer filter            if  filter    null  v getBackground   clearColorFilter            else                  To lighten instead of darken  try this                 LightingColorFilter lighten   new LightingColorFilter 0xFFFFFF  filter               LightingColorFilter darken   new LightingColorFilter filter  0x000000               v getBackground   setColorFilter darken                        required on Android 2 3 7 for filter change to take effect  but not on 4 0 4          v getBackground   invalidateSelf                I extracted this as a separate class for application to multiple buttons - shown as anonymous inner class just to get the idea

User · Answer

In   lt Button gt  use android background   33b5e5   or better android background   color navig button

[android] Standard Android Button with a different color

Examples related to android

Examples related to android-layout