Shaped drawable with selectableItemBackground as background

Issue

I have couple buttons that I need an oval shaped border.

So i have this in a capsule_border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="9999dp"/>
    <stroke
        android:width="1px"
        android:color="@color/border_gray" />
</shape>

And I would use android:background="@drawable/capsule_border.xml where I need it.

Now, I would like to have a button to have this oval shaped border, but also a android:background="?selectableItemBackground" for the visual feedback.

I tried to use a parent layout with the selectableItembackground and button with capsule_border. But it seems that the clickable area that gets highlighted is the whole square. Instead of only the area within the capsule border.

Is there someway that I can make it so that the selectableItemBackground does not highly the whole rectangle of the view, but only within the border that i draw?

Solution

Having round_corners.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="@android:color/transparent"/>
    <corners android:radius="15dp" />
    <stroke
        android:width="1px"
        android:color="#000000" />
</shape>

And my_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:radius="15dp" />
        </shape>
    </item>
    <item android:drawable="@drawable/round_corners" />
</ripple>

And button:

<Button
    android:background="@drawable/my_ripple"
    ... />

Will result in this:

See this article.

Answered By - azizbekian