android gridview row dividers / separators

Question

Is there a way to show (horizontal) dividers between rows in a gridview?

I tried putting a small divider-image below every grid item, but this is not a solution, because it won't span the whole row when a row is not completely filled with items.

Is there a way to just add an image between every row? I can only find methods for changing the space between rows.

There is a similar post with code and suggestions here: http://stackoverflow.com/questions/7132030/android-gridview-draw-dividers — Warpzit, Mar 10 '16 at 10:32

score 83 · Answer 1 · answered May 27 '14 at 14:21

If you are using custom layout for grid items. Below code will work.

Step 1: Give background color to GridView

This is going to serve as a divider.
Give horizontalSpacing and verticalSpacing as 1dp
backgroundColor will be your divider color.

<GridView
        android:id="@+id/gridView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#e5e5e5"
        android:horizontalSpacing="1dp"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="1dp" >

Step 2: Give background color to Custom Grid Item Layout

This is going to serve as a foreground color for GridItems.
In my case I kept it white (#fff)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#fff"
    android:padding="15dp"
     >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/ic_launcher_transparent" />

    <TextView
        android:id="@+id/lable"
        android:layout_marginTop="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textStyle="bold"
        android:textColor="#D0583B"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>

Result

enter image description here

Note:
If you do not want vertical separator, keep horizontalSpacing = 0dp
If you do not want horizontal separator, keep verticalSpacing = 0dp

is there any way to add drawable image row horizontal divider ? — Naitik, Mar 17 '16 at 13:08
well, here background color of gridView serves as divider so you can add some repeating background image tile instead, you might get it as divider. — Chaitanya Chandurkar, Apr 12 '16 at 01:14
if you have odd number of items, then the last item shows up grey with this method, though its easy to implement — Mallika Khullar, Aug 05 '16 at 11:23
This solution does not work well in case we have irregular number of items in GridView, e.g. 7 elements in 3 column GridView. — hpopiolkiewicz, Oct 29 '16 at 21:25
@chaitanyaChandurkar needed to solve this issue https://stackoverflow.com/questions/50131709/provide-different-color-to-the-seperator-in-the-gridview — Ghimire, May 08 '18 at 10:55

score 5 · Accepted Answer · edited May 23 '17 at 11:55

5

I ended up creating a custom gridview, something like this:

https://stackoverflow.com/a/9757501/1310343

using a background image that is exactly as high as one item in my gridview, and has a devider at the bottom.

Works like a charm!

edited May 23 '17 at 11:55

Community

1
1

answered Aug 28 '12 at 13:44

Frank

12,010
8
61
78

Hey, is that possibly explain a bit more how you integrated with above mentioned link? Or how to change the normal gridview code to custom grid view like you mentioned in the answer. I'm trying similar things. I'm failed to reverse engineer the bookshelf shelves code! – LOG_TAG Mar 23 '13 at 07:42
1

I create a class that extends Gridview and override onDraw, call super.draw(canvas) in it and then draw the shelves on the canvas. – Frank Mar 25 '13 at 08:02
@Frank can you help to solve this issue https://stackoverflow.com/questions/50131709/provide-different-color-to-the-seperator-in-the-gridview – Ghimire May 08 '18 at 10:54

score 4 · Answer 3 · answered May 03 '16 at 08:20

Just wanted to share how I implemented this using the link accepted by OP. For my case I also needed to control the length of the separators, so I couldn't get around subclassing GridView.

public class HorizontalSeparatorGridView extends GridView {

    // Additional methods 

    @Override
    protected void dispatchDraw(Canvas canvas) {

        final int count = getChildCount();
        for(int i = 0; i < count; i++) {
            View child = getChildAt(i);
            int bottom = child.getBottom();
            int left = child.getLeft();
            int right = child.getRight();

            Paint paint = new Paint();
            paint.setColor(0xffececec);

            paint.setStrokeWidth(Math.round(0.5 * density));

            int offset = // Some offset

            canvas.drawLine(left + offset, bottom, right - offset, bottom, paint);
        }


        super.dispatchDraw(canvas);
    }

I subclassed dispatchDraw as opposed to onDraw just to be safe but I don't think it would matter in this case.

dude, this is a great solution! I was looking for something similar (create grid lines on charts) and I changed enough parts to work perfectly. Thanks for sharing this great strategy — Renan Bandeira, Nov 27 '16 at 01:33

score 0 · Answer 4 · answered Aug 24 '12 at 12:15

I suggest doing the following:

`

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="1sp"
        android:layout_marginLeft="7sp"
        android:layout_marginRight="7sp"
        android:layout_marginTop="7sp"
        android:background="@android:color/transparent">

        <TextView
            android:id="@+id/lblDeposit"
            android:layout_width="60sp"
            android:layout_height="40sp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="0sp"
            android:background="@drawable/rounded_top_left_rectangle"
            android:gravity="center"
            android:paddingLeft="5sp"
            android:scaleType="fitXY"
            android:text="Deposit"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#000">
        </TextView>

        <TextView
            android:id="@+id/lblDepositvalue"
            android:layout_width="50sp"
            android:layout_height="40sp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="2sp"
            android:layout_marginRight="13sp"
            android:background="@drawable/rounded_top_right_rectangle"
            android:gravity="center_vertical|center_horizontal"
            android:scaleType="fitXY"
            android:text="40000/-Rs"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#000">
        </TextView>
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="6sp"
        android:layout_marginLeft="7sp"
        android:layout_marginRight="7sp"
        android:layout_marginTop="2sp"
        android:background="@android:color/transparent">

        <TextView
            android:id="@+id/lblPoints"
            android:layout_width="60sp"
            android:layout_height="40sp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="0sp"
            android:background="@drawable/rounded_bottom_right_rectangle"
            android:gravity="center"
            android:paddingLeft="5sp"
            android:scaleType="fitXY"
            android:text="Points "
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#000">
        </TextView>

        <TextView
            android:id="@+id/lblPointsValue"
            android:layout_width="50sp"
            android:layout_height="40sp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="2sp"
            android:layout_marginRight="13sp"
            android:background="@drawable/rounded_bottom_left_rectangle"
            android:gravity="center_vertical|center_horizontal"
            android:scaleType="fitXY"
            android:text="20"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#000">
        </TextView>
    </TableRow>
</TableLayout>`

This is a tablelayout, I'm using a gridview. – Frank Aug 24 '12 at 12:27 — Frank, Aug 24 '12 at 12:27

android gridview row dividers / separators

4 Answers4

Step 1: Give background color to GridView

Step 2: Give background color to Custom Grid Item Layout

Result

Linked