How can I have a ConstraintLayout Flow widget wrap the "containing" views and the views also take up the remaining space?

Question

I'm trying to use a Flow widget to replace a vertical orientation LinearLayout that I was just using inside of my ConstraintLayout. It needs to satisfy all of the following:

1. The "containing" Flow widget must wrap the controls so that the widest view dictates the size of the flow layout.
2. However, the Flow widget cannot be larger than 90% of the parent (and its "containing" views must be smaller than it, respecting Flow widget padding).
3. The views "inside" must wrap their own contents without a hard coded width.
4. The views "inside" of the Flow widget must fill the empty space if they are less wide than the widest view (respecting the Flow widget padding).

If I were to express in pseudo code I'd say:

• flow_widget.width = longest_child.width
• contained_view.width = min( contained_view.contents.width, flow_widget.width )

Can this be done with a Flow widget and how?

My attempt:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".TestFragment">

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/centerControls"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp"
        app:constraint_referenced_ids="textView,editText,button"
        app:flow_verticalGap="5dp"
        app:flow_wrapMode="none"
        
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintVertical_bias="0.5"
        
        app:layout_constrainedWidth_max="wrap"

        android:background="@color/green"
        
        app:layout_constraintWidth_percent="0.9"
        />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="I am a text view"
        />

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="I am an edit view"
        android:hint="I am a hint"
        />
    
    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="I am a button"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Note that in the image below the Flow widget will respect the 90% constraint but will not wrap the views.

Answer 1

If you want the widest view dictates the size of the flow layout,You need to set at least one view width as the maximum,And set the other view width as 0dp. And you need to set the Flow widget width as "wrap_content".

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/centerControls"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp"
        app:constraint_referenced_ids="textView,editText,button"
        app:flow_verticalGap="5dp"
        app:flow_wrapMode="none"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

            app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintVertical_bias="0.5"

        app:layout_constrainedWidth_max="wrap"

        android:background="@color/green"

        app:layout_constraintWidth_percent="0.9"
        tools:ignore="MissingClass" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="I am a text view"
        />

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="I am an edit view"
        android:hint="I am a hint"
        />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="I am a button"
        />

</androidx.constraintlayout.widget.ConstraintLayout>