Adding a header and a footer to a gridview in Android

Question

I am trying to create users' profile pages in my Android app with the following features: - header - gridview showing a bunch of photos from that user - footer (a downloading icon when the app is downloading more photos in the gridview) - the header needs to move together with the gridview

In other words, the user experience on the profile page would be very similar to the user experience in an Instagram user profile page.

The issue is that gridview does not support headers and footers.

Any solutions, or libraries I could use to deliver the desired user experience?

Answer 1

Just use multiple RelativeLayouts.

Create your header layout (50dp or whatever) aligned to parent top. Then create a second layout aligned to the bottom of the page (this will be your footer). Then have another layout set to "below" the header and "above" the footer which will contain your GridView.

It should look like:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentTop="true" >

        /* ANYTHING YOU WANT IN YOUR HEADER */

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/header"
        android:layout_above="@+id/footer" >

        /* GRIDVIEW HERE */

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true" >

        /* ANYTHING YOU WANT IN YOUR FOOTER */

    </RelativeLayout>

</RelativeLayout>

Hopefully this helps.