Converting an old style tablelayout to a constraint layout

Question

I'm trying to convert this layout made using table layout to a constraint layout. The second column and the third column could be hidden. The price should be aligned to right. The header in the first column should aligned to the left.

It's an exercise to learn constraints better, but I'm failing

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginEnd="24dp"
        android:shrinkColumns="*"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        android:divider="?android:attr/dividerHorizontal"
        android:showDividers="middle">

        <TableRow android:layout_marginBottom="2dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="0"
                android:gravity="start"
                android:text="Price"
                android:textColor="@android:color/black"
                android:textSize="12sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="1"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="-"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="2"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="-"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="3"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="2000$"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

        </TableRow>



        <TableRow
            android:layout_marginTop="2dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="0"
                android:gravity="start"
                android:text="Price2\n(test)"
                android:textColor="@android:color/black"
                android:textSize="12sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="1"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="8000$"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="2"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="-5000$"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="3"
                android:layout_marginStart="10dp"
                android:gravity="end"
                android:text="3000"
                android:textColor="@android:color/black"
                android:textSize="12sp" />
        </TableRow>
    </TableLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

I have try different ways: barriers, flow, but I didn't get the goal. I find it difficult to vertically align columns 2, 3 and 4 and at the same time align rows 1 and 2 horizontally

Answer 1

I think you are looking for Barriers to complete your exercise. You would set a barrier to the left of each column and constrain each column to the barrier to the right.

Here is an example of using ConstraintLayout in place of a TableLayout. It is complex enough that I think staying with TableLayout for its functionality is warranted. Here is the result followed by the code. The code has some comments that explain what is going on.

<!--
    This LinearLayout is here just to provide a means to center the ConstraintLayout.
-->
<androidx.appcompat.widget.LinearLayoutCompat 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:paddingTop="32dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

<!--
    A barrier is set at the start of each column.
-->
        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="start"
            app:constraint_referenced_ids="r1c1,r2c1" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="start"
            app:constraint_referenced_ids="r1c2,r2c2" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="start"
            app:constraint_referenced_ids="r1c3,r2c3" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="start"
            app:constraint_referenced_ids="r1c4,r2c4" />
<!--
    Each cell is constrained horizontally to the barrier to the right and to its own barrier to
    the left. app:layout_constraintWidth_min="wrap" is specified to stop the cells from collapsing.
    This is a hack IMO but effective.
-->
        <TextView
            android:id="@+id/r1c1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="start"
            android:text="Price"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@id/barrier2"
            app:layout_constraintStart_toStartOf="@id/barrier1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r2c1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="start"
            android:text="Price2\n(test)"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@id/barrier2"
            app:layout_constraintStart_toStartOf="@id/barrier1"
            app:layout_constraintTop_toBottomOf="@id/divider"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r1c2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="end"
            android:text="-"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            android:visibility="visible"
            app:layout_constraintEnd_toStartOf="@id/barrier3"
            app:layout_constraintStart_toStartOf="@id/barrier2"
            app:layout_constraintTop_toTopOf="@id/r1c1"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r2c2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="end"
            android:text="8000$"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            android:visibility="visible"
            app:layout_constraintEnd_toStartOf="@id/barrier3"
            app:layout_constraintStart_toStartOf="@id/barrier2"
            app:layout_constraintTop_toBottomOf="@id/divider"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r1c3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="end"
            android:text="-"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            app:layout_constraintEnd_toStartOf="@id/barrier4"
            app:layout_constraintStart_toStartOf="@id/barrier3"
            app:layout_constraintTop_toTopOf="@id/r1c1"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r2c3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:gravity="end"
            android:text="-5000$"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            app:layout_constraintEnd_toStartOf="@id/barrier4"
            app:layout_constraintStart_toStartOf="@id/barrier3"
            app:layout_constraintTop_toBottomOf="@id/divider"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r1c4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="end"
            android:text="2000$"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            app:layout_constraintBottom_toBottomOf="@id/r1c1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@id/barrier4"
            app:layout_constraintWidth_min="wrap" />

        <TextView
            android:id="@+id/r2c4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="end"
            android:text="3000"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@id/barrier4"
            app:layout_constraintTop_toBottomOf="@id/divider"
            app:layout_constraintWidth_min="wrap" />

        <View
            android:id="@+id/divider"
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:background="@android:color/black"
            app:layout_constraintEnd_toEndOf="@id/r1c4"
            app:layout_constraintStart_toStartOf="@id/r1c1"
            app:layout_constraintTop_toBottomOf="@id/r1c1" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.LinearLayoutCompat>

TableLayout will make the width of each cell in a column the width of the widest cell content. This is tricky to do with ConstraintLayout and is accomplished by setting the width of each cell to 0dp and constraining the start and end to the barriers that bracket the column. See this Stack Overflow question for an explanation. I consider this a hack, but it works.

The other difference between this implementation and TableLayout is how the table behaves when a single cell is collapsed. TableLayout will shift the remaining cells over while this implementation will maintain the original columns. If all the cells in a column are collapsed (made gone) then this works the same as TableLayout.