Android Gridview Draw Dividers

Android GridView draw dividers

Unfortunately, after looking at the source code, I could not see any easy way to add borders other than taking the approach of adding borders to the each cell. As a reference, I will post my solution here.

list_item.xml

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

    <!-- Cell contents -->

</LinearLayout>

list_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
        android:state_selected="true" 
        android:drawable="@drawable/item_border_selected" 
    />
    <item 
        android:state_pressed="true" 
        android:drawable="@drawable/item_border_selected" 
    />
    <item
        android:drawable="@drawable/item_border" 
    />
</selector>

item_border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid 
        android:color="@android:color/transparent" 
    />
    <stroke 
        android:width="1px" 
        android:color="@color/list_divider" 
    />
</shape>

item_border_selected.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid 
        android:color="@color/list_select" 
    />
    <stroke 
        android:width="1px" 
        android:color="@color/list_divider" 
    />
</shape>

items_view.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginLeft="-1px"
    android:layout_marginRight="-1px"
    android:listSelector="@android:color/transparent"
/>

Since all lines double in size as they join their neighboring cells, I made the divider size 1px instead of 1dp so it doesn't appear too large on some screens. Also, I made the grid view have negative margins to hide the lines on either side. I hope this helps someone.

android gridview row dividers / separators

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!

Android GridView with Separator

You'll probably have to play with padding and background colors. Set the background for the table to one color, and the background to each View in the table to another color. Set a 1 or 2 pixel padding around each View in the table, and you should have a border between.

---

Related Topics