How to set border of GridView on Android

Question

How to set border of GridView.
Such as Divider and DividerHeight of ListView.
Or how to display the border.

A divider is not a border for a ListView... Do you want to control the gray borders between every item in [this image](http://developer.android.com/images/ui/gridview.png) or a border only around the outside like a picture frame? — Sam, Aug 21 '12 at 01:44

score 44 · Accepted Answer · answered Aug 21 '12 at 02:36

44

Here are some examples of borders in a GridView.

GridView Borders

You can see where I defined the Red and Blue borders in my XML.

This is my main.xml Layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/red" >

    <GridView
        android:id="@+id/gridview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_margin="10dp"
        android:background="@color/blue"
        android:columnWidth="90dp"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dp"
         />

</RelativeLayout>

The thickness of the Red border is controlled GridView's layout_margin attribute and the Blue borders are controlled by horizontalSpacing and verticalSpacing.

To make the black cell backgrounds I used this layout and saved it as list_item.xml:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/black"
    android:gravity="center_vertical"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:paddingLeft="6dip"
    android:textAppearance="?android:attr/textAppearanceLarge" />

My Activity:

public class Example extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        String[] array = new String[] {"one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"};
        List<String> list = new ArrayList<String>(Arrays.asList(array));
        GridView grid = (GridView) findViewById(R.id.gridview);
        grid.setAdapter(new ArrayAdapter<String>(this, R.layout.list_item, list));
    }
}

answered Aug 21 '12 at 02:36

Sam

86,580
20
181
179

This places a margin around the GridView. Is there a way to add padding to the GridView so that the scrollable area still fills the entire screen as opposed to having a 10dp margin around the GridView? – mdupls Feb 05 '13 at 20:19
Do you want to remove the red margin from the image? – Sam Feb 05 '13 at 21:21
No. Ideally I want to have a specified padding around the content of the GridView rather than have a margin around the GridView. Understand the difference, I can explain further if necessary? :) – mdupls Feb 05 '13 at 21:26
In other words, with your example, if you scroll the GridView vertically, the items do not appear on top of the red border. They are clipped at the margins of the GridView (which is the blue area). – mdupls Feb 05 '13 at 21:29
That sounds to me like you don't want the red margin in my image, instead you want blue padding where the red is now. Simply change `layout_margin` to `layout_padding` in the GridView. – Sam Feb 05 '13 at 21:33
1

Using `android:padding` gives basically the same result as `android:layout_margin` – mdupls Feb 05 '13 at 22:11
Perhaps you only want the padding (or margin) on the left and right but not the top or bottom. In this case replace `padding` with `paddingLeft` and `paddingRight`. If this isn't the answer you want please write a new question with more detail (an image might help) then post the link in the comments here. – Sam Feb 05 '13 at 22:31
If you put the padding on the GridView and add `android:clipToPadding="false"` to the GridView, it will add padding around it that does not stay when the view is scrolled – Cameron Ketcham Oct 31 '13 at 19:46
I tried this and it works but when I try to use a selector to change the colors of the pressed cell it doesn't work... Is the only solution to create a custom adapter? – Bernardo Nov 24 '14 at 16:19

score 13 · Answer 2 · answered Sep 27 '14 at 06:39

use below xml file as background in grid item xml file.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <corners
        android:bottomRightRadius="12dp"
        android:bottomLeftRadius="12dp"
        android:topLeftRadius="12dp"
        android:topRightRadius="12dp" />
    <stroke
        android:color="@android:color/white"
        android:width="1dp" />
</shape>

score 6 · Answer 3 · answered Mar 10 '17 at 11:45

Create grid_row_border.xml in the res/drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <corners
        android:bottomRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />
    <stroke
        android:color="@color/material_grey_600"
        android:width="1dp" />
</shape>

Now use this in you grid layout xml as below

android:background="@drawable/grid_row_border"

Provide padding [android:padding="5dp"] and margin [android:layout_margin="5dp"] to look better.

score 0 · Answer 4 · answered Jun 10 '13 at 19:56

I add these views around my gallery image in the image row xml:

<View
    android:layout_width="@dimen/listGalleryItemWidthLarge"
    android:layout_height="2dip"
    android:layout_above="@+id/gallery_row_iv"
    android:layout_centerHorizontal="true"
    android:background="#FFFFFF" />

<View
    android:layout_width="@dimen/listGalleryItemWidthLarge"
    android:layout_height="2dip"
    android:layout_below="@+id/gallery_row_iv"
    android:layout_centerHorizontal="true"
    android:background="#FFFFFF" />

<View
    android:layout_width="2dip"
    android:layout_height="@dimen/listGalleryItemHeightLarge"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@+id/gallery_row_iv"
    android:background="#FFFFFF" />

<View
    android:layout_width="2dip"
    android:layout_height="@dimen/listGalleryItemHeightLarge"
    android:layout_centerVertical="true"
    android:layout_toLeftOf="@+id/gallery_row_iv"
    android:background="#FFFFFF" />

Note that I'm using a custom layout and adapter for my GridView

1

Styles are your friend :) – greg7gkb Nov 14 '13 at 21:37

How to set border of GridView on Android

4 Answers4

Linked