Add space to top and bottom of GridView

Question

I would like to add space to the top and bottom of GridView, similar to header/footer but I only wanted to support spaces and nothing else.

Currently I am using top/bottom padding, but when scrolled the content will be cropped in the padding part.

What's the simplest solution for this? Thanks!

Put your `gridview` in a `Relative layout` that's matches parent's `width` and `height`, then give `top` and `bottom margin` — Bills, May 17 '14 at 08:18
But when you scroll the items INSIDE the gridview, they can't scroll into the top/bottom margin, right? I wanted to have space inside the gridview. Or am I missing something? — Lim Thye Chean, May 17 '14 at 08:48

score 130 · Answer 1 · edited May 23 '17 at 12:10

130

If I understand you right, it should look like this:

For that an easy solution is mentioned here by Maciej: How to add extra space inside at the bottom of a GridView

You just need to add the following in your GridView Layout:

<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="50dp"
android:paddingBottom="50dp"
android:clipToPadding="false"/>

The most important part is the clipToPadding attribute which has to be set to false.

You can also see the according blog post from Google, where this solution is mentioned: https://plus.google.com/+AndroidDevelopers/posts/LpAA7q4jw9M

edited May 23 '17 at 12:10

Community

1
1

answered Sep 12 '14 at 07:08

Elementary

2,153
2
24
35

4

That illustration is outstanding. – Tom Kidd Feb 11 '15 at 04:34
Thanks a lot, that really helped. – NaseemH Jul 11 '15 at 19:24
I spent my life adding headers and footers to all scrollable views. And then you came along. Take a bow. – VipulKumar Jun 06 '16 at 21:51
Thank you in 2019! – Mitulát báti Feb 15 '19 at 23:12
I create my `GridView` programmatically and this helped me to add padding. Thanks a lot! – Mahm00d Mar 09 '23 at 16:27

Phantômaxx · Accepted Answer · 2014-05-18T09:18:08.110

Instead of using paddings (which add space inside your View), use margins (which add space ouside your View):

add

android:layout_marginTop="40dp"
android:layout_marginBottom="40dp"

to your GridView (or some different value)

[EDIT]

As per the OP's clarification: the "spaces" must be FIXED and all the GridView scrollable.
Therefore I'm designing it like this (by setting a pair of anchored TextViews to act as fixed header and footer):

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    android:padding="8dp"
    >
    <!-- Header -->
    <TextView
        android:id="@+id/txtHeader"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentTop="true"
        android:background="#ff00"
        android:gravity="center"
        android:text="Header"
        android:textColor="@android:color/white"
        android:textSize="24sp"
        android:textStyle="bold"
    />
    <!-- Footer -->
    <TextView
        android:id="@+id/txtFooter"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:background="#ff00"
        android:gravity="center"
        android:text="Footer"
        android:textColor="@android:color/white"
        android:textSize="24sp"
        android:textStyle="bold"
    />
    <!-- The Grid -->
<!--    <GridView -->
<!--        android:id="@+id/grdIcons" -->
<!--        android:layout_width="match_parent" -->
<!--        android:layout_height="match_parent" -->
<!--        android:layout_above="@id/txtFooter" -->
<!--        android:layout_below="@id/txtHeader" -->
<!--        android:background="#f0f0" -->
<!--        android:textColor="@android:color/white" -->
<!--        android:textSize="24sp" -->
<!--        android:textStyle="bold" -->
<!--    /> -->
    <GridView
        android:id="@+id/grdIcons"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/txtFooter"
        android:layout_below="@id/txtHeader"
        android:background="#f00f"
        android:textColor="@android:color/white"
        android:textSize="24sp"
        android:textStyle="bold"

        android:columnWidth="64dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="8dp"
        android:horizontalSpacing="8dp"
        android:stretchMode="none"
        android:gravity="center"
    />

</RelativeLayout>

In this example, the headers are visible (red and with a text), but you can always cut off the part relative to the text attributes and set the color to #0000 (transparent)

Here's the result:

enter image description here

Thanks, but my GridView is generated by new GridView(getActivity()), how do I do this in app? — Lim Thye Chean, May 17 '14 at 08:45
You are adding **paddings**. Add **margins** instead. I suppose you are using a LayoutParams for that and then apply the LayoutParams to your GridView. — Phantômaxx, May 17 '14 at 08:47
The result looks the same - the icons still cannot scroll into the margin area. I am looking for spaces above and below ALL the icons in GridView (so initially there will be spaces above the first row of icons then when scroll up the area will be occupied by icons), the result right now is there will ALWAYS be spaces above the icons. — Lim Thye Chean, May 18 '14 at 07:11
OK, so you can add a custom header and footer rows as TextViews just before and after the GridView. Better if the container is a RelativeLayout - I'll update my answer with such a design. — Phantômaxx, May 18 '14 at 08:02
@VipulKumar My solution works perfectly. What's wrong with that? That I didn't use an animated GIF? — Phantômaxx, Jun 06 '16 at 21:57
@BobMalooga This is a workaround. Whereas the perfect 1 line solution is provided by android framework specifically for the same job. It's same as tinting and painting a textView rather than using textColor attribute. — VipulKumar, Jun 07 '16 at 04:50

Add space to top and bottom of GridView

2 Answers2