How to make a GridlView display the center of it on the screen?

Question

I have a GridView like this(main.xml):

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnWidth="100dp"
    android:gravity="center"
    android:numColumns="2"
    android:stretchMode="columnWidth"
    android:background="@color/black"
    android:horizontalSpacing="5dp"
    android:verticalSpacing="5dp" >

</GridView>

and the GridView item like this(grid.xml):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridItemLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:gravity="center"
    android:background="@color/white" >

    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginRight="10dp"
        android:src="@drawable/person" >
    </ImageView>

    <TextView
        android:id="@+id/grid_item_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/grid_item_image"
        android:text="@+id/label"
        android:layout_alignLeft="@id/grid_item_image"
        android:layout_alignRight="@id/grid_item_image"
        android:layout_marginTop="5dp"
        android:textSize="15dp"
        android:gravity="center"
        android:textColor="@color/black" >
    </TextView>

</RelativeLayout>

As I have only 2 rows of items in the GridView, I want the two rows to fill the screen exactly, not leaving any empty space or not going beyond the screen height, which needs a scroll to see fully. To do this I have done this(GridViewActivity.java):

DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);

width = metrics.widthPixels;
height = metrics.heightPixels;

and in my adapter(ImageAdapter.java):

gridView = new View(context);

gridView = inflater.inflate(R.layout.grid, null);
gridView.setMinimumHeight(GridViewActivity.height/2);
gridView.setMinimumWidth(GridViewActivity.width/2);

This doesn't give what I want:

enter image description here

you can see the 2nd row is not completely visible

enter image description here

Can anyone help me how to make these 2 rows fit exactly in the screen, or how to make the GridView display its center when the activity is called , just like this:

enter image description here

in the main.xml?? yeah....which gives me exactly the same result as b3fore — Archie.bpgc, Jun 16 '12 at 04:04

user · Accepted Answer · 2012-06-16T08:48:11.317

First of all, if your GridView only has 2 rows and 2 columns and you don't plan to add more items, why don't you use instead a simple RelativeLayout(and a FrameLayout for each cell) to place those items in a grid like you want(or you could use a TableLayout with 2 rows)? It would be much easier to properly position them and the performance will be the same.

If you still want to use the GridView then you would have to find the dimensions of the screen(like you already did) substract from that the space between the rows, the title bar height and the notification bar height and then divide this to your 2 rows. Then you would use this size that you previously calculated to set it as the height for the LayoutParams of the inflated item layout in the getView method of your adapter(don't forget the width).

My advice would be to use another layout then the GridView. Example below(you could use an include to make it smaller)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <View
        android:id="@+id/anchor"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerInParent="true" />

    <RelativeLayout
        android:id="@+id/griditem1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/anchor"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_margin="3dp"
        android:layout_toLeftOf="@id/anchor"
        android:background="#ffffff"
        android:gravity="center"
        android:padding="5dp" >

        <ImageView
            android:id="@+id/grid_item_image1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginRight="10dp"
            android:src="@drawable/shop_open" >
        </ImageView>

        <TextView
            android:id="@+id/grid_item_label1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/grid_item_image"
            android:layout_alignRight="@id/grid_item_image"
            android:layout_below="@id/grid_item_image"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:text="@+id/label"
            android:textColor="#000000"
            android:textSize="15dp" >
        </TextView>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/griditem2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/anchor"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_margin="3dp"
        android:layout_toRightOf="@id/anchor"
        android:background="#ffffff"
        android:gravity="center"
        android:padding="5dp" >

        <ImageView
            android:id="@+id/grid_item_image2"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginRight="10dp"
            android:src="@drawable/shop_open" >
        </ImageView>

        <TextView
            android:id="@+id/grid_item_label2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/grid_item_image"
            android:layout_alignRight="@id/grid_item_image"
            android:layout_below="@id/grid_item_image"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:text="@+id/label"
            android:textColor="#000000"
            android:textSize="15dp" >
        </TextView>
    </RelativeLayout>

      <RelativeLayout
        android:id="@+id/griditem3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/anchor"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="3dp"
        android:layout_toLeftOf="@id/anchor"
        android:background="#ffffff"
        android:gravity="center"
        android:padding="5dp" >

        <ImageView
            android:id="@+id/grid_item_image3"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginRight="10dp"
            android:src="@drawable/shop_open" >
        </ImageView>

        <TextView
            android:id="@+id/grid_item_label3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/grid_item_image"
            android:layout_alignRight="@id/grid_item_image"
            android:layout_below="@id/grid_item_image"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:text="@+id/label"
            android:textColor="#000000"
            android:textSize="15dp" >
        </TextView>
    </RelativeLayout>


      <RelativeLayout
        android:id="@+id/griditem4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/anchor"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="3dp"
        android:layout_toRightOf="@id/anchor"
        android:background="#ffffff"
        android:gravity="center"
        android:padding="5dp" >

        <ImageView
            android:id="@+id/grid_item_image4"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginRight="10dp"
            android:src="@drawable/shop_open" >
        </ImageView>

        <TextView
            android:id="@+id/grid_item_label4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/grid_item_image"
            android:layout_alignRight="@id/grid_item_image"
            android:layout_below="@id/grid_item_image"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:text="@+id/label"
            android:textColor="#000000"
            android:textSize="15dp" >
        </TextView>
    </RelativeLayout>
</RelativeLayout>

so you mean GridView is for dynamically increasing layouts??....moreover can you please what or how to get these space, tittle bar height, notification bar height, Thank You — Archie.bpgc, Jun 16 '12 at 08:28
@Archie.bpgc You would want to use a `GridView` when you have more items that fit the screen so you can take advantage of the `GridView` recycling and make an app with a better performance. That is not your case because all the items of your `GridView` are visible on the screen. I haven't played with getting the title bar height but at a quick search: http://stackoverflow.com/questions/3600713/size-of-android-notification-bar-and-title-bar . I've edited my answer with an example that uses a `RelativeLayout` instead of your `GridView`. — user, Jun 16 '12 at 08:51

How to make a GridlView display the center of it on the screen?

1 Answers1