CODEWITHSUNDEEP
androidandroid-appcompat
Daniel Gomez Rico
Daniel Gomez Rico

Reputation: 15936

Widget.AppCompat.Button colorButtonNormal shows gray

I have values:styles.xml with:

<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
    <item name="colorButtonNormal">@color/my_color</item>
    <item name="android:textColor">@android:color/white</item>
</style>

and values-v21:styles.xml with:

<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
      <item name="android:colorButtonNormal">@color/my_color</item>
      <item name="android:textColor">@android:color/white</item>
</style>

And app style with

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:buttonStyle">@style/AppTheme.Button</item>
</style>

But the colors appears grey instead of @color/my_color

Upvotes: 67

Views: 56228

Answers (11)

Oleksandr
Oleksandr

Reputation: 6356

To customize one Button only set android:theme="@style/AppTheme.Button" to your Button.

<Button
    android:theme="@style/AppTheme.Button"
    />

Define your style as you did in your question

<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
    <item name="colorButtonNormal">@color/my_color</item>
</style>

[EDIT]

See GitHub demo here

Upvotes: 59

Quang Nguyen
Quang Nguyen

Reputation: 2660

It seems to be a bug on Android framework that we can not change customize colorButtonNormal with Widget.AppCompat.Button theme.
A workaround solution is to define another custom AppCompat theme and use colorAccent to set colorButtonNormal.

There are two following steps.
1.Define another theme for your custom button. 

<resources>

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
  </style>

  <!-- Custom button theme. -->
  <style name="CustomButtonTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Set your desired button color here. -->
    <item name="colorAccent">@color/red</item>
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Colored</item>
  </style>
</resources>

2.Apply button theme in layout. 

<Button android:theme="@style/CustomButtonTheme"/>

Upvotes: 2

Sahan
Sahan

Reputation: 23

Try buttonStyle instead of android:buttonStyle, since this is AppCompat attribute pre Lollipop, so it should be without android prefix

Upvotes: 1

Thomas Keller
Thomas Keller

Reputation: 6060

In case you wonder why colorButtonNormal is not picked up as defined for disabled buttons, you might also need to set android:disabledAlpha to 1.0 in your theme, otherwise your color will by default blend into the button's background. Example:

<style name="MyButtonTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:disabledAlpha">1.0</item>
    <item name="colorButtonNormal">@color/my_solid_disabled_color</item>
    <item name="colorAccent">@color/my_solid_accent_color</item>
    <item name="buttonStyle">@style/my_button_style</item>
</style>

Upvotes: 1

JEGADEESAN S
JEGADEESAN S

Reputation: 618

v21/styles.xml

    <style name="AppTheme.BlueButton" parent="Widget.AppCompat.Button.Colored">
        <item name="android:colorButtonNormal">@color/blue</item>
        <item name="android:textColor">@color/text_white</item>
    </style>

styles.xml

<style name="AppTheme.BlueButton" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/blue_tint</item>
    <item name="android:textColor">@color/text_white</item>
</style>

Initially I'm too facing this problem. After making correction like above I got correct UI button

Upvotes: 3

Ana Mar&#237;a Mart&#237;nez G&#243;mez
Ana Mar&#237;a Mart&#237;nez G&#243;mez

Reputation: 3793

That works:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <!-- android:buttonStyle for v21+ and buttonStyle for the rest -->
    <item name="buttonStyle">@style/MyCustomButton</item>
    <item name="android:buttonStyle">@style/MyCustomButton</item>
    <item name="colorButtonNormal">@color/my_color</item>
</style>

<style name="MyCustomButton" parent="Base.Widget.AppCompat.Button">
    <item name="android:textColor">#ffffff</item>
    <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
</style>

colorButtonNormal can be set in the theme style. To change the text color, size or any other feature of the button you can create a style and then using buttonStyle (less than v21) or android:buttonStyle (v21+) in the the theme style to set the button style.

Upvotes: 9

Valentin
Valentin

Reputation: 646

Use Widget.AppCompat.Button.Colored as a parent for your style. 

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

Use android:theme, not style in buttons definitions:

<Button android:theme="@style/RedButton"/>

See AppCompat v21 > Theming and Android Support Library v22.1 - AppCompat blog posts. (note on second post, android:theme is supported on API11-, it just doesn't do automatic inheritance from parent, you will have to specify it on each child, not an issue here but worth mentioning - see Chris Banes' post on that).

Upvotes: 51

John
John

Reputation: 689

Ensure your Activity is extending AppCompatActivity, otherwise it won't handle appCompat styles properly.

  • class: android.support.v7.app.AppCompatActivity
  • Gradle: compile 'com.android.support:appcompat-v7:23.0.1'

Upvotes: 14

Douglas Fornaro
Douglas Fornaro

Reputation: 2037

Use:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="buttonStyle">@style/AppTheme.Button</item>
</style>

remove the android:

Upvotes: 12

tylerjroach
tylerjroach

Reputation: 2699

Put the xml line below in your "AppTheme" xml, rather than trying to set it from the "AppTheme.Button". This works for me on v22.1.1 with non-lollipop devices. I'm guessing this is a bug because your solution above works fine for lollipop.

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

Upvotes: 14

Bhavdip Sagar
Bhavdip Sagar

Reputation: 1971

Hi I think the parent widget you used might be not correct one, it should android:Widget.Button for API version 21 or earlier version, for later version 21 or above you should use `android:Widget.Material.Button. Let say you have default style should look see below.

res/values/styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:buttonStyle">@style/AppTheme.Button</item>
    </style>

    <style name="AppTheme.Button" parent="android:Widget.Button">
        <item name="android:background">@color/my_color</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

</resources>

For API version 21 the resource style file should look like (res/values-v21/style.xml)

<resources>

    <style name="AppTheme.Button" parent="android:Widget.Material.Button">
        <item name="android:background">@color/my_color</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

</resources>

Thank you Let me know if you have any question.

Upvotes: 1

Related Questions