How to center elements inside a gridLayout row?

Question

I have a gridlayout with 3 rows and 3 columns (we make a tic tac toe game).

Inside these rows and columns should be ImageViews. However: My teacher centers them by changing the margin of every ImageView manually. I think thats not the best way to do that, especially when having a larger amount of rows and columns as we do in this example.

Is there a better way to center all ImageViews inside the rows/columns?

The xml code is (with the first 3 images):

<androidx.gridlayout.widget.GridLayout
    android:layout_width="368dp"
    android:layout_height="368dp"
    android:background="@drawable/board"
    app:columnCount="3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.6"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:rowCount="3">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        app:layout_column="0"
        app:layout_row="0"
        app:srcCompat="@drawable/coin_red" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:layout_marginLeft="14dp"  // This one we edit manually ...
        app:layout_column="1"
        app:layout_row="0"
        app:srcCompat="@drawable/coin_red" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:layout_marginLeft="12dp"
        app:layout_column="2"
        app:layout_row="0"
        app:srcCompat="@drawable/coin_red" />
</androidx.gridlayout.widget.GridLayout>

Is this your answer? (https://stackoverflow.com/questions/4592065/how-to-layout-a-grid-of-images-in-the-center-of-the-screen) — , Feb 15 '21 at 10:58
not really, my images all have the same size so thats not a problem. I just want to use a Grid where every image is centered inside its own gridcell. That's easy to do in visual studio with xml, but I never found a solution (yet) on how to do this in android studio. — AlpakaJoe, Feb 17 '21 at 10:17

score 1 · Accepted Answer · answered Feb 18 '21 at 05:53

I think I got the effect you are looking for. It still takes quite a few lines, but the benefit with this is that it doesn't use hardcoded values.

You will want to set the column_weight and row_weight for each image view to 1 and set the layout_gravity to "center".

For example you would change your imageView1 to

<ImageView
    android:id="@+id/imageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    app:layout_column="0"
    app:layout_row="0"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1"
    app:layout_gravity="center"
    app:srcCompat="@drawable/coin_red" />

I hope that helps.

score -1 · Answer 2 · answered Feb 18 '21 at 09:38

-1

According to me you can directly set your layout gravity to center

<ImageView
    android:id="@+id/imageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    app:layout_column="0"
    app:layout_row="0"
    app:srcCompat="@drawable/coin_red" 
    android:layout_gravity="center" />

answered Feb 18 '21 at 09:38

Devanshu Gupta

1

Setting the "gravity" value alone didn't do the trick yet, but after adding everything from Nicolas' answer, it worked. Thanks for your help anyway! – AlpakaJoe Feb 18 '21 at 10:36
sorry for wasting your time – Devanshu Gupta Feb 27 '21 at 13:15

How to center elements inside a gridLayout row?

2 Answers2