selectableItemBackgroundBorderless issue in ConstraintLayout

Question

selectableItemBackgroundBorderless is not working if ImageButton or Button is placed inside a View with a background, but selectableItemBackground still works.

Xml:

<?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:background="@color/colorAccent">

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:visibility="visible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/previous_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_previous"
        app:layout_constraintBottom_toBottomOf="@+id/play_ib"
        app:layout_constraintEnd_toStartOf="@+id/play_ib"
        app:layout_constraintTop_toTopOf="@+id/play_ib" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/play_ib"
        android:layout_width="68dp"
        android:layout_height="68dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_play"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/next_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_next"
        app:layout_constraintBottom_toBottomOf="@+id/play_ib"
        app:layout_constraintStart_toEndOf="@+id/play_ib"
        app:layout_constraintTop_toTopOf="@+id/play_ib" />

</android.support.constraint.ConstraintLayout>

This is what I am trying to do. But the ripple effects are gone.

It's happening because the parent i.e ConstraintLayout has a background color. — ibhavikmakwana, Apr 28 '18 at 10:19
try this in you ImageButton: android:background="?attr/selectableItemBackgroundBorderless" — ibhavikmakwana, Apr 28 '18 at 10:21
@BhavikMakwana It happens event, without parent background. `"?attr/selectableItemBackgroundBorderless" ` and `?android:attr/selectableItemBackgroundBorderless` nothing works. — Sai, Apr 28 '18 at 10:26
See this: https://stackoverflow.com/questions/31948189/material-ripple-effect-hidden-by-other-view-in-layout — Khang .NT, Jun 13 '18 at 11:15
Seems I had a similar issue: https://issuetracker.google.com/issues/111819099 . Please consider starring it, and also try the sample project with the workaround I've written later. — android developer, Aug 19 '18 at 09:08

score 4 · Answer 1 · answered Dec 21 '19 at 10:39

4

Until this issue got fixed, one solution is to use android:background="?actionBarItemBackground" that creates circular ripple effect and also works in constraint layout.

answered Dec 21 '19 at 10:39

Habib Kazemi

2,172
1
24
30

score 3 · Answer 2 · answered May 10 '20 at 15:41

3

I used this and it worked fine for me.

android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"

answered May 10 '20 at 15:41

Vijay E

829
10
14

score 2 · Answer 3 · answered Apr 29 '18 at 12:03

2

Normally this would be a comment, but I'm too new apparently.

Have you tried
android:foreground="?selectableItemBackgroundBorderless"

instead of
android:background="?selectableItemBackgroundBorderless"
?

answered Apr 29 '18 at 12:03

IntersectGlasses

53
1
6

Yes, but no luck. – Sai May 03 '18 at 09:55
Worked for me. Thanks! – Nuhman May 01 '19 at 02:24

score 2 · Answer 4 · answered Aug 24 '19 at 16:09

For those who are looking for a reasonable answer I'm afraid this is a known bug in ConstraintLayout: selectableItemBackground shown upon clicking, while selectableItemBackgroundBorderless isn't as it's mentioned here

Please consider starring it, and also reporting there in case you find more issues.

score 1 · Answer 5 · answered Apr 28 '18 at 12:05

This happens because of android:background="@color/colorPrimary" in View. But do you really need this View which doesn't have any children views in it? I'd recommend replacing View with another ConstraintLayout. Just put all the ImageButtons in the second ConstraintLayout and your issue will be gone.

<?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:background="@color/colorAccent">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:visibility="visible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" >


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/previous_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_previous"
        app:layout_constraintBottom_toBottomOf="@+id/play_ib"
        app:layout_constraintEnd_toStartOf="@+id/play_ib"
        app:layout_constraintTop_toTopOf="@+id/play_ib" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/play_ib"
        android:layout_width="68dp"
        android:layout_height="68dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_play"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/next_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_next"
        app:layout_constraintBottom_toBottomOf="@+id/play_ib"
        app:layout_constraintStart_toEndOf="@+id/play_ib"
        app:layout_constraintTop_toTopOf="@+id/play_ib" />
    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

score 0 · Answer 6 · answered Mar 04 '21 at 06:08

If your parent view is a ConstraintLayout then please wrap the ImageButton in a FrameLayout like :

<FrameLayout
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:layout_constraintBottom_toBottomOf="@+id/play_ib"
          app:layout_constraintStart_toEndOf="@+id/play_ib"
          app:layout_constraintTop_toTopOf="@+id/play_ib">

   <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/next_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_next" />

</FrameLayout>

There is apparently some bug in constraint layout which causes this behaviour. You can explore more if you're curious.

score -1 · Answer 7 · answered Sep 02 '22 at 13:13

That's because background that under view. Try to apply android:background="?attr/selectableItemBackgroundBorderless" to any view on the clear screen.

You will see a ripple effect. In My case i was using ViewPager with fragment as page. In each page was same background color like in ViewPagerFragment. I removed background from page and them ripple effect started to work properly.

android:background="?attr/selectableItemBackground" work flawles in any case that i tested.

selectableItemBackgroundBorderless issue in ConstraintLayout

7 Answers7