1

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 BEFORE

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

AFTER

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

enter image description here

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>
Community
  • 1
  • 1
Jade Byfield
  • 4,668
  • 5
  • 30
  • 41
  • 1
    did you try to center image and text in each grid ? – fgeorgiew Dec 09 '12 at 19:11
  • OMG! I can't believe I overlooked that. I was so focused on centering the gridview itself I didn't realize that I had a separate layout for each row. THANK YOU! I also had to remove the padding attributes. I'll edit my original post to include my edited xml files, go ahead and submit an answer so I can accept it! – Jade Byfield Dec 09 '12 at 19:25
  • Nice work.. it worked for me :) – Ganesh Jun 21 '13 at 11:37

1 Answers1

0

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

fgeorgiew
  • 1,194
  • 2
  • 8
  • 25