如何填充波纹效果

Question

Previously, I'm using StateDrawable to achieve custom card view with shadow effect - https://stackoverflow.com/a/33829309/72437 . This is due to the limitation of CardView , of not able to accept selector in its cardBackgroundColor

Now, I want to add ripple effect. I use the following XML.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#00ff00">
    <item android:drawable="@drawable/statelist_item_background"/>
</ripple>

However, this is having side effect where the green ripple extends till it touches shadow region.

I want to avoid the green ripple from touching shadow region. I try to add in padding information.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#00ff00">
    <item>
        <shape android:shape="rectangle">
            <padding android:top="10dp" android:right="10dp" android:bottom="10dp" android:left="10dp" />
        </shape>
    </item>

    <item android:drawable="@drawable/statelist_item_background"/>
</ripple>

However, it makes no different. Adding padding information within ripple tag makes no difference.

May I know how can I have padding for ripple effect?

Answer 1

You can use the inset tag to define the padding you need. There is an inset attribute to define global padding or 4 attributes for each directions.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:inset="10dp">
    <ripple
        android:color="#00ff00">
        <item android:drawable="@drawable/statelist_item_background"/>
    </ripple>
</inset>

Answer 2

First create the drawable file (ex: bg_ripple.xml)

<?xml version="1.0" encoding="utf-8"?>    
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:inset="4dp">

    <ripple android:color="@color/gray_light">    

        <item android:id="@android:id/mask">
            <shape android:shape="rectangle">
                <!-- this color does not matter, it's a mask shape -->
                <solid android:color="@color/blue" />
                <corners android:radius="@dimen/button_corner_radius" />
            </shape>
        </item>

        <item android:id="@android:id/background">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/button_corner_radius" />
                <stroke
                    android:width="2dp"
                    android:color="@color/red"
                    />
                <solid android:color="@color/white" />
            </shape>
        </item>

    </ripple>
</inset>

Second add it as a background to the Button

<Button        
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/click_me"
    android:background="@drawable/bg_ripple"
    />

Answer 3

You should add this to your CarView:

<CardView
    ...
    style="@style/MyCardViewStyle"
    android:foreground="?attr/selectableItemBackground">
</CardView>

And then, add this in your style:

<style name="MyCardViewStyle">
    <item name="colorControlHighlight">@color/my_awesome_color</item>
</style>

It will give you the awesome color you want to your ripple effect, without having to create yourself your ripple, and the bounds will automatically be detected so you won't need to find if it's even possible to add a padding to the ripple.