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

问题:

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.

回答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

回答2:

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

回答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>

回答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"

回答5:

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