How to center GridView correctly?

Question

I have been trying and trying and no such luck. I have lucked at all other answers on here as well related to centering GridView and also no luck. This is my GridView xml:

<GridView
        android:id="@+id/calendar_grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="7"
        android:columnWidth="40dp"
        android:verticalSpacing="1dp"
        android:horizontalSpacing="1dp"
        android:paddingTop="2dp"
        android:stretchMode="columnWidth"
        android:layout_gravity="right"
        android:gravity="right"
        android:background="#696969" ></GridView>

I have tried every combination I can think of, but not much has worked. At least its not consistent between devices. This is an image of what it always does.

As you can see on the right side of the GridView, there is spacing. I try to constantly change that, and it almost never works. Using android:stretchMode does change it, but it messes up the spacing I have between the cells, so thats not working. Using Gravity also fails as you can see. I've tried all the other values for it and it still changes nothing. It's stuck to the left. I also find it weird that trying to change the size of android:columnWidth from anything under 40 it does nothing either. And when I increase 40 to 45, it also changes nothing. But changing it to 50 makes the space on the right go away. But when putting it on my phone, the spacing is there! I skipped this like 2 weeks ago to continue working on other stuff but it looks like I have yet to solve this issue or even understand why nothing I try works.

If it helps anyone help me out here I can also provide the xml for what makes the cells. But I am not sure if it matters. But here it is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView 
        android:id="@+id/day_num"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="10dp"
        android:background="#000000"
        android:height="35dp"
        android:gravity="center_vertical|center_horizontal" />


</LinearLayout>

If it helps, the GridView's parent is a LinearLayout with this:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_weight="0"
    android:gravity="center" >

There is also a sibling with a weight of 1, but I don't think that should be effecting is as the weight of 0 makes that part set its space first.

EDIT:

So I have kept playing with it, very annoyed, especially since not that many people seem to have this issue, but it looks like no matter how small I make the columnWidth, the GridView barely gets any smaller. In fact, that same gap you see is what it stays at until I go to 50dp. But when I go in portrait mode the gap reappears, so I raise it up to 90dp (I tried under that, didn't change anything), and it goes away. Weird thing is the GridView doesn't change besides the filling of the gap. So I could make it 200dp, and it would look perfect on my screen dimen, and any other smaller screen. Once I go to a tablet, I suspect I would need to increase that more, but the point is, this is weird behavior. Has anyone encountered this?

Rafat

yeah ,andy i also found this issue in my code and this is weird that i found no solution yet ....so have u got success in this ?? – Xi

@Xi Seems like there is no solution. I of course went the route of stretching it out to the sides, which works fine. Basically place it in some View and manipulate that parent View to control its layout in your Viewgroup. – Rafat

Answer 1

You may want to put your GridView inside a RelativeLayout and then set GridView's layout_centerInParent property to true. something like this:

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

    <GridView
            android:id="@+id/calendar_grid"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:numColumns="7"
            android:columnWidth="40dp"
            android:verticalSpacing="1dp"
            android:horizontalSpacing="1dp"
            android:paddingTop="2dp"
            android:stretchMode="columnWidth"
            android:background="#696969"
            android:layout_centerInParent="true" />

</RelativeLayout>

RelativeLayout gives you much better control over positions of children.

Poland

Hmm, that does sound like a better option. One that I might take. Did you read my edit? Do you have any idea why its behavior is like that? I wish the Android docs were better -_- – Rafat

I have had a similar issue some time in the past. I think the problem was due to the fact that the remaining space on the right could not be divided equally across the columns (e.g. you have 7 columns and only 6 pixels remaining). With LinearLayout, you don't have much control over the position, as it always starts laying out children from top/left, so all the remaining space was at the right/bottom. – Poland

Ahh, that actually makes complete sense. I began to assume this as I increased the size of columnWidth. But wasn't sure. I guess in these cases either avoid it or use it like I am at this point. I could definitely be using TableLayout. Kind of regret it now. Anyways, thanks for your time. – Rafat

@Rafat sure, no problem. Using relative layout with centerInParent for the child should equally divide this remaining space on all sides of the child, effectively centering your GridView. – Poland

How does this work if the gridview has width and height set to match_parent? – Zeb

Didn't work for me, android:layout_centerInParent="true" has no effect, I have also tried with layout_centerHorizontal and layout_centerVertical with no effect, Grid is always aligned to left – Enliven

Answer 2

Here is my working configuration:

        <GridView
        android:id="@+id/gridView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:cacheColorHint="@color/white"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:numColumns="3"
        android:padding="5dp"
        android:scrollbars="none"
        android:stretchMode="columnWidth"
        android:gravity="center"
        />

Bobo

Answer 3

you need to set Gravity of Parent Layout of TextView or LayoutGravity of TextView, Plz change Cell Layout as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:gravity="center_vertical|center_horizontal" >
    <TextView 
        android:id="@+id/day_num"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="10dp"
        android:background="#000000"
        android:height="35dp"
        />


</LinearLayout>

Zanezaneski

If you dont mind my asking, why exactly is that necessary? Oh and it did not work. Doesn't move at all. – Rafat

Answer 4

I've encountered the same problem and RelativeLayout with centerInParent did not help either.

Basically, the division may contain a remainder that will be cut off according to the screen width.

so, the only way to center the GridView was to calculate a width that would fit with no remainder and use the remainder value as the padding.

WindowManager manager = window.getWindowManager();
int  screenWidth      = manager.getDefaultDisplay().getWidth();
int contentWidth      = screenWidth;

while( 0 != contentWidth%COLUMN_NUMBER ) contentWidth--;

columnWidth = contentWidth / COLUMN_NUMBER;
int padding = screenWidth - contentWidth;

then, when you create your GridView:

gridView.setColumnWidth(columnWidth);
gridView.setPadding(padding / 2, 0, padding / 2, 0);

Anaheim

Answer 5

There is more specific method to do this. You can define custom layout. And add TextView as the element. Then apply the properties what you want. To center make gravity = center like wise. Then apply that layout as the layout for your grid view.

Ex :
Sample layout name : myCellitemlayout.xml
<TextView>
      android:id="@+id/text_id"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center"
</TextView>

Now add this to your gridView adapter.
Ex: GridView

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                R.id.myCellitemlayout, numbers);

gridView.setAdapter(adapter);

Grotesquery

Answer 6

centerInParent didn't work for me either.

Change GridView's layout_height property to wrap_content like this:

<GridView
    android:id="@+id/calendar_grid"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:numColumns="7"
    android:columnWidth="40dp"
    android:verticalSpacing="1dp"
    android:horizontalSpacing="1dp"
    android:paddingTop="2dp"
    android:stretchMode="columnWidth"
    android:layout_gravity="right"
    android:gravity="right"
    android:background="#696969" ></GridView>

It doesn't much matter if you are using RelativeLayout or LinearLayout but you have to specify that gravity property to center like this:

<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"
android:gravity="center"
android:orientation="vertical">

It is working for me very well.

Sonneteer