Android custom button with MaterialButton-like semi-transparent ripple

156 views Asked by At

I created custom button based on a MaterialButton that is semi-transparent (primaryColorDisabled) when pressed and disabled. Now, I would like to have its ripple effect to turn the button from its primaryColor to the primaryColorDisabled instead of the MaterialButton's default highlighted color.

My colors only differ only in alpha and are defined:

<color name="primaryColor">#283593</color>
<color name="primaryColorDisabled">#A0283593</color>

To my custom button I apply the following style:

<style name="CustomButton" parent="Widget.MaterialComponents.Button">
    <item name="android:background">@drawable/custom_background</item>
</style>

Below are the recursive definitions of my drawables. I removed not pertinent bits like namespace, padding, margins, etc.

@drawable/custom_background:

<selector>
    <item android:state_enabled="false"
          android:drawable="@drawable/custom_disabled" />
    <item android:state_pressed="true"
          android:drawable="@drawable/custom_disabled" />
    <item android:drawable="@drawable/custom_ripple" />
</selector>

@drawable/custom_disabled:

<inset>
    <shape
        android:shape="rectangle"
        android:tint="@color/primaryColorDisabled" >
        <solid android:color="@color/primaryColor" />
    </shape>
</inset>

@drawable/custom_ripple:

<ripple android:color="?attr/colorControlHighlight">
    <item android:drawable="@drawable/custom_enabled" />
</ripple>

@drawable/custom_enabled:

<inset>
    <shape
        android:shape="rectangle" >
        <solid android:color="@color/primaryColor" />
    </shape>
</inset>

Now, I tried changing in @drawable/custom_ripple the color from ?attr/colorControlHighlight to my @color/primaryColorDisabled, but then when I click on my button nothing changes: no ripple and no even 'state_pressed' look. Any ideas how to achieve that?

0

There are 0 answers