?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>

Desist

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.

Romelda

Love you --{--{@ – Proprietor

Answer 2

That line is not quite right. Use:

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

Claybourne

I was getting an android.view.InflateException when using ?attr/selectableItemBackgroundBorderless (which I already used in another projects and worked fine). When I set the background with your answer it worked! Thank you! FWIW: My app theme is android:Theme.Material (old projects was Theme.AppCompat[...] – Drawn

InflateException on KitKat – Tasman

Note that this can only be used from API 21 . – Emmery

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.

Emmery

Still it is showing the ripple effect till frame layout background only. In my case I need the ripple effect to be flow out of the boundary – Headlock

@KingofMasses Did you try to set clipChildren="false" and clipToPadding="false" on the parent view/s ? – Emmery

Yeah, but still it is showing around my frame layout only. I.e If i tried the same ?attr/selectableItemBackgroundBorderless on list item for recycler view it showing as I expected. But don't know why it is not working on Framelayout – Headlock

@KingofMasses Try to make a POC. Many times I find out the reason via a tiny project instead of trying on the original one. – Emmery

Ok sure, vll try that and let you know. Thanks – Headlock

For me what worked was to set clipChildren="false", clipToPadding="false" and android:background="<some-bg>" on all parent views. – Decontrol

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

Ignite

Answer 5

For me, the issue was resolved when I made the view clickable. Either add android:clickable="true" or programmatically add a click listener on the view.

Antemundane

Answer 6

Use android:foreground="?attr/selectableItemBackgroundBorderless"

and

  `android:clipChildern="false"  
   android:clipToPadding="false"`

for ALL the parent layouts

Condescension

Answer 7

You should use android:focusable attribute in your ImageView

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

Twinscrew

Answer 8

Your parent layout needs a background. You can set for example android:background="@android:color/transparent"

However, there are cases, where the background of the parent layout is covered by another view, in this case, you can wrap the button around FrameLayout and set a background to it. You need to set enough padding to FrameLayout to make space for the full ripple effect.

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="@android:color/transparent">

    <ImageButton
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:src="@drawable/profile_image"/>
</FrameLayout>

Feola