How to move ImageView when it is clicked in Kotlin?

Question

So I want to have a box that can be moved when we clicked it. The box starts in left top border and when we click it, I want it to move to bottom right border. I thought I have implemented the code correctly but when I run the app and click the box, it didn't move. Where am I missing?

Here's the function to move the box

fun placement() {
    box.visibility = View.VISIBLE
    box.isClickable = true
    box.setOnClickListener {
        val params = box.layoutParams as ConstraintLayout.LayoutParams
        params.rightToLeft = contentMainBinding.RightBorder.id
        params.topToBottom = contentMainBinding.BottomBorder.id
        box.layoutParams = params
    }
}

Here's the initial box position

<ImageView
    android:id="@+id/box"
    android:layout_width="20dp"
    android:layout_height="30dp"
    android:background="#000000"
    app:layout_constraintStart_toEndOf="@+id/LeftBorder"
    app:layout_constraintTop_toBottomOf="@+id/TopBorder"
    tools:ignore="MissingConstraints" />

Answer 1

You should UNSET for top and start connect. Change your onclick like this:

fun placement() {
    box.visibility = View.VISIBLE
    box.isClickable = true
    box.setOnClickListener {
        val params = box.layoutParams as ConstraintLayout.LayoutParams
        params.rightToLeft = contentMainBinding.RightBorder.id
        params.bottomToTop = contentMainBinding.BottomBorder.id    //change topToBottom

        //UNSET connection here
        params.startToEnd = ConstraintLayout.LayoutParams.UNSET
        params.topToBottom = ConstraintLayout.LayoutParams.UNSET

        box.layoutParams = params
    }
}

Answer 2

1.replace params.topToBottom with params.bottomToTop .

2.clear the constraints set by xml.

params.startToEnd = ConstraintLayout.LayoutParams.UNSET
params.topToBottom = ConstraintLayout.LayoutParams.UNSET

---

BTW, There are other approaches to move the box.

approach 1:

box.updateLayoutParams<ConstraintLayout.LayoutParams> {
    rightToLeft = contentMainBinding.RightBorder.id
    bottomToTop = contentMainBinding.BottomBorder.id
    startToEnd = ConstraintLayout.LayoutParams.UNSET
    topToBottom = ConstraintLayout.LayoutParams.UNSET
}

approach 2:

val constraintSet = ConstraintSet()
constraintSet.clone(contentMainBinding.root)
constraintSet.clear(contentMainBinding.box.id, ConstraintSet.TOP)
constraintSet.clear(contentMainBinding.box.id, ConstraintSet.START)
constraintSet.connect(
    contentMainBinding.box.id,
    ConstraintSet.BOTTOM,
    contentMainBinding.BottomBorder.id,
    ConstraintSet.TOP,
)
constraintSet.connect(
    contentMainBinding.box.id,
    ConstraintSet.RIGHT,
    contentMainBinding.RightBorder.id,
    ConstraintSet.LEFT,
)

constraintSet.applyTo(contentMainBinding.root)

approach 3:

contentMainBinding.placeholder.setContentId(box.id)

xml:
<androidx.constraintlayout.widget.Placeholder
    android:id="@+id/placeholder"
    android:layout_width="20dp"
    android:layout_height="30dp"
    app:layout_constraintRight_toLeftOf="@id/RightBorder"
    app:layout_constraintBottom_toTopOf="@id/BottomBorder" />