26

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.

Eric Chen
  • 3,562
  • 7
  • 39
  • 58
  • http://stackoverflow.com/a/12047760/375093 This answer seemed to be easier and clever than the answer below – Sundeep Jun 10 '13 at 14:26
  • @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. – W.K.S Jun 25 '13 at 13:49
  • @Sundeep It will slow the draw process. – twlkyao Nov 17 '17 at 09:22

2 Answers2

35

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" />
Fenix Voltres
  • 3,448
  • 1
  • 29
  • 36
  • Great idea, it will give you divider like effect and you can increase divider by increasing horizontal and vertical spacing. – Abdullah Oct 11 '13 at 14:04
  • 2
    This will only work if you later set the background of each cell individually. As a downside, it causes overdraw. – Maragues Nov 19 '14 at 11:26
  • 4
    If you have two column, and have odd number of items, this adds solid background to the empty space – osrl Feb 28 '15 at 16:05
28

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.

Chase
  • 11,161
  • 8
  • 42
  • 39
  • Nice. What are your list_divider and list_select defined as? – LuxuryMode Sep 25 '12 at 18:30
  • 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?? – LOG_TAG Mar 23 '13 at 07:22