I'm maintaining legacy app which is still using XMLs and oldschool Views.

I have androidx.constraintlayout.helper.widget.Flow component which has constraint_reference ids to other Views.

Those other views visibility is set to GONE or VISIBLE based on state of the item.

What is issue in this Flow component is how item views are displayed.

Max I can display in single row is 3 items. If 4th one is visible, it should start in next row from start/left. This first usecase is working correctly. But when I have 1 or 2 items, they should appear in single row starting from start/left. But they are currently centered to the middle of the screen width. In LayoutInspector Flow view is centered in the middle (despite match_parent width is set)

Not sure what is wrong and why is this behavior happening for 2 or 1 item.

Code:

<androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flowHelper"
        style="@style/InfoFlow"
        android:layout_width="match_parent"
        android:layout_marginTop="20dp"
app:constraint_referenced_ids="viewTimerInfo,viewScheduleInfo,viewBreakInfo,viewMaintenanceInfo"
        app:layout_constraintTop_toBottomOf="@+id/txtStoreType"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/divider"/>

Style:

  <style name="InfoFlow">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="flow_wrapMode">chain</item>
        <item name="flow_maxElementsWrap">3</item>
        <item name="flow_horizontalStyle">packed</item>
        <item name="flow_horizontalBias">0</item>
        <item name="flow_horizontalGap">@dimen/padding_default</item>
        <item name="flow_horizontalAlign">start</item>
        <item name="flow_verticalStyle">spread</item>
        <item name="flow_verticalBias">0</item>
        <item name="flow_verticalGap">@dimen/padding_small</item>
        <item name="flow_verticalAlign">center</item>
    </style>

Behavior: