Can't set background color of button using Material Components library

Question

My code:

<Button
     android:id="@+id/button_one"
     style="@style/ButtonStyle"
     android:text="@string/button_one" />

<style name="ButtonStyle">
     <item name="android:textSize">32sp</item>
     <item name="android:textColor">@drawable/background_button_text_color</item>
     <item name="android:background">@drawable/background_button</item
</style>

background_button.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" android:state_pressed="true" />
    <item android:drawable="@android:color/transparent" android:state_pressed="false" />
</selector>

background_button_text_color.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/black" android:state_pressed="true" />
    <item android:color="@android:color/white" android:state_pressed="false" />
</selector>

I am getting a black background instead of white when the button is pressed. Not sure what I'm doing wrong. Any help?
I am on 1.2.0-alpha06 and using Theme.MaterialComponents.DayNight.NoActionBar.

Hanleigh

Seems like their issue. Wait for new version. You can raise a issue on google. – Refrigerant

Yeah one of the contributors suggested it was fixed but I'm still not able to get it working. github.com/material-components/material-components-android/… – Hanleigh

Try to use the app:backgroundTint attribute and a selector with the checked state and use the style style="@style/Widget.MaterialComponents.Button.TextButton" – Demonolater

Answer 1

Your style:

<style name="ButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textSize">32sp</item>
    <item name="android:textColor">@color/text_color</item>
    <item name="android:backgroundTint">@color/background_button</item>
    <item name="rippleColor">@android:color/transparent</item>
    <item name="cornerRadius">0dp</item>
</style>

Your selectors should be in color folder

background_button:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:color="@android:color/white" android:state_pressed="true" />
   <item android:color="@android:color/transparent" android:state_pressed="false"/>
</selector>

text_color:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:color="@android:color/black" android:state_pressed="true" />
   <item android:color="@android:color/white" android:state_pressed="false" />
</selector>

And add to your button:

android:layout_width="wrap_content"
android:layout_height="wrap_content"

Colors are mine

Doily

That's not working for me. Are you using MaterialComponents theme? – Hanleigh

Yes, I am using "Theme.MaterialComponents.Light.DarkActionBar" – Edom

I am using Theme.MaterialComponents.DayNight.NoActionBar. Can you tell me if you get it working with that theme? – Hanleigh

I changed my theme with Theme.MaterialComponents.DayNight.NoActionBar. It is still working. – Edom

You can try this => <style name="ButtonStyle" parent="Widget.MaterialComponents.Button.TextButton"> – Edom

After chaning android:background to android:backgroundTint I kinda got it working now but the buttons are rounded and a stroke around them. Also there is a ripple when pressed. I just need it to turn white with no ripple. i.imgur.com/yvGdYO5.gif – Hanleigh

Adding Widget.MaterialComponents.Button.TextButton fixed the issues but they are still rounded. Is there a way to make them square? Thanks for the help btw. – Hanleigh

@Hanleigh Just use app:cornerRadius="0dp" – Demonolater

Got it working! Thanks for the help Kasım and Gabriele! – Hanleigh

Answer 2

To work around this issue, do one of the following:

• Add app:backgroundTint="@null" in xml or programmatically - btn.setBackgroundTintMode(null);
• Change Theme Theme.MaterialComponents.DayNight.NoActionBar to Theme.MaterialComponents.DayNight.NoActionBar.Bridge

Both the solutions works fine Reference

Nonlinearity

The Bridge thing helped me a lot. Thanks! – Diocese

It worked perfectly for my project. Thank you. – Darned

Answer 3

Ran into the same issue, setting app:backgroundTint="@null" was what worked for me. See full solution here: https://github.com/material-components/material-components-android/issues/889#issuecomment-621194246

Parceling

Answer 4

add this into button view

app:backgroundTint="@null"

Whip