Drawable dividers for a GridView

Question

How do you set up custom dividers for a GridView?
I mean, there's a .png item with that blue gradient divider, but how do I put it in the GridView at the right place?

Searching through internet didn't bring any viable results..

Expectation:

Reality:

gridview wrapper xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/primary_blue_dark"
android:orientation="vertical">

....

<GridView
    android:id="@+id/gv_stock"
    android:paddingEnd="@dimen/activity_horizontal_margin"
    android:paddingStart="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchMode="columnWidth"
    android:numColumns="2"/>
</LinearLayout>

gridview item xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/primary_blue_dark"
style="@style/padded_layout"
android:weightSum="2">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:layout_weight="1">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        style="@style/teal_text_middle"
        android:gravity="center"
        android:text="test"/>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:layout_weight="1"
    android:gravity="center">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="2">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.7"/>
        <ImageView
            android:id="@+id/iv_arrow"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_weight="1.3"
            android:src="@drawable/ic_arrow_green"/>
    </LinearLayout>

    <TextView
        android:id="@+id/tv_value"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        style="@style/white_text_big"
        android:gravity="center"
        android:text="test"/>
</LinearLayout>

</LinearLayout>

@BobMalooga, you mean to do like this? `android:background="@drawable/ic_separator_horizontal"`. This works fine for the horizontal gradient line. But how do I insert such between columns items? gradient should stretch only through one row. — AnZ, Mar 09 '16 at 12:52
Yea, I've got the idea. But that's rather a workaround. That would be hard to create such gradient that will be exactly at the middle of each row. I mean it would not fit every screen size. — AnZ, Mar 09 '16 at 13:58
@BobMalooga, I would be thankful if you post an answer with this way of solving the problem. Because I don't really realize how to use those 2 smaller gradients — AnZ, Mar 09 '16 at 15:07

score 1 · Answer 1 · edited May 23 '17 at 10:28

By using this answer here and simply changing the grey solid color background color for an image like this one (I set it for hdpi resolution - but it should stretch well both up and down),

you should get an effect like this (here it's on an ldpi device, so scaled down twice):

Which is not too far from what you're looking for.

It works, at least in principle. It may need some tweaking (narrowing the vertical central part), but you got the concept. You might also want to cover some of the top (and possibly the bottom part, too) part, so to hide the trick.

With a simple "see through" effect, you can avoid messing with styles/themes.

[EDIT]

Yes, I know, it's MAINZ, not MEINZ (but, well... the pronounce is indeed the same! Hurry is a bad advisor, you know).

score 1 · Accepted Answer · answered May 23 '16 at 14:56

1

Use GridLayoutManager with Recyclerview and add the Itemdecoration from the following gist.You can vary offset's as per your requirement.

answered May 23 '16 at 14:56

Ravi Theja

3,371
1
22
34

Thanks, that gives expected behavior with several modifications – AnZ May 24 '16 at 09:24

Drawable dividers for a GridView

2 Answers2