Search code examples
androidandroid-recyclerviewrippledrawable

Add dividers and ripple effect for each GridLayout square


I am using RecyclerView + GridLayout (3 columns). Now to make each square of the grid more "responsive", I want that each square will show some sort of divider, and that there will be a ripple effect within each square that the user clicks.

Edit : I added android:foreground="?attr/selectableItemBackground", but nothing happens.This is the single item xml code right now:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="6dip" >

    <ImageView
        android:foreground="?attr/selectableItemBackground"
        android:id="@+id/icon"
        android:layout_width="128dp"
        android:layout_height="118dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="12dp"
        android:layout_marginEnd="12dp"
        android:layout_marginTop="12dp"
        android:contentDescription="TODO"
        android:src="@drawable/ic_launcher_background" />
</RelativeLayout>

This is how it currently look: NoRippleDivider

And this is how I want it to look: enter image description here

This is how it works currently after fix, after adding:

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

enter image description here


Solution

  • you can create a ripple drawable like this if you want it to be customize:

    ripple.xml

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimaryDark">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryLight" />
            <!--<corners android:radius="@dimen/button_radius_large" />-->
        </shape>
    </item>
    
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/background"
                android:startColor="@color/background"
                android:type="linear" />
            <!--<corners android:radius="10dp" />-->
        </shape>
    </item>
    

    and use it in your layout like this:

    android:clickable="true"
    android:background="@drawable/ripple"
    

    OR you can simply do it like this:

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