ConstraintLayout中嵌套带背景View时selectableItemBackgroundBorderless失效

I’ve run into this exact issue before! The problem boils down to how the borderless ripple effect works versus the default clipping behavior of parent views.

What’s Going On? #

The ?attr/selectableItemBackgroundBorderless ripple is designed to extend beyond the bounds of your ImageButton/Button—that’s the "borderless" part. But when your button is inside a parent view (like your ConstraintLayout) that has a background, the parent defaults to android:clipChildren="true". This means any part of a child view (or its ripple) that goes outside the child’s own bounds gets clipped and hidden from view.

In contrast, ?attr/selectableItemBackground keeps the ripple strictly within the button’s bounds, so it never gets clipped by the parent—hence why it works fine.

Fixes to Try #

1. Disable Clipping on the Parent View

The simplest fix is to turn off clipping for the parent layout so the borderless ripple can draw outside the button. Add these two attributes to your parent ConstraintLayout:

android:clipChildren="false"
android:clipToPadding="false"

Here’s how your modified XML would look:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:clipToPadding="false"
    <!-- Your existing background and other attributes -->
    >

    <!-- Your ImageButton/Button with selectableItemBackgroundBorderless -->
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackgroundBorderless"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

2. Use a Custom Ripple Drawable (If You Can’t Disable Clipping)

If disabling clipping for the entire parent isn’t an option (e.g., it would break other layout elements), you can create a custom ripple that mimics the borderless effect but stays within acceptable bounds.

Create a file res/drawable/custom_borderless_ripple.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item>
        <shape android:shape="oval">
            <solid android:color="?attr/colorControlHighlight" />
        </shape>
    </item>
</ripple>

Then set it as your button’s background:

android:background="@drawable/custom_borderless_ripple"

This creates a circular ripple that’s larger than the button but won’t extend so far that it gets clipped by the parent (adjust the size if needed using android:radius in the shape).

Notes #

• Make sure your parent view doesn’t have any other clipping-related attributes that might override clipChildren.
• If your parent has padding, clipToPadding="false" ensures the ripple can draw into the padding area too.

内容的提问来源于stack exchange，提问作者Sai