Home » Android » android – How to have selectableItemBackground on Imageview?

android – How to have selectableItemBackground on Imageview?

Posted by: admin June 15, 2020 Leave a comment

Questions:

I have a RecyclerView with each item having the “selectableItemBackground” enabled on the item layout to give me that ripple effect on touch. The problem is, the items have an imageView on them and the ripple effect only takes place under the image. How to have the ripple appear on the complete item layout (over the imageView as well), just like when touching on the items on Google Playstore?

How to&Answers:

Alternatively you can try this:-
Simply, Wrap your ImageView with CardView

<android.support.v7.widget.CardView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:clickable="true"
        android:focusable="true"
        app:cardCornerRadius="4dp"
        android:foreground="?android:attr/selectableItemBackground">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>

Answer:

I solved set in parent content in foreground propiety value ?android:attr/selectableItemBackground" and focusable enabled.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:foreground="?android:attr/selectableItemBackground"
        android:focusable="true">

        <ImageView
            android:id="@+id/cover_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:contentDescription="@string/desc_empty"
            android:scaleType="centerCrop"
            android:src="@drawable/default_image" />

  </RelativeLayout>

Answer:

Inserting a View to other ViewGroup is affecting app performance, so you can just change your ImageView to ImageButton and give it ?attr/selectableItemBackground as background

<androidx.appcompat.widget.AppCompatImageButton
    android:id="@+id/myButton"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="?attr/selectableItemBackground"
    android:scaleType="centerCrop"
    app:srcCompat="@drawable/ic_arrow_white" />

Answer:

Try to use android:drawSelectorOnTop="true"in your RecyclerView in XML file.
And set Ripple effect selector as android:background property of you RecyclerView cell.

Example of selector for cell in drawable-v21 folder:

ripple_selector.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/preference_item_pressed"> <!-- ripple color -->
    <item android:id="@android:id/mask">
        <color android:color="@android:color/white" />
    </item> <!-- normal color -->
</ripple>

And example of cell with selector background:

cell.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="72dp" android:layout_height="72dp"
    android:background="@drawable/ripple_selector">
</RelativeLayout>