8

I am trying to add custom divider in RecyclerView with GridLayoutManager but not getting success, i have searched a lot and looked into below mention answer but it didn't help me

link 1
link 2
link 3

I want to put black line in between each items of RecyclerView, something like below.

enter image description here

I have got horizontal line in between each row, but not able to find how to get those lines in between columns also.

chintan soni's answer worked perfectly, but it is creating problem in one scenario only, when i am having 5 views, it shows divider of other 3 items also, like below :

enter image description here

Community
  • 1
  • 1
Ravi
  • 34,851
  • 21
  • 122
  • 183
  • this answer working properly. http://stackoverflow.com/a/29168276/2900893 – Shabbir Dhangot Sep 14 '16 at 12:16
  • @ShabbirDhangot it is just leaving space between items, doesn't allow to set custom divider, i have already tried it. And in that answer i haven't seen any scope to set color also, otherwise int that way also i can use – Ravi Sep 14 '16 at 12:17
  • How did you get custom divider between row? – Shabbir Dhangot Sep 14 '16 at 12:22
  • by using [this](http://stackoverflow.com/a/27037230/3134215) answer. – Ravi Sep 14 '16 at 12:24
  • There is simple hack you can do for Vertical line. Create view of 2dp width and match_parent height. now you make this view gravity to centerVerticlae. This will show you straight line on the screen. Now make recyclerview background transparent and make some space between column to display view behind it. – Shabbir Dhangot Sep 14 '16 at 12:33
  • @ShabbirDhangot thanks buddy, this will definitely work, but this is just demo image, in real i have 4 column view. With 2 column view your hack will work perfectly :) – Ravi Sep 14 '16 at 12:35
  • @RaviRupareliya Amne puchyu hot to ame pan thodi help karat ! – Piyush Sep 14 '16 at 13:23
  • you don't need any library, check this answer https://stackoverflow.com/a/67654555/4797289 – Rasoul Miri May 22 '21 at 22:06

3 Answers3

11

Check this out: https://bignerdranch.github.io/simple-item-decoration/

Add this to your app level gradle and sync:

compile 'com.bignerdranch.android:simple-item-decoration:1.0.0'

Then, apply code as below:

    Drawable horizontalDivider = ContextCompat.getDrawable(this, R.drawable.line_divider);
    Drawable verticalDivider = ContextCompat.getDrawable(this, R.drawable.line_divider);
    recyclerView.addItemDecoration(new GridDividerItemDecoration(horizontalDivider, verticalDivider, 4));

My line_divider.xml was as follows:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size
        android:width="1dp"
        android:height="1dp" />

    <solid android:color="@android:color/black" />

</shape>

This is just a quick answer from me. But this should work, I guess..

Output:enter image description here

Chintan Soni
  • 24,761
  • 25
  • 106
  • 174
  • 2
    This is lifetime proper way solution :) – Piyush Sep 14 '16 at 13:23
  • @Piyush yea.. it is.. :) – Chintan Soni Sep 14 '16 at 13:27
  • @ChintanSoni i am having one problem here, if i am having only 5 views, 1st row will contain 4 views and last view will be in 2nd row, at that time still it shows divider of other 3 views, which is actualy not present. I have updated my question, can you please check it? – Ravi Sep 14 '16 at 13:34
  • I'm getting java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.View.getTop()' on a null object reference at com.zoho.desk.radar.maincard.traffic.channel.adapter.GridDividerItemDecoration.drawHorizontalDividers(GridDividerItemDecoration.java:96) at com.zoho.desk.radar.maincard.traffic.channel.adapter.GridDividerItemDecoration.onDraw(GridDividerItemDecoration.java:44) – Guru Karthi R Dec 30 '19 at 09:39
6

enter image description hereSimply, write your XML file in layout with a RecyclerView In your Activity write the following code to achieve divider for GridLayoutManager in RecyclerView

RecyclerView.LayoutManager mLayoutManager = new GridLayoutManager(getApplicationContext(), 3);
recyclerView.setLayoutManager(mLayoutManager);
recyclerView.setItemAnimator(new DefaultItemAnimator());
DividerItemDecoration Hdivider = new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.HORIZONTAL);
DividerItemDecoration Vdivider = new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.VERTICAL);
Hdivider.setDrawable(ContextCompat.getDrawable(getBaseContext(), R.drawable.divider));
Vdivider.setDrawable(ContextCompat.getDrawable(getBaseContext(), R.drawable.divider));
recyclerView.addItemDecoration(Hdivider);
recyclerView.addItemDecoration(Vdivider);

Above, both Horizontal and Vertical divider are added to get the whole grid look. The Drawable file can look exactly as you like for your application. Mine looks like this.

   <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <size
            android:width="1dp"
            android:height="1dp" />
        <solid android:color="@color/white" />
    </shape>

Happy Coding!

Anam Ansari
  • 849
  • 9
  • 14
0

As per you have four columns I create as per that. This will have three straight vertical line for four columns

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"/>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/black"/>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/black"/>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/black"/>
    </RelativeLayout>
</LinearLayout>
Shabbir Dhangot
  • 8,954
  • 10
  • 58
  • 80
  • 1
    old and well-know, lifetime solution.. :D – Arth Tilva Sep 14 '16 at 12:45
  • :) will try, hope it will work. But i have a question, what if i have 9 items? first 2 rows will be filled and in 3rd row i will get one item, but still it will show me 2 lines of 3rd and 4th columns right? – Ravi Sep 14 '16 at 12:46
  • yes it will happen with this and item decorator too. It show blank part over there on Item decorator . Because it is single color you wont see any side effect. – Shabbir Dhangot Sep 14 '16 at 12:56