Horizontal LinearLayout with Multiple Children, Move Children Below on New Line When No More Horizontal Space

Question

I would like to have a horizontal LinearLayout that is as wide as the screen and as high as its children, but the trick is that its children will have dynamic width each and I don't want them going off screen (cut out). I want them to flow/break in a new line so that they are all visible.

Although totally irrelevant to Android, it should work similar to how inline <div>'s work in HTML.

Here's what I have right now:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="If you would enter some digits in this field " />
        <EditText
            android:id="@+id/tvDistance"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="enter some digits here"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" that would be great" />
    </LinearLayout>

But as soon as the children of the LinearLayout get wider than the screen the extra part gets off the screen/invisible.

Answer 1

I would like to have a horizontal LinearLayout that is as wide as the screen and as high as its children, but the trick is that its children will have dynamic width each and I don't want them going off screen (cut out).

A LinearLayout can't do that(any default layout from the SDK can't do that) because the LinearLayout is set to place all the children in one horizontal or vertical line. Also, any type of conditional layout rules based on dimensions not yet available(like in your case the available width for the LinearLayout) are not possible in the xml anyway.

What you need is a custom layout which measures the children to use the available space moving any non fitting children on a new line below(a so called FlowLayout).

Edit:

Google now provides the flexbox library which implements the web's flexbox layout on Android. Using that library, the children of a FlexboxLayout will be placed on multiple lines based on their widths by using the flexDirection(with a value of row) and flexWrap(with a value of wrap) attributes.