How to add extra space inside at the bottom of a GridView

Question

I need help to add a space inside a GridView at the bottom of it. This Space should be below the last Element of the GridView, inside of it. This space shouldn't work like a margin to the next element, it should be only visible, when the user scrolles to the bottom of the GridView. The reason for this is an ad banner which partly covers the bottom of the GridView. Besides this obstruction, the user should still be able to see the whole content of the GridView, that's why the space at the bottom of the GridView is needed.

left: ad (blue) covers part of GridView elements (orange); right: ad covers the space in the bottom of the GridView

Example, how it will look like, just imagine that the space is at the bottom, not at the top.

So far I tried to work with the Padding and Marging Variables for Bottom, but they are not the right variables for the problem. I also searched through stackoverflow, I found some similar questions like: Add extra space to bottom of a GridView or ListView or: Adding a footer View to a multi-column GridView in Android?. But the solutions doesn't seem to fit my case and furthermore I am searching for a solution inside the layout file and not inside the source code (if there is any of course).

Your help is very much appreciated.

Douche

set bottomPadding of gridview – Centeno

or you can try inserting an empty view element at bottom – Lindberg

I need the space inside the GridView at the bottom, not below the GridView. That's why the two approaches above doesn't work for me. – Douche

Answer 1

To achieve that you want you need to add a bottom padding to your GridView but also disable clipToPadding behavior. Try the XML code below:

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

You can also do it from code if you want. The benefit is that you can compute the offset dynamically in code:

gridView.setPadding(int left, int top, int right, int bottom);
gridView.setClipToPadding(false);

Note: Without disabling the clipToPadding behavior you will end up with persistent empty area on the bottom of your GridView, so disabling it is very important.

---

Bonus: Here is also a nice link about using clipToPadding parameter in ListView or GridView: https://plus.google.com/+AndroidDevelopers/posts/LpAA7q4jw9M

Haldis

Thanks I didn't tried the clipToPadding before, I will give it a try. – Douche

Sadly, this doesn't works for me. There is still no extra space inside the GridView at the botton. The covering ad still obstructs content of the GridView after scrolling to the bottom of it. – Douche

This have to work... Please see the link posted in my edited answer. You must have done something wrong. I'm using it myself in lot of my apps. Maybe you need to just set bigger padding or you are overriding this somewhere (in code for example). – Pate

Thanks, I'm reading the blog post now, and will have a look if some code overwrites the setted behaviour. – Douche

According to the blog post the approach seems to be the right one, so I'm now searching through my code why it doesn't work. :) – Douche

I found my mistake, thanks for you solution, it absolutely works for me. :) – Douche

No problem:) BTW. Can you tell what was the mistake? It can be helpful to other people that maybe will have similar problem in future. – Pate

Nothing important, I implemented the changes on the wrong layout. I did my tests with the tablet layout but I did the implementation in the phone layout. ;) – Douche

I posted the essence of your answer together with credits to you on two older similar questions, because your answer fits best in my opinion to this problem. – Douche

Thanks bro, you saved my time for searching. – Resort

Answer 2

Make custom gridview and in getview() method, use view which make space like you want.

Suborn

I'm searching for an easier solution with the existing GridView, if possible. – Douche

Without custom gridview, it's not possible. You should at least do some effort :) – Suborn

Of course I did put and will put effort in it. And of course in the end you can always make a custom control. But why should I do that, as long as there is a possibility for an easier solution with the existing control? – Douche

:) Every pre-defined control have some specific behaviour only, even you can't expect everything from any predefined controls, that's why list or grid layout's provided a custom adapter. Use them instead of looking for easy way. Those are easy too. Hope you understand. – Suborn

Like I said, you can make everything custom, but many times this effort is more pain then gain, because often there exists an easier workaround you can use. The question is just some minutes old, why not giving it some more time to find out if other users might know an answer. ;) – Douche

I agree with you if don't have any deadline :) – Suborn

Hello Pankaj, the solution by Maciej works for me as it should. For this no changes in custom control or changes in code are needed, just two parameters in layout. :) – Douche

Answer 3

This is what I had so far:

In your Activity:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.grid);

        final TextView txt = (TextView) findViewById(R.id.textView1);
        txt.setVisibility(View.GONE);

        final GridView grid = (GridView) findViewById(R.id.gridViewCustom);


        grid.setOnScrollListener(new OnScrollListener() {

            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem,
                    int visibleItemCount, int totalItemCount) {
                if((firstVisibleItem + visibleItemCount) == totalItemCount){//it means you are at the end of the gridview
                    txt.setVisibility(View.VISIBLE);
                    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, 50);
                    params.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
                    params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
                    params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);

                    RelativeLayout.LayoutParams paramsGrid = (RelativeLayout.LayoutParams) grid.getLayoutParams();
                    paramsGrid.addRule(RelativeLayout.ABOVE, txt.getId());

                    txt.setLayoutParams(params);
                    grid.setLayoutParams(paramsGrid);

                }
            }
        });
    }

.xml

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

   <GridView
       android:id="@+id/gridViewCustom"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_above="@+id/textView1"
       android:layout_alignParentRight="true"
       android:layout_margin="4dp"
       android:columnWidth="80dp"
       android:gravity="center"
       android:numColumns="auto_fit"
       android:stretchMode="columnWidth" >
   </GridView>

   <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="50dp"
       android:layout_alignParentBottom="true"
       android:layout_alignParentLeft="true"
       android:layout_alignParentRight="true"
       android:text=""
       android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Ecotone

I see that this is a possible solution, but first I want to see if I can get the solution of @Maciej to work. – Douche

I took the solution from Maciej, because with that you just need to add two parameters in the layout of the Grid, that's it. No workaround and no extra source code needed. – Douche

Answer 4

To get the following result GridView with a space above the button

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

    <Button
        android:id="@+id/btn_submit"
        style="@style/Base.Widget.AppCompat.Button.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/gv_someGrid"
        android:layout_margin="10dp"
        android:layout_alignParentBottom="true"
        android:text="submit" />

    <GridView
        android:id="@+id/gv_someGrid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_above="@+id/btn_submit" />
</RelativeLayout>

The trick is to declare Gridview at bottom of that button then add constraint layout_above="@+id/your_id"

Prolegomenon

Answer 5

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

Marginate

This is not a valid solution... margin will move the GridView up, making persistent empty space below GridView. – Pate