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.

Trainman

There is a similar post with code and suggestions here: #7132530 – Marble

Answer 1

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

https://mcmap.net/q/428708/-background-scrolling-with-item-in-gridview

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!

Trainman

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! – Enwomb

I create a class that extends Gridview and override onDraw, call super.draw(canvas) in it and then draw the shelves on the canvas. – Trainman

@Trainman can you help to solve this issue #50132209 – Vegetative

Answer 2

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

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

Rogovy

is there any way to add drawable image row horizontal divider ? – Duckworth

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. – Rogovy

if you have odd number of items, then the last item shows up grey with this method, though its easy to implement – Asti

This solution does not work well in case we have irregular number of items in GridView, e.g. 7 elements in 3 column GridView. – Integrant

This implementation increases overdraw – Machinist

@chaitanyaChandurkar needed to solve this issue #50132209 – Vegetative

Answer 3

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.

Jeaz

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 – Anderaanderea

Answer 4

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>`  

Alberto

This is a tablelayout, I'm using a gridview. – Trainman