Android GridView draw dividers

Question

I'd like to know the simplest way to draw dividers between items (currently textviews) within a GridView. The only way I can think of is to draw borders around those textviews so when combined, they look like continuous horizontal and vertical dividers.

There is a setDivider() for listviews but not gridviews?

Thanks.

Easel

https://mcmap.net/q/429846/-how-to-set-border-of-gridview-on-android This answer seemed to be easier and clever than the answer below – Brewhouse

@Sundeep: If you set the background color of a GridView item, then the colour of them item doesnt change when it's focused. The user's selected overcomes this problem. – Muumuu

@Brewhouse It will slow the draw process. – Nephritic

Answer 1

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.

Lemuellemuela

Nice. What are your list_divider and list_select defined as? – Selfsupport

Thanks, in list_selector.xml I used "@drawable/item_border" It's working fine as divided as the component of the item, the problem is how to avoid the onclick listener on the divider on the UI?? If click on the item the border also selected :( !! any solution for that?? – Acetophenetidin

Answer 2

In case you want just simple lines as borders, much, much simpler is setting a background color for a GridView and proper padding & spacing:

<GridView
    (...)
    android:background="@color/LightGold"
    android:listSelector="@android:color/transparent"
    android:horizontalSpacing="1dip"
    android:verticalSpacing="1dip"
    android:paddingLeft="1dip"
    android:paddingTop="1dip" />

Hilarity

Great idea, it will give you divider like effect and you can increase divider by increasing horizontal and vertical spacing. – Quintuplicate

This will only work if you later set the background of each cell individually. As a downside, it causes overdraw. – Ignescent

If you have two column, and have odd number of items, this adds solid background to the empty space – Alcott