ConstraintLayout and table

Question

I want to get table 3х3. The rows should have the same height and the cells should be equal. I tried using ConstraintLayout with weights and it works if i make one row

     <TextView
        android:id="@+id/view_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="3"
        android:text="view_1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/view_2"/>

But if I try to add second row and constraintVertical_weight for views (using height=0dp) they disappear. Is it possible to solve this problem without additional layouts?

What's the point about using a constraint layout instead of a RecyclerView with a GridLayoutManager? — Nicola Gallazzi, Dec 12 '18 at 09:53

score 0 · Answer 1 · answered Dec 12 '18 at 09:51

If you're adamant on using constraint layout, the one below is a 3x3 table with all the appropriate constraints. As you populate the textviews, you can add the chain type (you can use "spread" in your case)

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/textView4"
        app:layout_constraintEnd_toStartOf="@+id/textView2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/textView5"
        app:layout_constraintEnd_toStartOf="@+id/textView3"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/textView6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/textView7"
        app:layout_constraintEnd_toStartOf="@+id/textView5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/textView8"
        app:layout_constraintEnd_toStartOf="@+id/textView6"
        app:layout_constraintStart_toEndOf="@+id/textView4"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/textView9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView5"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintEnd_toStartOf="@+id/textView8"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView4" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintEnd_toStartOf="@+id/textView9"
        app:layout_constraintStart_toEndOf="@+id/textView7"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView8"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />
</android.support.constraint.ConstraintLayout>

score 0 · Answer 2 · answered Dec 12 '18 at 10:42

Assuming you have fixed width and height, the 3x3 cell can be created with ConstraintLayout with each cell having same width and height. Here's the code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<TextView
    android:id="@+id/textview_1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    app:layout_constraintBottom_toTopOf="@id/textview_4"
    app:layout_constraintEnd_toStartOf="@id/textview_2"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_chainStyle="spread"
    tools:text="TextView 1" />

<TextView
    android:id="@+id/textview_2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="@id/textview_1"
    app:layout_constraintEnd_toStartOf="@id/textview_3"
    app:layout_constraintStart_toEndOf="@id/textview_1"
    app:layout_constraintTop_toTopOf="@id/textview_1"
    tools:text="TextView 2" />

<TextView
    android:id="@+id/textview_3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="@id/textview_1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/textview_2"
    app:layout_constraintTop_toTopOf="@id/textview_1"
    tools:text="TextView 3" />

<TextView
    android:id="@+id/textview_4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    app:layout_constraintBottom_toTopOf="@id/textview_7"
    app:layout_constraintEnd_toEndOf="@id/textview_1"
    app:layout_constraintStart_toStartOf="@id/textview_1"
    app:layout_constraintTop_toBottomOf="@id/textview_1"
    tools:text="TextView 4" />

<TextView
    android:id="@+id/textview_5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="@id/textview_4"
    app:layout_constraintEnd_toEndOf="@id/textview_2"
    app:layout_constraintStart_toStartOf="@id/textview_2"
    app:layout_constraintTop_toTopOf="@id/textview_4"
    tools:text="TextView 5" />

<TextView
    android:id="@+id/textview_6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="@id/textview_4"
    app:layout_constraintEnd_toEndOf="@id/textview_3"
    app:layout_constraintStart_toStartOf="@id/textview_3"
    app:layout_constraintTop_toTopOf="@id/textview_4"
    tools:text="TextView 6" />

<TextView
    android:id="@+id/textview_7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@id/textview_1"
    app:layout_constraintStart_toStartOf="@id/textview_1"
    app:layout_constraintTop_toBottomOf="@id/textview_4"
    tools:text="TextView 7" />

<TextView
    android:id="@+id/textview_8"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="@id/textview_7"
    app:layout_constraintEnd_toEndOf="@id/textview_2"
    app:layout_constraintStart_toStartOf="@id/textview_2"
    app:layout_constraintTop_toTopOf="@id/textview_7"
    tools:text="TextView 8" />

<TextView
    android:id="@+id/textview_9"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="@id/textview_7"
    app:layout_constraintEnd_toEndOf="@id/textview_3"
    app:layout_constraintStart_toStartOf="@id/textview_3"
    app:layout_constraintTop_toTopOf="@id/textview_7"
    tools:text="TextView 9" />

</android.support.constraint.ConstraintLayout>

Here a vertical chain has been created on the first column and a horizontal chain has been created on the first row. This way you can control the width of all the cells from the first row and control the height of all the cells from the first column. This also saves you from creating multiple chains in a layout and all of the chains in this layout which are actually 2 reside only on the first TextView only, so it is more manageable.

I hope this helps and let me know if you have any questions regarding this.

ConstraintLayout and table

2 Answers2