Create Views Within ConstraintLayout programatically-CodePudding

I want to create a simple layout with 3 rows of the TextView elements. The first and the last row contain just one text view each and the middle row contains two adjacent text views. Link to the Image

Here is the xml for generating the views

    <TextView
        android:id="@ id/textView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"

        app:layout_constraintBottom_toTopOf="@ id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@ id/textView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"

        app:layout_constraintBottom_toTopOf="@ id/textView4"
        app:layout_constraintEnd_toStartOf="@ id/textView3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/textView" />

    <TextView
        android:id="@ id/textView3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@ id/textView4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@ id/textView2"
        app:layout_constraintTop_toBottomOf="@ id/textView" />

    <TextView
        android:id="@ id/textView4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/textView2" />

I am trying to re-create the same view programatically with the following code:

        val layout = findViewById<ConstraintLayout>(R.id.main)
        val cs = ConstraintSet()
        cs.clone(layout)

        val textViews: MutableList<TextView> = ArrayList<TextView>()
        for (i  in 1..4) {
            val t = TextView(this)
            t.id = View.generateViewId()
            t.text = "Text"   i.toString()
            layout.addView(t)
            textViews.add(t)
        }

        //Just make suffixes similar to the layout xml
        val t1 = textViews[0]
        val t2 = textViews[1]
        val t3 = textViews[2]
        val t4 = textViews[3]

//    app:layout_constraintBottom_toTopOf="@ id/textView2"
//    app:layout_constraintEnd_toEndOf="parent"
//    app:layout_constraintStart_toStartOf="parent"
//    app:layout_constraintTop_toTopOf="parent" />
        cs.connect(t1.id, ConstraintSet.BOTTOM, t2.id, ConstraintSet.TOP)
        cs.connect(t1.id, ConstraintSet.END, layout.id, ConstraintSet.END)
        cs.connect(t1.id, ConstraintSet.START, layout.id, ConstraintSet.START)
        cs.connect(t1.id, ConstraintSet.TOP, layout.id, ConstraintSet.TOP)

//    app:layout_constraintBottom_toTopOf="@ id/textView4"
//    app:layout_constraintEnd_toStartOf="@ id/textView3"
//    app:layout_constraintStart_toStartOf="parent"
//    app:layout_constraintTop_toBottomOf="@ id/textView" />
        cs.connect(t2.id, ConstraintSet.BOTTOM, t4.id, ConstraintSet.TOP)
        cs.connect(t2.id, ConstraintSet.END, t3.id, ConstraintSet.START)
        cs.connect(t2.id, ConstraintSet.START, layout.id, ConstraintSet.START)
        cs.connect(t2.id, ConstraintSet.TOP, t1.id, ConstraintSet.BOTTOM)

//    app:layout_constraintBottom_toTopOf="@ id/textView4"
//    app:layout_constraintEnd_toEndOf="parent"
//    app:layout_constraintStart_toEndOf="@ id/textView2"
//    app:layout_constraintTop_toBottomOf="@ id/textView" />
        cs.connect(t3.id, ConstraintSet.BOTTOM, t4.id, ConstraintSet.TOP)
        cs.connect(t3.id, ConstraintSet.END, layout.id, ConstraintSet.END)
        cs.connect(t3.id, ConstraintSet.START, t2.id, ConstraintSet.END)
        cs.connect(t3.id, ConstraintSet.TOP, t1.id, ConstraintSet.BOTTOM)

//    app:layout_constraintBottom_toBottomOf="parent"
//    app:layout_constraintEnd_toEndOf="parent"
//    app:layout_constraintStart_toStartOf="parent"
//    app:layout_constraintTop_toBottomOf="@ id/textView2" />
        cs.connect(t4.id, ConstraintSet.BOTTOM, layout.id, ConstraintSet.BOTTOM)
        cs.connect(t4.id, ConstraintSet.END, layout.id, ConstraintSet.END)
        cs.connect(t4.id, ConstraintSet.START, layout.id, ConstraintSet.START)
        cs.connect(t4.id, ConstraintSet.TOP, t2.id, ConstraintSet.BOTTOM)

However this doesn't seem to work and all the text views are placed at the top-left corner of the display.

Could you please tell me how to make this piece of code work.

CodePudding user response：

It is not enough just to clone the constraints and make the changes. The changes have to be applied to the ConstraintLayout using ConstraintSet#applyTo().