Android Transparent Button with Color Splash

Question

So I have a transparent button I've defined like so:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Login"
    android:textSize="18sp"
    android:background="@drawable/ripple"
    android:id="@+id/button_login"
    android:layout_centerHorizontal="true" />

And I have a ripple background defined like so:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

Finally my color highlight and primary are defined like so:

    <item name="colorPrimary">@android:color/transparent</item>
    <item name="colorControlHighlight">#000000</item>

This works to make my button transparent, and if I change the primary color to say green, then I get a black color splash when pressing the button.

However when I set it to transparent it seems like the splash maintains the alpha. Am I doing something wrong or else, what do I need to do to make my transparent button have a splash of color?

Answer 1

The simplest answer would be: Do not specify the item drawable property in your ripple definition.

Change to following:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight"
>

</ripple>

The ripple effect will be in big circular form. Hope you are not bothered about it