Converting an old style tablelayout to a constraint layout - android-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.