Search code examples
androidgridviewandroid-gridviewdivider

Drawable dividers for a GridView


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:

enter image description here

Reality:

enter image description here

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>

Solution

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