Add dividers and ripple effect for each GridLayout square

Question

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:

And this is how I want it to look:

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

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

in place of android:foreground="?attr/selectableItemBackground" at imageView use android:background="?attr/selectableItemBackground" in RelativeLayout and set android:clickable="true". — Aniruddh Parihar, Nov 20 '18 at 08:58

score 1 · Accepted Answer · answered Nov 20 '18 at 08:52

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"

thank you! that did the job, sort of, I added a new picture to the bottom of the original post, showing you that the ripple works, but it only does a rectangle. Is it possible to somehow fill the "square" around the image? — pileup, Nov 20 '18 at 09:04
its not possible unless you add another layout which is directly on top of your parent layout where your imageview is located then add the ripple effect on that layout. do it with relative layout. this is just a suggestion :) — LeojAngelico, Nov 20 '18 at 09:17

score 0 · Answer 2 · answered Nov 19 '18 at 20:42

0

You can add divider by adding a GridItemDecoration to your recyclerview. i suggest you to use this.

a simple way for adding ripple when you click on items is adding a foreground with selectableItemBackground value to your item's view:

android:foreground="?attr/selectableItemBackground"

answered Nov 19 '18 at 20:42

Reza.Abedini

2,227
2
16
18

I added my xml for single item, including the code you provided, yet nothing happens – pileup Nov 20 '18 at 08:38
please add setOnClickListener for your item and check it again – Reza.Abedini Nov 20 '18 at 08:45
@Fireio or you can add android:clickable="true" android:focusable="true" to your item. – Reza.Abedini Nov 20 '18 at 08:55

score 0 · Answer 3 · answered Nov 20 '18 at 09:11

try this way for Ripple Effect in xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="6dip"
        android:clickable="true"
        android:focusable="true"
        android:background="?attr/selectableItemBackground">

        <ImageView

            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>

and follow this link for Dividers in between items How to add dividers and spaces between items in RecyclerView?

Add dividers and ripple effect for each GridLayout square

3 Answers3