Ripple Effect Disabled for List View Item

Question

I am using the following background for the list view item:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/light_gray"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
    <shape>
        <solid android:color="@color/light_gray" />
        <stroke
            android:width="0dp"
            android:color="@color/light_gray" />
        <corners android:radius="2dp" />
        <padding
            android:bottom="8dip"
            android:left="8dip"
            android:right="8dip"
            android:top="8dip" />
    </shape>
</item>

And the list view item layout is:

<RelativeLayout
    android:id="@+id/child_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/child_background_normal"
    android:clipChildren="false"
    android:clipToPadding="false">

    <TextView
        android:id="@+id/child_date_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="0dp"
        android:layout_marginStart="8dp"
        android:lines="1"
        android:textSize="12sp"
        android:fontFamily="sans-serif"
        tools:text="Today (every three weeks)"
        android:textColor="@color/dark_gray"/>

    <TextView
        android:id="@+id/child_time_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/child_date_text_view"
        android:layout_alignParentStart="true"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="-4dp"
        android:layout_marginBottom="0dp"
        android:lines="1"
        android:textSize="24sp"
        android:fontFamily="sans-serif"
        android:textStyle="bold"
        tools:text="10:00 am"
        android:textColor="@android:color/primary_text_light"/>

    <ImageView
        android:id="@+id/reminder_snooze_image_view"
        android:layout_width="18dp"
        android:layout_height="18dp"
        android:layout_alignTop="@+id/child_time_text_view"
        android:layout_alignBottom="@+id/child_time_text_view"
        android:layout_toEndOf="@+id/child_time_text_view"
        android:alpha="0.54"
        android:src="@drawable/ic_reminder_snoozed"/>

    <TextView
        android:id="@+id/child_title_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/child_time_text_view"
        android:layout_alignParentStart="true"
        android:layout_marginStart="8dp"
        android:layout_marginTop="-4dp"
        android:layout_marginBottom="0dp"
        android:layout_toStartOf="@+id/overflow_button_layout"
        android:maxLines="3"
        android:textSize="16sp"
        android:fontFamily="sans-serif-medium"
        android:ellipsize="end"
        tools:text="Ask Dalia to commit the test code daily to prevent integration issues early on"
        android:textColor="@android:color/primary_text_light"/>

    <FrameLayout
        android:id="@+id/overflow_button_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="-16dp"
        android:foreground="?attr/selectableItemBackgroundBorderless">

        <ImageButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:src="@drawable/ic_more"
            android:tint="@color/colorAccent"
            android:background="@drawable/overflow_button_background"/>

    </FrameLayout>

</RelativeLayout>

Knowing that the ImageButton in the list view item has a ripple effect itself using this drawable:

<?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/black"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape>
            <solid android:color="@color/colorAccentLight" />
            <stroke
                android:width="0dp"
                android:color="@color/colorAccentLight" />
            <corners android:radius="24dp" />
            <padding
                android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
        </shape>
    </item>
    <item >
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@android:color/white"/>
            <stroke android:width="0dp" android:color="@android:color/white" />
            <corners android:radius="24dp"/>
            <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
        </shape>
    </item>
</ripple>

Now, if I removed the ImageButton, the ripple effect is back to the list item view. It seems that the ripple effect of the ImageButton disables that of the list view item. How to make both work?

Answer 1

As it turns out, that this ImageButton makes the parent view "non-clickable". Just adding this android:clickable="true" to the parent container returns the ripple effect back.