How to set a layout width percentage of one third on ConstraintLayout?

Question

I want to fill the screen in a two-dimensional grid of 3x6 TextViews. This means that each TextView must be 1/3 of the full screen width and the height 1/6 of the full screen height. I am using a ConstraintLayout for this layout, since LinearLayouts are bad practise for this layout as nested weights are bad for performance. Currently, I am using the percentage 0.333333333333333 and 0.166666666666667 for respectively the width and height, as shown below.

<TextView
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@id/text_view_theme_remove"
        app:layout_constraintBottom_toTopOf="@id/text_view_theme_percentage"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.333333333333333"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.166666666666667"
        android:gravity="center"
        android:id="@+id/text_view_theme_unknown"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/transparent"
        app:autoSizeTextType="uniform"
        android:text="@string/unknown"/>

I was wondering whether it is possible to set the percentages as fractions? Thus for the width 1/3 and the height 1/6?

Excuse me, it is possible to give 1/3 and 1/6 to it, but it will work like 1 and / and will be ignored. — MMG, Apr 28 '20 at 10:00
@MohammadMoeinGolchin Nope, not yet, but I guess I will use LinearLayouts anyway... — t.r.hogenkamp, Apr 29 '20 at 08:51

score 1 · Accepted Answer · answered Apr 28 '20 at 10:38

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <LinearLayout android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_weight="3"
        android:orientation="horizontal"
        xmlns:android="http://schemas.android.com/apk/res/android" >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="2"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="3"/>
    </LinearLayout>
    <LinearLayout android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_weight="3"
        android:orientation="horizontal"
        xmlns:android="http://schemas.android.com/apk/res/android" >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="4"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="5"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="6"/>
    </LinearLayout>
    <LinearLayout android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_weight="3"
        android:orientation="horizontal"
        xmlns:android="http://schemas.android.com/apk/res/android" >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="7"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="8"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="9"/>
    </LinearLayout>
    <LinearLayout android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_weight="3"
        android:orientation="horizontal"
        xmlns:android="http://schemas.android.com/apk/res/android" >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="10"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="11"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="12"/>
    </LinearLayout>
    <LinearLayout android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_weight="3"
        android:orientation="horizontal"
        xmlns:android="http://schemas.android.com/apk/res/android" >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="13"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="14"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="15"/>
    </LinearLayout>
    <LinearLayout android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_weight="3"
        android:orientation="horizontal"
        xmlns:android="http://schemas.android.com/apk/res/android" >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="16"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="17"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="18"/>
    </LinearLayout>
</LinearLayout>

The problem is here that we have nested weights, which is bad for performance. That is the reason that I would like to use ConstraintLayout. — t.r.hogenkamp, Apr 28 '20 at 10:50
See for example the following [link](https://stackoverflow.com/questions/9430764/why-are-nested-weights-bad-for-performance-alternatives). — t.r.hogenkamp, Jul 27 '20 at 09:04

score 0 · Answer 2 · answered Apr 28 '20 at 10:28

0

You should use chains like A binds to parent's start and start of following view. Then you set width of all the views equals to 0. You can make it with all rows.

Then, you can use aspect ratio to make width and height the same size.

answered Apr 28 '20 at 10:28

alexanderktx

148
1
4

How to set a layout width percentage of one third on ConstraintLayout?

2 Answers2

Linked