?selectableItemBackgroundBorderless not working

Question

I am trying to implement a view which uses the default itemBackground style of Android (but with the oval background, that is used on action bar items etc). Somehow the following view is not showing the background at all. If I change android:background to android:foreground it only shows the rectangle but not the oval. Has anyone an idea how to fix that?

<LinearLayout
    app:visibleGone="@{showProfile}"
    android:layout_width="wrap_content"
    android:layout_height="26dp"
    android:layout_alignParentStart="true"
    android:gravity="center"
    android:paddingStart="16dp"
    android:paddingEnd="16dp">

       <ImageView
            android:background="?selectableItemBackgroundBorderless"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:onClick="@{() -> profileCallback.onClick()}"
            android:src="@drawable/profile_image" />

</LinearLayout>

Answer 1

Your code is correct, but the tricky thing is the parent layout needs a background too.

Try to set android:background="@android:color/transparent" or any other background to its parent. In your case it's the LinearLayout.

Answer 2

That line is not quite right. Use:

android:background="?android:attr/selectableItemBackgroundBorderless"

Answer 3

If you have API 21 and above, you could try android:background="?android:attr/selectableItemBackgroundBorderless" instead.

However, in some cases (such as somehow being inside ConstraintLayout, whether directly or not), this is a known issue:

https://issuetracker.google.com/issues/111819099

An example of a workaround is to use FrameLayout instead, just for the clicking effect. Here:

        <FrameLayout
            android:id="@+id/button" ...
            android:clickable="true" android:focusable="true"
            android:foreground="?attr/selectableItemBackgroundBorderless">

            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="match_parent" android:layout_height="match_parent" .../>
        </FrameLayout>

If you have API 21+, You could at least set the foregroundTint too, to change the color of this effect.

Answer 4

I have similar bug, may be it help someone:

If your parent is FrameLayout and it has another children with background, them can overlay your selectableItemBackgroundBorderless