CODEWITHSUNDEEP
androidmaterial-design
Muhammad Ahmed AbuTalib
Muhammad Ahmed AbuTalib

Reputation: 4302

Selector drawable on MaterialButton android

I have been using the new MaterialButton class. I want different colors on the button when the user clicks the button.

I have been using selector drawables for this purpose since the very beginning, however it doesn't appear to be working on MaterialButton.

<com.google.android.material.button.MaterialButton
  android:layout_width="0dp" 
  android:text="@string/login"
  style="@style/Widget.Mohre.Button"
  android:layout_height="wrap_content"
  app:cornerRadius="@dimen/card_corner_radius"
  android:padding="@dimen/unit_large"
  android:id="@+id/loginBtn"/>

My Widget.Mohre.Button style
@color/textColorWhite @drawable/mohre_button_selector @style/TextAppearance.Button @animator/button_state_list_anim

My selector drawable

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/mohre_button_pressed" android:state_pressed="true" />
<item android:drawable="@drawable/mohre_button_selected" android:state_enabled="false" android:state_pressed="false" />
<item android:drawable="@drawable/mohre_button_normal" />

My individual drawables are just rectangle shapes with different colors like these

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners android:radius="30dp"></corners>
    <solid android:color="#3a516a"></solid>
</shape>

The button doesn't take on the colors at all from the selector drawable. It just shows the default accent color of the application

Upvotes: 10

Views: 3822

Answers (3)

Dev4Life
Dev4Life

Reputation: 3307

With the normal way (setting the selector drawable as background of the button), it won't work as expected if you are using Theme.MaterialComponents.

You can use Theme.AppCompat.DayNight.NoActionBar as an alternative, but if you don't want to use that theme, then simply use:

<androidx.appcompat.widget.AppCompatButton
................/>

You will get the same result as it was working with the Appcompat theme even if you are using latest Material themes!

Upvotes: 3

issamux
issamux

Reputation: 1415

as explained in this medium post https://medium.com/over-engineering/hands-on-with-material-components-for-android-buttons-76fa1a92ec0a we can use ColorStateList to change color or background of Button.

For me working solution for now was to set backgroundTint to null and backgroundTintMode to add like this:

<style name="Button.XYZ" parent="Button">
<item name="shapeAppearance">?attr/shapeAppearanceLargeComponent</item>
<item name="drawableTint">@color/ColorXYZ</item>

<!-- background drawable -->
<item name="backgroundTint">@null</item>
<item name="backgroundTintMode">add</item>

<!-- background drawable -->
<item name="android:background">@drawable/XYZ</item>
<!-- Color drawable -->
<item name="android:textColor">@color/XYZ</item>
</style>

And also using the style in xml not in theme

Upvotes: 4

akelec
akelec

Reputation: 4003

If you want a button that has a custom background (to apply <selector> e.g), but your theme is set up to use Theme.MaterialComponents (which is nowadays, 2021), you could switch the XML element in the layout to be <android.widget.Button> instead of <Button>. This should cause the Material Components for Android to ignore that element, and you can manipulate this button normally with respect to XML attributes.

Upvotes: 1

Related Questions