Question

What’s up guys, just a quick question. I’m trying to get my GridView to be center inside it’s parent which is a RelativeLayout. I want the entire grid to be centered, not the items. From what I’m seeing, the default alignment is “left-aligned” and it’s difficult to change this behavior. I tried a few other solutions suggested in other SO questions found here as well as couple others. This seems like something trivial, and that it shouldn’t be such a headache. I tried wrapping the GridView inside a LinearLayout with horizontal orientation but to no avail.

The only semi workaround I’ve found was to mess around with the left and right padding, but even that approach leaves way too much empty space at the sides.

This image is before I changed the padding

This image is after I messed around with padding, but again..seems a bit hackish and not really what I’m looking for. I’m looking for flush center without the extra padding on the sides

Another reason why this approach is impractical is due to the extra space, the selector appears to be too large..as seen in the image below

Any help on this would great, thanks as always!

Code for the layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/weatherFragRoot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<GridView
    android:id="@+id/menuGridView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="@drawable/weathermate_lv_background"
    android:gravity="center_horizontal"
    android:listSelector="@drawable/list_selector"
    android:numColumns="3"
    android:paddingLeft="30dp"
    android:paddingRight="5dp"
    android:stretchMode="columnWidth"
    android:visibility="invisible" >
</GridView>

</RelativeLayout>

EDIT

As suggest by user, I centered each grid item row inside it’s own relative layout..and that gave me the result I was looking for! Here is the updated XML files to reflect the solution

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/weatherFragRoot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<GridView
    android:id="@+id/menuGridView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="@drawable/weathermate_lv_background"
    android:gravity="center_horizontal"
    android:listSelector="@drawable/list_selector"
    android:numColumns="3"
    android:stretchMode="columnWidth"
    android:visibility="invisible" >
</GridView>

</RelativeLayout>

This is the layout for the grid row. As you can see, what worked for me was setting the orientation to Horizontal and adding android:layout_centerHorizontal=”true” to each child.

 <?xml version="1.0" encoding="utf-8"?>

<ImageView
    android:id="@+id/menuItem"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_centerHorizontal="true"
    android:background="@android:drawable/ic_menu_add" >
</ImageView>

<TextView
    android:id="@+id/tvMenuItemName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/menuItem"
    android:layout_centerHorizontal="true"
    android:text="Option"
    android:textColor="@android:color/white" >
</TextView>

</RelativeLayout>

Answer 1

The answear is to center image and text views in each grids as they have separate layout 🙂