Shaped drawable with selectableItemBackground as background

Question

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?

azizbekian · Accepted Answer · 2018-04-03T16:04:07.753

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.

It's really nice. Would have been better if there is a <21 api level version. — Zhen Liu, Apr 07 '17 at 20:32

score 15 · Answer 2 · edited Mar 16 '20 at 15:58

15

I have a simpler version of the first answer:

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

    <item>
        <!-- the background shape when it's not being clicked -->
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="32dp" />
        </shape>
    </item>
</ripple>

Just apply it as background but remember to REMOVE THE SHADOW if it applys to Button:

style="?borderlessButtonStyle"

Good luck!

edited Mar 16 '20 at 15:58

Mickäel A.

9,012
5
54
71

answered Feb 11 '20 at 03:22

Sam Chen

7,597
2
40
73

What is the minimum android version for this solution? – Zhen Liu Feb 11 '20 at 17:49
@Zhen Liu I don't see any API Level requirement wanring, it's good for all version I guess. – Sam Chen Feb 11 '20 at 18:00

score 6 · Answer 3 · answered Mar 16 '20 at 17:01

6

Here's a simpler solution now in 2020 (API >= 21 because we're using the ?attr syntax) :

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?colorControlHighlight">
    <!--  the ripple's color (1) -->

    <!--  no `id` so our <shape> will be drawn and not just used as mask -->
    <item>
        <shape>
            <corners android:radius="9dp" />
            <solid android:color="@color/white" />
        </shape>
    </item>

</ripple>

(1) If you don't override colorControlHighlight in your theme, the ripple's color will be Android's default. If you do override it but still want to use Android's default use ?android:colorControlHighlight instead

answered Mar 16 '20 at 17:01

Mickäel A.

9,012
5
54
71

This approach works, but it has the problem that it always draws a background color (white in this case) when the item is not clicked. This causes overdraw. On the other hand, using a mask we can have a default transparent background and avoid that overdraw. – jmart Jun 18 '20 at 14:46
@flaw just delete solid line and use backgroundTint. This should be the #1 answer In 2021 because of the new system ripple effect – Joao Oct 05 '21 at 06:51
1

Better solution for 2021 – DIRTY DAVE Nov 23 '21 at 21:20

Shaped drawable with selectableItemBackground as background

3 Answers3

Linked