How to have padding for ripple effect

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?

use layout_margin. The ripple effect will not go beyond your margins — Tinashe, Nov 27 '15 at 05:23

score 2 · Answer 1 · answered Apr 01 '20 at 21:42

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>

score 0 · Answer 2 · answered Dec 10 '21 at 17:43

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"
    />

Louis CAD · Answer 3 · 2015-11-26T08:37:33.237

-4

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.

edited Nov 26 '15 at 08:37

answered Nov 26 '15 at 08:36

Louis CAD

10,965
2
39
58

1

I do not use card view. Please see my question again – Cheok Yan Cheng Nov 26 '15 at 08:37
You are saying that it doesn't support selector in backgroundColor. It it did, you would use it, right? – Louis CAD Nov 26 '15 at 08:38
Yes. If CardView accepts selector in backgroundColor, I prefer not to go through all hassle, in achieving shadowing effect using StateDrawable. However, I'm 100% sure with current state, CardView not able to do so according to the issue reporting in android - https://code.google.com/p/android/issues/detail?id=78198 – Cheok Yan Cheng Nov 27 '15 at 04:46
For shadow on pressed state, you can extend CardView and animate elevation on state changes. For ripple, I suggest you to use foreground attribute instead, it gives a better user feedback as the ripple is visible, whatever is in the CardView. Note that your CardView not having shadow feedback on pressed state is not mandatory. I'm using foreground ripple alone in my app. Also, don't over cardify your UI (see Material Design Guidelines). It seems that you are putting very few content in your cards, which are in a list. Adding CardViee here prevents quick eye scanning for user. – Louis CAD Nov 27 '15 at 06:48
Using card view foreground won't work. It will block card view content if you tend to use non transparent color. – Cheok Yan Cheng Nov 28 '15 at 06:15
Did you tried with my snippet (`android:foreground="?attr/selectableItemBackground"`)? I know that you didn't, but you should. Behind this attribute is a ripple state drawable, which won't show until you press the FrameLayout (CardView is a FrameLayout subclass). When you press it, the content will still be visible behind, because ripples aren't fully opaque. Neither selectable background (as a foreground here) are fully opaque on pre-Lollipop. Test it, please. – Louis CAD Nov 28 '15 at 10:31
I don't want use card view. I need different UI when the view is in different stage : activated, selected, ... – Cheok Yan Cheng Nov 28 '15 at 11:07
You are so complicated... You show me a CardView screenshot, but finally, you don't want it, and it's only now, after 6 comments that you say it... FrameLayout supports the same behavior, but you'll have to use layout_margin to change ripple bounds. Anyway, I don't exactly what you want to get, but it doesn't seem to be the good approach to me. You can still try using xml drawables among the different available types and set ripple there. – Louis CAD Nov 28 '15 at 11:37
U didn't read my question carefully. I already stated I didn't use card view in the very beginning. – Cheok Yan Cheng Nov 28 '15 at 12:27
But you didn't explained what you use and why you don't use CardView – Louis CAD Nov 28 '15 at 12:40

How to have padding for ripple effect

3 Answers3