Center GridView horizontally

Question

I have a GridView with 4 items that are added dynamically. I can center them vertically but can not horizontally. Tried everything...

Main.xml

...
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_gravity="center" >

        <GridView
        android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnWidth="90dp"
        android:numColumns="auto_fit"
        android:padding="10dp"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:stretchMode="spacingWidthUniform"
        android:gravity="center"
        android:listSelector="@drawable/card_button" >

        </GridView>

    </LinearLayout>
...

Items.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/btn"
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:orientation="vertical"
    android:gravity="center" >

            <ImageButton
                android:id="@+id/menuItem_img"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/light"
                android:contentDescription="@string/item"
                android:background="#00000000"
                android:tint="#222222"
                android:paddingTop="8dp"
                android:paddingBottom="4dp" />

            <TextView
                android:id="@+id/menuItem_txt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#222222"
                android:paddingBottom="8dp"
                android:text="@string/item"
                android:textSize="18sp"
                android:singleLine="true" />

</LinearLayout>

I don't want to have fixed number of columns so android:numColumns="auto_fit" must stay.

score 2 · Accepted Answer · edited May 23 '17 at 12:27

I find out that it's not possible to center GridView horizontally with .xml
So I had to do it programmatically... This answer helped me a lot: https://stackoverflow.com/questions/6141910/android-center-gridview-horizontally

I had to make some changes to make it work:

GridView Adapter.java:

  public Adapter(Context context, int width, int height, float density, GridView grid) {
        this.context = context;
        width_ = width; //get metrics.widthPixels from MainActivtiy.java
        height_ = height; //get metrics.heightPixels from MainActivtiy.java
        density_ = density; //get metrics.scaledDensity from MainActivtiy.java
        grid_ = grid; //get GridView

        Rect p = new Rect();
        grid_.getSelector().getPadding(p);
        int selectorPadding = p.left + p.right;
        int mSizePx = (int) Math.floor(90 * density_); //90 is my column width
        int mSpacingPx = (int) Math.floor(10 * density_); //10 is space between columns
        int numColumns = (int) Math.floor(1f * (width_ - selectorPadding + mSpacingPx) / (mSizePx + mSpacingPx));

        // CHANGES
        int numbOfCol = menuValues.length; //menuValues (Array[]) are items you are adding to GridView
        int contentWidth = 0;
        //the most important part
        if (numColumns > numbOfCol) {
            contentWidth = numbOfCol * mSizePx;
            contentWidth += (numbOfCol - 1) * mSpacingPx;
            contentWidth += selectorPadding;
        } else {
            contentWidth = numColumns * mSizePx;
            contentWidth += (numColumns - 1) * mSpacingPx;
            contentWidth += selectorPadding;
        }           
        int slack = width_ - contentWidth;
        //
        grid_.setNumColumns(numColumns); //set calculated number of collumns
        grid_.setColumnWidth(mSizePx); //90
        grid_.setVerticalSpacing(mSpacingPx); //10
        grid_.setHorizontalSpacing(mSpacingPx); //10

        //changed
        grid_.setPadding(slack / 2, mSpacingPx, slack / 2, mSpacingPx); //I set top and bottom padding to 10dp (mSpacingPx)

    }

Main.xml (changed):

...
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_gravity="center" >

        <GridView
        android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchMode="none"
        android:gravity="center"
        android:listSelector="@drawable/card_button"
        android:drawSelectorOnTop="true" >

        </GridView>

    </LinearLayout>
...

How to achieve dynamic layout showing in this SO Question> http://stackoverflow.com/questions/19156385/how-to-cenralize-last-uneven-row-in-gridview-in-android — YuDroid, Jun 06 '14 at 12:35

Center GridView horizontally

1 Answers1