Divided view in average ratio in constraint layout

Question

Currently , I have a layout using the constraintLayout like the following

As you see, I divide the checkbox in each section with 10% width using vertical guideline. However, the total of the checkedboxs will be changed due to the user request. That's mean it may show 4 or 3 checkbox in one row.

At this moment, I want to divide the width with weight rather than setting the hard-code percentage. What I should do for this?

Appreciate any comment or advices. Thank you

<?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="wrap_content"
    android:background="@color/worklist_normal_row_bg">

    <TextView
        android:id="@+id/textView97"
        style="@style/label_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        android:text="TextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="8dp" />

    <TextView
        android:id="@+id/textView102"
        style="@style/label_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:layout_marginStart="8dp"
        android:text="TextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView97"
        android:layout_marginLeft="8dp" />

    <TextView
        android:id="@+id/textView103"
        style="@style/label_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintStart_toEndOf="@+id/textView102"
        app:layout_constraintTop_toTopOf="@+id/textView97"/>

    <TextView
        android:id="@+id/textView104"
        style="@style/label_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="TextView"
        android:textSize="14sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView102"
        app:layout_constraintStart_toStartOf="@+id/guideline12"
        android:layout_marginLeft="8dp" />

    <CheckBox
        android:id="@+id/checkBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:text=" "
        app:layout_constraintBaseline_toBaselineOf="@+id/textView103"
        app:layout_constraintStart_toStartOf="@+id/guideline12"
        tools:checked="true" />

    <CheckBox
        android:id="@+id/checkBox4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" "
        app:layout_constraintBaseline_toBaselineOf="@+id/checkBox2"
        app:layout_constraintStart_toEndOf="@+id/checkBox2"
        tools:checked="true" />

    <CheckBox
        android:id="@+id/checkBox5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" "
        app:layout_constraintBaseline_toBaselineOf="@+id/checkBox4"
        app:layout_constraintStart_toEndOf="@+id/checkBox4"
        tools:checked="true" />

    <CheckBox
        android:id="@+id/checkBox6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" "
        app:layout_constraintBaseline_toBaselineOf="@+id/checkBox5"
        app:layout_constraintStart_toEndOf="@+id/checkBox5"
        tools:checked="true" />

    <CheckBox
        android:id="@+id/checkBox7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" "
        app:layout_constraintBaseline_toBaselineOf="@+id/checkBox6"
        app:layout_constraintStart_toEndOf="@+id/checkBox6"
        tools:checked="true" />

    <TextView
        android:id="@+id/textView105"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:layout_marginTop="8dp"
        android:background="@color/worklist_divider_bg"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView104" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.3" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

</android.support.constraint.ConstraintLayout>

Answer 1

Try this.

<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="wrap_content"
    android:background="@color/color_bg_rcl">

    <TextView
        android:id="@+id/textView97"
        style="@style/label_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView102"
        style="@style/label_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:text="TextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView97" />

    <TextView
        android:id="@+id/textView103"
        style="@style/label_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintStart_toEndOf="@+id/textView102"
        app:layout_constraintTop_toTopOf="@+id/textView97" />

    <TextView
        android:id="@+id/textView104"
        style="@style/label_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:text="TextView"
        android:textSize="14sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView102"
        app:layout_constraintStart_toStartOf="@+id/guideline12" />

    <CheckBox
        android:id="@+id/checkBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" "
        app:layout_constraintLeft_toRightOf="@+id/guideline12"
        app:layout_constraintRight_toLeftOf="@+id/checkBox4"
        tools:checked="true" />

    <CheckBox
        android:id="@+id/checkBox4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" "
        app:layout_constraintLeft_toRightOf="@+id/checkBox2"
        app:layout_constraintRight_toLeftOf="@+id/checkBox5"
        tools:checked="true" />

    <CheckBox
        android:id="@+id/checkBox5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" "
        app:layout_constraintLeft_toRightOf="@+id/checkBox4"
        app:layout_constraintRight_toLeftOf="@+id/checkBox6"
        tools:checked="true" />

    <CheckBox
        android:id="@+id/checkBox6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" "
        app:layout_constraintLeft_toRightOf="@+id/checkBox5"
        app:layout_constraintRight_toLeftOf="@+id/checkBox7"
        tools:checked="true" />

    <CheckBox
        android:id="@+id/checkBox7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" "
        app:layout_constraintLeft_toRightOf="@+id/checkBox6"
        app:layout_constraintRight_toRightOf="parent"
        tools:checked="true" />

    <TextView
        android:id="@+id/textView105"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView104" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="108dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

</android.support.constraint.ConstraintLayout>