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