Ripple effect over the actual border

Question

I have created a listview and added a border to it's items.

something like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false"
    android:orientation="horizontal"
    android:background="@drawable/listviewborderbox"
    android:padding="10dp" >

    <LinearLayout
        android:id="@+id/sharedbyyouNameLayout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".70"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/sharedbyyoutext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="@string/sampletext1"
            android:textColor="@color/blackText"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/sharedbyyouselected"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="@string/sampletext2"
            android:textColor="@color/blackText"
            android:textSize="16sp"
            tools:ignore="RtlHardcoded" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/sharedbyyouLayoutforarrow"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".10"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_next"
            tools:ignore="RtlSymmetry,RtlHardcoded,ContentDescription" />
    </LinearLayout>
</LinearLayout> 

And I have ripple effect value in Drawable-v21 like this:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/white"> <item android:drawable="@color/footercolor"/> </ripple>

Border shape xml in drawable folder is this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="@color/colorforbodybox" />
    <corners android:radius="10dip"/>
    <stroke android:width="2dip" android:color="@color/colorforborder" />
</shape>

Ripple effect works but ripple effect is shown outside the border line that I have drawn. Please check pic below:

How do I make the ripple effect not to cross the border in the list view?

Answer 1

To achieve rounded corner ripple effect change your ripple xml file to:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@android:color/white"
    tools:targetApi="lollipop">

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="10dp"/>
            <solid android:color="@color/footercolor"/>
        </shape>
    </item>

</ripple>

Answer 2

The problem I had was that the corner radius of my views was not a fixed value therefore using the xml suggested didn't work for me.

I needed a something that would adapt the ripple effect every time regardless of the shape used so...

I used a simple view extension:

fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) { // Here you can pass the color you want for the ripple effect and assign a "default" value
    val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
    this.background = RippleDrawable(
        rippleColor, // This is the color of the effect and needs to be a ColorStateList
        this.background, // ( = content ) With this you use your view's background as the content of the ripple effect 
        this.background) // ( = mask ) With this the ripple will take the shape of the background and not "spill over". (Could be null IF you did set the previous variable "content = this.background")
}

OR, if you want to separate the two layers:

fun View.addRippleEffect(rippleColorId: Int = R.color.rippleColor) { 
    val rippleColor = ColorStateList.valueOf(ContextCompat.getColor(App.context(), rippleColorId))
    this.foreground = RippleDrawable( //Using the foreground allows you to give the view whatever background you need
        rippleColor, 
        null, //Whatever shape you put here will cover everything you've got underneath so you probably want to keep it "null"
        this.background)
}

Basically you give a view a background (rounded rectangle with borders in your case) then you can simply call the extension in your Activity/Fragment:

whateverView.addRippleEffect()
//or
whateverView.addRippleEffect(R.color.red)

See: https://developer.android.com/reference/android/graphics/drawable/RippleDrawable

Answer 3

1. Create the Ripple Drawable Contains the Backgound Shape

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

    <item>
        <shape                                      //the background shape when it's not being click
            android:shape="rectangle">

            <solid
                android:color="@color/colorPrimary" />

            <corners
                android:radius="32dp" />

        </shape>

    </item>

</ripple>

2. Applying the Drawable to the View and REMOVE THE SHADOW

<Button
    style="?borderlessButtonStyle"                          //remove the default shadow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background_button"        //here
    android:text="Sign up"
    android:textAllCaps="false"
    android:textColor="@android:color/white" />

Answer 4

Try setting clipToOutline of your View / ViewGroup to true, either in the code or through XML, it should limit the ripple's area accordingly (as long as you background shape matches the requirements, see the docs for more details).