CODEWITHSUNDEEP
androidxmlandroid-layout
SergeantPeauts
SergeantPeauts

Reputation: 372

How to have selectableItemBackground on Imageview?

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?

Upvotes: 14

Views: 12023

Answers (4)

zihadrizkyef
zihadrizkyef

Reputation: 1941

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" />

Upvotes: 5

Paresh
Paresh

Reputation: 6857

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>

Upvotes: 20

Codelaby
Codelaby

Reputation: 2873

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>

Upvotes: 5

mtwain
mtwain

Reputation: 101

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>

Upvotes: 1

Related Questions