android raised - Coloring Buttons in Android with Material Design and AppCompat




13 Answers

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:

<item name="colorButtonNormal">@color/button_color</item>

v21/theme.xml

<item name="android:colorButtonNormal">@color/button_color</item>
attractive more

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:

<item name="android:colorButtonNormal">insert color here</item>

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




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

<item name="android:buttonStyle">@style/BrandButtonStyle</item>

In your values/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

In your values-v21/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

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 :)

<Button
        android:layout_width="200dp"
        android:layout_height="48dp" />

Disabled State

Enabled State




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:

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

or set it programmatically - JAVA

 ViewCompat.setBackgroundTintList(your_colored_button,
 ContextCompat.getColorStateList(getContext(),R.color.your_custom_color));



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"



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

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

You don't need to create an style for every button you want wit a different color, allowing you to customize the colors randomly




Layout:

<android.support.v7.widget.AppCompatButton
  style="@style/MyButton"
  ...
  />

styles.xml:

<style name="MyButton" parent="Widget.AppCompat.Button.Colored">
  <item name="backgroundTint">@color/button_background_selector</item>
  <item name="android:textColor">@color/button_text_selector</item>
</style>

color/button_background_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#555555"/>
    <item android:color="#00ff00"/>
</selector>

color/button_text_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#888888"/>
    <item android:color="#ffffff"/>
</selector>



If you use style solution with colorButtonNormal, don't forget to inherit from Widget.AppCompat.Button.Colored so the ripple effect is working ;)

Like

<style name="CustomButtonStyle" parent="Widget.AppCompat.Button.Colored">
      <item name="colorButtonNormal">@android:color/white</item>
</style>



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.




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





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:

<item name="buttonStyle">@style/ButtonmyTime</item>

before = just gray material buttons:

<item name="android:buttonStyle">@style/ButtonmyTime</item>

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

<item name="android:imageButtonStyle">@style/ImageButtonmyTimeGreen</item>



To change the color of a single button

ViewCompat.setBackgroundTintList(button, getResources().getColorStateList(R.color.colorId));



I set android:textColor to @null in my button theme and it helps.

styles.xml

<style name="Button.Base.Borderless" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="android:textColor">@null</item>
</style>

some_layout.xml

<Button
    style="@style/Button.Base.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hint" />

Now button text color is colorAccent defined in AppTheme

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">@color/colorAccent</item>
    <item name="borderlessButtonStyle">@style/Button.Base.Borderless</item>
    <item name="alertDialogTheme">@style/AlertDialog</item>
</style>



Another simple solution using the AppCompatButton

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



Related