Can a GridView have a footer and header just like ListView?

Question

A quick question:

In ListView I use this code:

list.addHeaderView(headerView);

How to deal with it when working on gridview?

Thanks.

Answer 1

There is no support for header or footer views with GridView, sorry.

Answer 2

There is a quite good implementation of GridView with header support in Google Photos application, as it's OSS code you can use it as is or take it as a reference for your own implementation: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android-apps/4.3_r2.1/com/android/photos/views/HeaderGridView.java

Basic idea is quite simple - WrapperAdapter creates an fake row by increasing number of items by number of columns and then return a header view for the item.

Answer 3

You can use this. The footer appears/hides at the bottom of the grid when you reach/leave the last number of items. It does not actually scroll, but I hardly notice the difference.

In your activity/fragment's onCreate/onCreateView you add an OnScrollListener to the GridView:

    ....
    GridView gridview = (YMAnimatedGridview) v.findViewById(R.id.my_gridview);
    gridview.setAdapter(adapter);
    final View footerView = mainView
            .findViewById(R.id.my_grid_footer_view);
    gridview.setOnScrollListener(new GridView.OnScrollListener() {

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem,
                int visibleItemCount, int totalItemCount) {

                if (firstVisibleItem + visibleItemCount == totalItemCount) {

                    // last item in grid is on the screen, show footer:
                    footerView.setVisibility(View.VISIBLE);

                } else if (footerView.getVisibility() != View.GONE) {

                    // last item in grid not on the screen, hide footer:
                    footerView.setVisibility(View.GONE);
                }
            }

        @Override
        public void onScrollStateChanged(AbsListView view,
                int scrollState) {
        }
    });

Your layout should look something like the below. Notice the layout_weight (and layout_height) parameter in the gridview, it is needed to make the correct space for the footer when it becomes visible.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <GridView
        android:id="@+id/my_gridview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:columnWidth="160dp"
        android:gravity="center_horizontal"
        android:horizontalSpacing="12dp"
        android:numColumns="auto_fit"
        android:layout_weight="1"
        android:stretchMode="columnWidth"
        android:verticalSpacing="6dp" />

    <TextView
        android:id="@+id/my_grid_footer_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_marginBottom="8dp"
        android:orientation="horizontal"
        android:visibility="gone"
        android:text="footer text here" >
    </TextView>
</LinearLayout>

Answer 4

Sample code:

GridViewWithHeaderAndFooter gridView = (GridViewWithHeaderAndFooter) v.findViewById(R.id.ly_image_list_grid);

LayoutInflater layoutInflater = LayoutInflater.from(this);
View headerView = layoutInflater.inflate(R.layout.test_header_view, null);
View footerView = layoutInflater.inflate(R.layout.test_footer_view, null);
gridView.addHeaderView(headerView);
gridView.addFooterView(footerView);

Gradle build: .

compile 'in.srain.cube:grid-view-with-header-footer:1.0.12'

Answer 5

You'd have to use a ListView, then make each row of the list look like it's actually a row of a grid. So if you have a 3 column grid, you'd make a layout for the ListView that looks like 3 columns. You'd then have to modify certain aspects of the Adapter to make it work so that each ListView row actually represents 3 lines of data -- so you know, getCount()/3 type stuff.

Answer 6

How about checking for the "0" index element in your adapter? You can inflate the custom view for the first one.

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View view = convertView;
            if(view==null){
                 if(position==0){
                      //  ...inflate header view
                 }else{
                      //  ...do as usual

Haven't tested it, but should work.

Answer 7

You can use AsymmetricGridView and specify headers/footers with a bigger rowSpan so they would take the entire row.

Answer 8

You could use this library, http://tonicartos.github.io/StickyGridHeaders/

which allows you to create headers that are sticky (for grouping the list and keeping the header visible for the current group). You can turn off the sticky feature as well.

Answer 9

There is a way to accomplish the desired functionality WITHOUT using a library or anything.

EDIT: Just borrow the HeaderGridView Implementation by google, see Here
You could also customize it for footer. The below suggestion is just too complicated and required more tweaking. Without going into specific details, all you need to do is this.

1) Subclass GridView
2) override onScrollChanged
3) Calculate the offset everytime it scrolls
4) Set the parentView(view that contains the headerView and gridview) translation y to -Offset.(view.setTranslationY(-offset). Also have an if statement to that once it reaches a certain offset it would stop scrolling.
5) obviously you want to structure this well so your gridview can have a method like attachToGridview(View view). I have a complete implementation of this which works.
See Scroll offset of GridView for help on getting offset since GridView has a bug were the views get recycled.

Answer 10

Why don't you change the appearance of the cells for the first rows? if you know how many columns you have, you know how many items will appear in the header = number of columns.It works for me

Answer 11

<?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="vertical">

    <com.test.Breadcrumbs android:layout_width="fill_parent" android:layout_height="100dp" />

    <GridView
            android:id="@+id/grid"
            android:numColumns="auto_fit"
            android:gravity="center"
            android:stretchMode="columnWidth"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp">
    </GridView>

</LinearLayout>

and Breadcrumbs:

public class Breadcrumbs extends LinearLayout {

    public Breadcrumbs(final Context context, final AttributeSet attrs) {
        super(context, attrs);

        final LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        layoutView = inflater.inflate(R.layout.breadcrumbs, this, true);

works fine, scroll for grid works as well.