Android GridLayout center horizontally

52,510

Solution 1

Make the grid wrap around its content horizontally with layout_width="wrap_content" and set it's layout_gravity to center:

<GridLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    // ......
    >

Solution 2

From GridLayout documentation:

GridLayout's distribution of excess space is based on priority rather than weight.

(...)

To make a column stretch, make sure all of the components inside it define a gravity.

So apparently you need to set the layout_gravity to android:layout_gravity="top|center" (I have not tested this, but from the documentation it should be along these lines.)

Solution 3

You're almost there. I think this will do the job:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<GridLayout

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    custom:rowCount="4"
    custom:columnCount="2"

    android:layout_gravity="center_horizontal"
    android:orientation="horizontal">
    <TimeTableKeeper.Tile
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:background="#00FF00"
        custom:color="green"
        custom:layout_row="0"
        custom:layout_column="0" />
    <TimeTableKeeper.Tile
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:background="#00FF00"
        custom:color="blue"
        custom:layout_row="0"
        custom:layout_column="1" />
</GridLayout>
</FrameLayout>

52,510

Tomasz

BY DAY: C# developer in Oxford Computer Consultants BY NIGHT: Personal projects based on C#/WPF/JavaScript technolgoies

Updated on December 02, 2020

Comments

Tomasz over 3 years

I'm trying to create a GridLayout with 2 columns which will be centered.

My avtual design is:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    custom:rowCount="4"
    custom:columnCount="2"
    android:orientation="horizontal">
    <TimeTableKeeper.Tile
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:gravity="top|left"
        android:background="#00FF00"
        custom:color="green"
        custom:layout_row="0"
        custom:layout_column="0" />
    <TimeTableKeeper.Tile
        android:layout_width="75dp"
        android:gravity="top|left"
        android:layout_height="75dp"
        android:background="#00FF00"
        custom:color="blue"
        custom:layout_row="0"
        custom:layout_column="1" />
</GridLayout>

And it looks like:

And I would like to have this buttons in the center and perfectly with spacing between them.

Is it possible?

--EDIT:

I have also tried putting it into LinearLayout, without results:

<?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:gravity="center"
    android:orientation="vertical">
    <GridLayout xmlns:custom="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        custom:rowCount="4"
        custom:columnCount="2"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_gravity="center">
        <TimeTableKeeper.Tile
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:background="#00FF00"
            custom:color="green"
            custom:layout_row="0"
            custom:layout_column="0" />
        <TimeTableKeeper.Tile
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:background="#00FF00"
            custom:color="blue"
            custom:layout_row="0"
            custom:layout_column="1" />
    </GridLayout>
</LinearLayout>

luiscosta almost 10 years

Why don't you use the GridLayout inside a LinearLayout with the property android:gravity="center"?!
Tomasz almost 10 years

Tried, without results. Details in post edit
luiscosta almost 10 years

Of course it won't change because you have to use the property android:layout_width="wrap_content" in your GridLayout.
Tomasz almost 10 years

Thanks! What about spacing between items?
luiscosta almost 10 years

See this: stackoverflow.com/questions/10016343/…

IgorGanapolsky over 8 years

No, that doesn't make it centered horizontally.
IgorGanapolsky over 8 years

Yes, FrameLayout works much better than LinearLayout in this case.
Alen Siljak almost 8 years

This will center the cells within the grid's surface. Something like: |__CCCC__|
Naveen Niraula almost 6 years

This should be accepted answer. As it works perfectly fine
Mahbubur Rahman Khan almost 5 years

this solution perfect for me