How to get gridview with different cells sizes using ConstraintLayout - flow

Question

I'm trying to get the same grid in the below image using the Flow which is part of ConstrainLayout

My code is as below

<androidx.constraintlayout.helper.widget.Flow
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:constraint_referenced_ids="v1,v2,v3,dummyView,v4,v5"
      app:flow_horizontalGap="10dp"
      app:flow_verticalGap="10dp"
      app:flow_horizontalStyle="spread_inside"
      app:flow_maxElementsWrap="2"
      app:flow_verticalAlign="top"
      app:flow_wrapMode="chain"/>


 <View
      android:id="@+id/v1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintHorizontal_weight="1"/>

<View
      android:id="@+id/v2"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintHorizontal_weight="1"/>

<View
      android:id="@+id/v3"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintHorizontal_weight="2"/>

<View
      android:id="@+id/dummyView"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintHorizontal_weight="0"/>

<View
      android:id="@+id/v4"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintHorizontal_weight="1"/>

<View
      android:id="@+id/v5"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintHorizontal_weight="1"/>

With this approach I got the almost the same bet with a horizontal gap after v3 as below

Is there any one has a worked solution with Constraint Flow please ?

Answer 1

Try this

<androidx.constraintlayout.widget.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"
    tools:ignore="MissingConstraints"
    android:layout_width="match_parent"
    android:layout_margin="@dimen/margin_medium"
    android:layout_height="wrap_content">

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tvUserDetail,tvFirstName,tvLastName,tvPhone,tvEmail"
        app:flow_horizontalGap="10dp"
        app:flow_verticalGap="10dp"
        app:flow_horizontalStyle="spread_inside"
        app:flow_maxElementsWrap="5"
        app:flow_verticalAlign="top"
        app:flow_wrapMode="chain"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tvUserDetail"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-medium"
        android:text="User Detail"
        android:background="@drawable/card_design"
        android:padding="12dp"
        android:textColor="@android:color/black" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tvFirstName"
        tools:text="User"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/card_design"
        android:fontFamily="sans-serif-medium"
        android:padding="12dp"
        android:textColor="@android:color/black" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tvLastName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/card_design"
        android:fontFamily="sans-serif-medium"
        android:padding="12dp"
        android:text="Last"
        android:textColor="@android:color/black" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tvPhone"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/card_design"
        android:fontFamily="sans-serif-medium"
        android:padding="12dp"
        android:text="Phone"
        android:textColor="@android:color/black" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tvEmail"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/card_design"
        android:fontFamily="sans-serif-medium"
        android:padding="12dp"
        android:text="Email"
        android:textColor="@android:color/black" />
</androidx.constraintlayout.widget.ConstraintLayout>