How can we add Views dynamically androidx.constraintlayout.helper.widget.Flow and add reference Ids

Question

How can we add Views dynamically in androidx.constraintlayout.helper.widget.Flow and add reference Ids dynamically.

Answer 1

You should add first your view (with an id set) to the parent ConstraintLayout. Then you can add it's reference id to your Flow with Flow.addView(). For example:

val view = LayoutInflater.from(context).inflate(R.layout.item, this, false)
view.layoutParams = ConstraintLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT)
view.id = View.generateViewId()
constraintLayout.addView(view)
flow.addView(view)

with this xml as your ViewGroup:

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

  <androidx.constraintlayout.helper.widget.Flow
      android:id="@+id/flow"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      app:flow_wrapMode="chain"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

Here is Kotlin Implementation

for (i in 0..4) {
    val customView = CustomComponent (this)
    customView.id = generateViewId()
    constraintLayout.addView(customView,i)
    flow.addView(customView)
}

Following is my XML

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/constraintLayout"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    >

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:flow_wrapMode="chain"
        app:flow_horizontalGap="2dp"
        app:flow_verticalGap="2dp"
        app:flow_verticalStyle = "spread_inside"
        app:flow_horizontalStyle="packed"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Following is my Custom View

class CustomComponent @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyle: Int = 0,
defStyleRes: Int = 0):LinearLayout(context, attrs, defStyle, defStyleRes) {
init {
    LayoutInflater.from(context)
        .inflate(R.layout.custom_view, this, true)
}}

Answer 3

view1.setId(View.generateViewId());
view2.setId(View.generateViewId());
view3.setId(View.generateViewId());
flow.setReferencedIds(new int[]{view1.getId(), view2.getId(), view3.getId()});