Search code examples
androidgridviewborderdivider

Android GridView draw dividers


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.


Solution

  • 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.