Use ConstraintLayout like TableLayout or LinearLayout horizontal

Question

I am displaying data in a table view approach but using TableLayout which inherits from LinearLayout are too heavy and I am getting frame skipped as I am displaying a lot of table in one fragment. My concern is I want the second column to occupy space as much as it can since that is where the dynamic data is being displayed but I do not know how to do this in ConstraintLayout.

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/allTimeLabel"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="15dp"
    app:cardCornerRadius="10dp">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="15dp">

        <com.google.android.material.textview.MaterialTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/ic_arrow_down"
            android:drawablePadding="5dp"
            android:paddingVertical="5dp"
            android:text="@string/all_time_high_cycle_low"
            android:textColor="@color/colorAccent"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TableLayout
            android:id="@+id/allTimeViews"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="1"
            android:visibility="visible">

            <TableRow android:paddingTop="5dp">

                <com.google.android.material.textview.MaterialTextView android:text="@string/ath_usd" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/fieldRight49"
                    android:gravity="end"
                    android:text="@string/empty" />

            </TableRow>

            <TableRow android:paddingTop="5dp">

                <com.google.android.material.textview.MaterialTextView android:text="@string/ath_date" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/fieldRight50"
                    android:gravity="end"
                    android:text="@string/empty" />

            </TableRow>

            <TableRow android:paddingTop="5dp">

                <com.google.android.material.textview.MaterialTextView android:text="@string/time_from_ath" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/fieldRight51"
                    android:gravity="end"
                    android:text="@string/empty" />

            </TableRow>

            <TableRow android:paddingTop="5dp">

                <com.google.android.material.textview.MaterialTextView android:text="@string/down_from_ath" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/fieldRight52"
                    android:gravity="end"
                    android:text="@string/empty" />

            </TableRow>

            <TableRow android:paddingTop="5dp">

                <com.google.android.material.textview.MaterialTextView android:text="@string/breakeven_multiple" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/fieldRight53"
                    android:gravity="end"
                    android:text="@string/empty" />

            </TableRow>

            <TableRow android:paddingTop="5dp">

                <com.google.android.material.textview.MaterialTextView android:text="@string/cycle_low_usd" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/fieldRight54"
                    android:gravity="end"
                    android:text="@string/empty" />

            </TableRow>

            <TableRow android:paddingTop="5dp">

                <com.google.android.material.textview.MaterialTextView android:text="@string/cycle_low_date" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/fieldRight55"
                    android:gravity="end"
                    android:text="@string/empty" />

            </TableRow>

            <TableRow android:paddingTop="5dp">

                <com.google.android.material.textview.MaterialTextView android:text="@string/time_since_low" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/fieldRight56"
                    android:gravity="end"
                    android:text="@string/empty" />

            </TableRow>

            <TableRow android:paddingTop="5dp">

                <com.google.android.material.textview.MaterialTextView android:text="@string/up_since_low" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/fieldRight57"
                    android:gravity="end"
                    android:text="@string/empty" />

            </TableRow>

        </TableLayout>

    </androidx.appcompat.widget.LinearLayoutCompat>

</com.google.android.material.card.MaterialCardView>

Answer 1

Try the following. The only real thing of note is setting the left titles to a width of 0dp and constraining their right sides to the barrier which is set to the right of these same TextViews.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:visibility="visible"
    tools:visibility="visible">

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textColor="#FF9800"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="All Time High &amp; Cycle Low"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="ATH (USD)"
        android:visibility="visible"
        app:layout_constraintEnd_toStartOf="@id/barrier"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Time from ATH"
        android:visibility="visible"
        app:layout_constraintEnd_toStartOf="@id/barrier"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textView1" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView1,textView2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/barrier"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:visibility="invisible" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/barrier"
        app:layout_constraintTop_toBottomOf="@+id/textView3"
        tools:visibility="visible" />

</androidx.constraintlayout.widget.ConstraintLayout>