Make button animation not go over drawable background

Issue

Top button: Not pressed, bottom button pressed

How do make the "default" block animation on button click on android to fit the drawable background that is set? The drawable background gives the buttons rounded corners.

Edit: ripple.xml works, but lays over button text.

Button:

        <Button
        android:id="@+id/about"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:textSize="20sp"
        android:text="test123"
        android:padding="5dip"
        android:textAllCaps="false"
        android:textColor="@color/settings"
        android:foreground="@drawable/ripple"
        />

Drawable setting_button

<?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <solid android:color="@color/colorWhite"/>
    <corners
        android:bottomRightRadius="15dp"
        android:bottomLeftRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp"/>
</shape>

Ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
            <corners
                android:bottomRightRadius="15dp"
                android:bottomLeftRadius="15dp"
                android:topLeftRadius="15dp"
                android:topRightRadius="15dp"/>
        </shape>
    </item>
    <item android:drawable="@drawable/setting_button" />
</ripple>

Solution

The solution for this lies in the special mask layer of the RippleDrawable. You specify the mask layer via the android:id value set to @android:id/mask. https://proandroiddev.com/rippling-rounding-and-android-pies-d5db5f4c2fc1 http://michaelevans.org/blog/2015/05/07/android-ripples-with-rounded-corners/

  <Button
    android:id="@+id/about"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:background="@drawable/setting_button"
    android:foreground="@drawable/ripple"
    android:padding="5dip"
    android:text="test123"
    android:textAllCaps="false"
    android:textColor="@color/settings"
    android:textSize="20sp" />

And remove <item android:drawable="@drawable/setting_button" /> from the ripple drawable:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="#000000" />
        <corners
            android:bottomLeftRadius="15dp"
            android:bottomRightRadius="15dp"
            android:topLeftRadius="15dp"
            android:topRightRadius="15dp" />
    </shape>
</item>

Answered By - vrgrg