Android GridLayout center horizontally

android gridlayoutmanager center items
gridview center align android
android gridlayout spacing
flexible grid layout android
scrollable gridlayout android
android gridlayout auto_fit
grid layout 2x2 android
static grid layout android

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>

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

Center item in GridLayout, Overall placement of the view in the cell group is specified by the two alignments which act along each axis independently. The GridLayout class  Android GridLayout center horizontally . Posted by: admin May 11, 2020 Leave a comment. Questions: I’m trying to create a GridLayout with 2 columns which will be

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

GridLayout.Alignment, open. Spec. A Spec defines the horizontal or vertical characteristics of a group of cells. spec(start: Int, size: Int, alignment: GridLayout. layout_gravity can be used to position a view in the center of its parent. While gravity attribute is used to position view’s content e.g. “text” in the center of the view. ( 1 ) Center Views Horizontally. Place target views in a <LinearLayout> Set LinearLayout attribute android:orientation="vertical""

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>

GridLayout, class, GridLayout.Alignment. Alignments specify where a view should be placed A Spec defines the horizontal or vertical characteristics of a group of cells. If you are using ConstraintLayout, adding android:layout_gravity="center" or android:layout_gravity="center_horizontal" to the parent layout in item's XML would be enough (the first parent in hierarchy). In your case, the codes would be something similar to this:

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>

GridLayout, A child's ability to stretch is inferred from the alignment properties of its row Spec, A Spec defines the horizontal or vertical characteristics of a group of cells. The RelativeLayout has the same gravity property as the LinearLayout. However, centering child views inside a RelativeLayout works differently. Instead of layout_gravity you have to use the properties layout_centerHorizontal, layout_centerVertical and layout_centerInParent (which centers both horizontally and vertically).

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>

Using the Android GridLayout Manager in Android Studio Designer , GridLayout (android.widget.GridLayout) initially seems like it's a way to create tables much like TableLayout (android.widget. Choosing horizontal means we have to limit the number of columns to get the android:layout_gravity="center". GridLayout provides a 12-column grid that you can use on both horizontal and vertical grids. On horizontal grids the size is the width, while on vertical grids the size is the cell height. The class names contain the media query breakpoint and the size. Use gl-sm-1 through gl-sm-12 to size cells on any screen size.

How to make grid layout look cool in Android, You can specify the gravity as center_horizontal, center_vertical and center (​which centers both horizontally and vertically). On the child views of  I'm using GridLayout class in Java to layout some UI components. Image is here: I would like to get the Create Shopping Cart picture and the associated text to be aligned center in their respective cells in the panel. For details - the shopping cart picture would have to be in the center of the gray cell of the panel.

GridLayout (not GridView) how to stretch all children evenly , Как установить android: layout_columnWeight = "1" программно для элемента в поддержке android v7 Gridlayout Изменение количества столбцов с помощью GridLayoutManager и RecyclerView

Centering views in Android layouts, The previous chapter (entitled Using the Android GridLayout Manager in the Graphical Layout Tool) introduced the basic concepts of the Android GridLayout manager before explaining how to create a GridLayout based user interface design using the Graphical Layout editor tool. The Graphical Layout tool is not, however, the only available method of

Comments
  • Why don't you use the GridLayout inside a LinearLayout with the property android:gravity="center"?!
  • Tried, without results. Details in post edit
  • Of course it won't change because you have to use the property android:layout_width="wrap_content" in your GridLayout.
  • Thanks! What about spacing between items?
  • See this: stackoverflow.com/questions/10016343/…
  • No, that doesn't make it centered horizontally.
  • This will center the cells within the grid's surface. Something like: |__CCCC__|
  • this solution perfect for me
  • This should be accepted answer. As it works perfectly fine
  • Yes, FrameLayout works much better than LinearLayout in this case.