Android Studio Equivalate to CSS display grid

Question

In CSS I can easily create a grid as in the picture below:

.grid {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(2, 1fr);

  width: 200px;
  height: 200px;

  margin: auto;
}

.grid > div {
  border: 1px solid black;
  text-align: center;
  line-height: 100px; 
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

I started working with Android Studio today and want to achieve a similar effect? I've tried the linear layouts, but cannot get them to wrap or specify the number of columns and rows. Here's what I have so far:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="4" />
</LinearLayout>

But they are all in a line and acting more like a flexbox. There seems to be a grid layout, but it's under legacy so I'm assuming it's depreciated. How can I make a grid layout like the one above, specify the number of columns and rows?

Answer 1

The GridLayout is not deprecated at all.

dependencies {
    implementation "androidx.gridlayout:gridlayout:1.0.0"
}

That's the XML:

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.gridlayout.widget.GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:useDefaultMargins="true"
        app:columnCount="2"
        app:rowCount="2">

            <TextView
                app:layout_columnWeight="1.00"
                app:layout_rowWeight="1.00"
                android:gravity="center"
                android:fontFamily="sans-serif-medium"
                android:textColor="#000000"
                android:textSize="32sp"
                android:text="1"/>

            <TextView
                app:layout_columnWeight="1.00"
                app:layout_rowWeight="1.00"
                android:gravity="center"
                android:fontFamily="sans-serif-medium"
                android:textColor="#000000"
                android:textSize="32sp"
                android:text="2"/>

            <TextView
                app:layout_columnWeight="1.00"
                app:layout_rowWeight="1.00"
                android:gravity="center"
                android:fontFamily="sans-serif-medium"
                android:textColor="#000000"
                android:textSize="32sp"
                android:text="3"/>

            <TextView
                app:layout_columnWeight="1.00"
                app:layout_rowWeight="1.00"
                android:gravity="center"
                android:fontFamily="sans-serif-medium"
                android:textColor="#000000"
                android:textSize="32sp"
                android:text="4"/>

    </androidx.gridlayout.widget.GridLayout>

</layout>

And also the documentation for it: androidx.gridlayout.widget.

---

However, for dynamic items you might want to use a RecyclerView with the GridLayoutManager.