androidrippledrawable

Keep ripple within stroke


I'm trying to create a ripple background drawable for a Button with a stroke.

This is what I have so far:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#336699">

    <item>
        <shape android:shape="rectangle">

            <solid android:color="#998811" />

            <stroke
                android:width="2dp"
                android:color="#119988" />

        </shape>
    </item>
</ripple>

But with this solution, the ripple overlaps with my stroke.
I only want the ripple within the stroke, How can I do this?


Solution

  • As per the documentation you add another item with id @android:id/mask - that will limit where the ripple goes. You can set that to be inset, like so:

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="#336699">
    
        <item>
            <shape android:shape="rectangle">
    
                <solid android:color="#998811" />
    
                <stroke
                    android:width="2dp"
                    android:color="#119988" />
    
            </shape>
        </item>
    
        <item android:id="@android:id/mask">
            <inset android:insetBottom="2dp"
                   android:insetLeft="2dp" 
                   android:insetRight="2dp"
                   android:insetTop="2dp">
                <shape android:shape="rectangle">
                    <!-- Color doesn't matter -->
                    <solid android:color="@android:color/white"/>
                </shape>
            </inset>
        </item>
    </ripple>