Android GridLayout center horizontally

Question

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>

Why don't you use the `GridLayout` inside a `LinearLayout` with the property `android:gravity="center"`?! — luiscosta, Jul 24 '14 at 08:27
Of course it won't change because you have to use the property `android:layout_width="wrap_content"` in your `GridLayout`. — luiscosta, Jul 24 '14 at 08:40
See this: http://stackoverflow.com/questions/10016343/gridlayout-not-gridview-how-to-stretch-all-children-evenly — luiscosta, Jul 24 '14 at 10:09

razz · Answer 1 · 2016-01-17T14:44:35.490

44

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"
    // ......
    >

edited Jan 17 '16 at 14:44

answered Nov 22 '15 at 06:55

razz

9,770
7
50
68

7

No, that doesn't make it centered horizontally. – IgorGanapolsky Feb 25 '16 at 15:42
3

This will center the cells within the grid's surface. Something like: |__CCCC__| – Alen Siljak Sep 26 '16 at 09:17
1

this solution perfect for me – Mahbubur Rahman Khan Sep 13 '19 at 22:23

score 9 · Answer 2 · answered Jul 28 '14 at 15:02

9

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.)

answered Jul 28 '14 at 15:02

njzk2

38,969
7
69
107

1

This should be accepted answer. As it works perfectly fine – Naveen Niraula Jul 24 '18 at 07:41

score 6 · Answer 3 · answered Jul 24 '14 at 08:44

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>

Yes, FrameLayout works much better than LinearLayout in this case. — IgorGanapolsky, Feb 25 '16 at 15:43

score 0 · Answer 4 · answered Oct 21 '19 at 14:45

The code in below solved my problem.

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

 <GridLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_centerHorizontal="true"
    android:layout_margin="30dp"
    android:columnCount="3"
    android:rowCount="4"
    android:useDefaultMargins="true">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

     <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


 </GridLayout>

 </RelativeLayout>

score 0 · Answer 5 · answered Dec 01 '20 at 18:14

if you are using a constraint layout use wrap content on the grid layout and create the items inside it. It will be centered to the screen

<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/item"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:columnCount="2"
android:useDefaultMargins="true"
/>

score -2 · Answer 6 · answered Sep 07 '17 at 18:54

copy this example for calculator layout =)

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    >
    <!-- android:useDefaultMargins="true" (OPTIONAL) -->
    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:useDefaultMargins="true" 
        >
        <Button
            android:layout_column="0"
            android:layout_row="0"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="/"/>
        <Button
            android:layout_column="1"
            android:layout_row="0"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="1"/>
        <Button
            android:layout_column="2"
            android:layout_row="0"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="2"/>
        <Button
            android:layout_column="3"
            android:layout_row="0"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="3"/>
        <Button
            android:layout_column="0"
            android:layout_row="1"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="*"/>
        <Button
            android:layout_column="1"
            android:layout_row="1"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="4"/>
        <Button
            android:layout_column="2"
            android:layout_row="1"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="5"/>
        <Button
            android:layout_column="3"
            android:layout_row="1"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="6"/>
        <Button
            android:layout_column="0"
            android:layout_row="2"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="-"/>
        <Button
            android:layout_column="1"
            android:layout_row="2"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="7"/>
        <Button
            android:layout_column="2"
            android:layout_row="2"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="8"/>
        <Button
            android:layout_column="3"
            android:layout_row="2"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="9"/>
        <Button
            android:layout_column="0"
            android:layout_row="3"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="+"/>
        <Button
            android:layout_column="1"
            android:layout_row="3"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="0"/>
        <Button
            android:layout_column="2"
            android:layout_row="3"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="00"/>
        <Button
            android:layout_column="3"
            android:layout_row="3"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:text="="/>

    </GridLayout>


</LinearLayout>

Android GridLayout center horizontally

6 Answers6