Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android GridView draw dividers

Tags:

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.

like image 399
Eric Chen Avatar asked Aug 20 '11 13:08

Eric Chen


2 Answers

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" /> 
like image 160
Fenix Voltres Avatar answered Sep 17 '22 21:09

Fenix Voltres


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.

like image 38
Chase Avatar answered Sep 17 '22 21:09

Chase