Center the content of a GridView

Question

My GridView itself is centered but the the content of it is not centered within it. Here is a screen, where the light blue on the bottom and right is the background color I set of the GridView.

enter image description here

You can see that the content is pushed up to the top and to the left. I would like the content, my game board, centered exactly in the middle of the GridView, with the light blue background color surrounding all sides equally.

Here is my XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/textFieldFU"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<GridView
    android:id="@+id/gridview"
    android:layout_marginTop="0dp"
    android:layout_marginLeft="45dp"
    android:layout_marginRight="45dp"
    android:layout_width="fill_parent"
    android:layout_height="485dp"
    android:gravity="center"
    android:horizontalSpacing="0dp"
    android:numColumns="8"
    android:background="@android:color/holo_blue_bright"
    android:verticalSpacing="0dp" />

And my getView in my ImageAdapter class if it helps:

    @Override
public View getView(int position, View convertView, ViewGroup parent) {
    ImageView iv;
    if (convertView != null) {
        iv = (ImageView) convertView;
    } else {
        iv = new ImageView(context);
        iv.setLayoutParams(new GridView.LayoutParams(60, 60));
        iv.setScaleType(ScaleType.FIT_CENTER);
        iv.setPadding(0, 0, 0, 0);
        if(position < 8 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 7 && position < 16 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 15 && position < 24 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 23 && position < 32 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 31 && position < 40 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 39 && position < 48 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 47 && position < 56 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 55 && position < 64 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else
            iv.setBackgroundColor(Color.GRAY);
    }
    iv.setImageResource(images[position]);
    return iv;
}

possible duplicate of [Easy way to make an ImageView that is underneath a GridView match the GridView's size exactly?](http://stackoverflow.com/questions/16339242/easy-way-to-make-an-imageview-that-is-underneath-a-gridview-match-the-gridviews) — Raghunandan, May 02 '13 at 16:36

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

Try one of these options for creating a border around a view. I would avoid any arbitrary fixed values like the 45dp margins and 485dp height, as it will certainly not look right on other screen sizes.

Also, I would suggest you use GridLayout instead of GridView. Technically, it requires API level 14 but you can use the one in the support library to support older versions of Android. It won't be a trivial change, because you need to add the tiles by calling addView instead of overriding the getView method.

GridLayout is much more appropriate for drawing grids that have a fixed number of tiles that are always displayed. GridView is a much more complex widget that has a lot of internal logic for loading tiles lazily, which you certainly don't need here. It may make layouts easier as well.

edited May 23 '17 at 11:57

Community

1
1

answered May 02 '13 at 17:03

oakes

743
5
12

OK, I used the 45dp because I couldn't make the padding android was adding between my columns go away, except by setting android:horizontalSpacing to a large negative number, which seems equally as bad a practice. I forgot to remove the height 485dp after fiddling with it. – ChrisWilson4 May 02 '13 at 17:10
I have to go to work now, but I'll try those options or take you up on your GridLayout suggestion, even though I'm lazy. Get back with the answer check afterwards. – ChrisWilson4 May 02 '13 at 17:12
Yeah I understand it's a decent amount of work to move it to `GridLayout`, but I found it much more intuitive to use. In the XML, you just specify `android:columnCount`. You can then add the `ImageView` tiles directly in the XML as children to the `GridLayout`, or add them in your code by calling something like `gridView.addView(iv, 60, 60);`. Again, you need to use the support library if you want it to work on pre-ICS devices. – oakes May 02 '13 at 17:20

score 0 · Answer 2 · answered May 02 '13 at 16:37

0

add this line in grid view description:

android:layout_centerInParent="true"

answered May 02 '13 at 16:37

m.ghoreshi

782
5
12

I had tried that earlier, it just centers the entire GV in the middle of the screen. The background color still only appears on the right and bottom though, still not centering the contents? – ChrisWilson4 May 02 '13 at 16:44
Maybe I should put the GridView inside something else, and apply a bg color to that? Would you know how to put the gridView inside some other container? – ChrisWilson4 May 02 '13 at 16:44

Center the content of a GridView

2 Answers2