Avoid ripple effect combine colors

Question

I have a simple program that uses ripple effect using this code (edited from here):

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#0000ff"><!--blue-->
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#0000ff" /><!--blue-->
            <corners android:radius="20dp" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#ff0000"/><!--red-->
            <corners android:radius="20dp" />
        </shape>
    </item>
</ripple>

everything works fine, but I want the ripple color (blue) to be above the background color (red) not combined with it into purple.

SCREENSHOT:

before:

in process:

after:

what I want to be after:

any way to achieve this?
Thanks in advance.

Answer 1

I have edited it a bit you can try this sample

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#0000ff">
<item>
    <selector>
        <item android:state_pressed="true">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/transparent"/>
                <corners android:radius="20dp" />
            </shape>
        </item>

        <item android:state_pressed="false">
            <shape android:shape="rectangle">
                <solid android:color="#ff0000"/>
                <corners android:radius="20dp" />
            </shape>
        </item>

    </selector>
</item>
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="#0000ff" />
        <corners android:radius="20dp" />
    </shape>
</item>
</ripple>