Setting the constraintSet at runtime isn't aligning correctly against the parent's end

Question

I have the following code snippet in xml. Its just showing 3 different views. But at runtime I want to change the alignment. However, the textviewShopNow should align at the parent End. But there seems to be an gap. Which I can't seem to find a solution for. This snippet is contained in the following hierarchy

<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"
    android:id="@+id/layoutContent"
    android:layout_width="match_parent"
    android:layout_height="@dimen/home_banner_without_promo_height"
    android:layout_marginBottom="@dimen/margin_12dp"> 

Other views here

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/textViewProductTitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/margin_16dp"
    android:includeFontPadding="false"
    android:lineSpacingExtra="@dimen/home_banner_promo_line_spacing_extra_product_title"
    android:textSize="@dimen/home_banner_product_title_text_size"
    app:fontFamily="@font/central_sang_bleu_medium"
    app:layout_constraintBottom_toTopOf="@+id/textViewSubHeading"
    app:layout_constraintStart_toStartOf="parent"
    app:textAllCaps="true"
    tools:text="ESTEE LAUDER"
    tools:textColor="@color/white" />

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/textViewShopNow"
    style="@style/HeroBannerIButtonText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/margin_8dp"
    android:layout_marginHorizontal="@dimen/margin_16dp"
    app:layout_constraintBottom_toBottomOf="@+id/textViewSubHeading"
    app:layout_constraintEnd_toEndOf="parent"
    tools:text="@string/shop_now"
    tools:textColor="@color/white" />

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/textViewSubHeading"
    android:layout_width="@dimen/margin_0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/margin_16dp"
    android:layout_marginBottom="@dimen/margin_18dp"
    android:textSize="@dimen/home_banner_sub_heading_text_size"
    android:textStyle="bold"
    app:fontFamily="@font/cpn_regular"
    app:layout_constraintBottom_toTopOf="@id/promoCarousel"
    app:layout_constraintEnd_toStartOf="@+id/textViewShopNow"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_goneMarginEnd="@dimen/margin_16dp"
    app:lineHeight="15dp"
    tools:visibility="visible"
    tools:text="@string/home_banner_sub_heading_text"
    tools:textColor="@color/white" />

</androidx.constraintlayout.widget.ConstraintLayout>

And in my code I am setting the constraintSet like this:

        textViewSubHeading.isGone = true

        val constraintSet = ConstraintSet()
        constraintSet.connect(textViewShopNow.id, ConstraintSet.START, textViewProductTitle.id, ConstraintSet.END, 4)
        constraintSet.connect(textViewShopNow.id, ConstraintSet.BOTTOM, textViewProductTitle.id, ConstraintSet.BOTTOM)
        constraintSet.connect(textViewShopNow.id, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END, 0)
        constraintSet.constrainHeight(textViewShopNow.id, ConstraintSet.WRAP_CONTENT)
        constraintSet.constrainWidth(textViewShopNow.id, ConstraintSet.WRAP_CONTENT)

        constraintSet.applyTo(layoutContent)
        layoutContent.requestLayout()

As you can see from the image below. The WebLink is the textViewShopNow, but its not aligned with the parent's End.

Answer 1

You should clone the constraints of layoutContent first and then apply an additional constraint to the set. Also, requestLayout shouldn't be necessary.

The final result will be:

val constraintSet = ConstraintSet()
constraintSet.clone(layoutContent)
constraintSet.connect(textViewShopNow.id, ConstraintSet.START, textViewProductTitle.id, ConstraintSet.END, 4)
constraintSet.connect(textViewShopNow.id, ConstraintSet.BOTTOM, textViewProductTitle.id, ConstraintSet.BOTTOM)
constraintSet.connect(textViewShopNow.id, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END, 0)
constraintSet.connect(textViewProductTitle.id, ConstraintSet.END, textViewShopNow.id, ConstraintSet.START, 0)
constraintSet.constrainHeight(textViewShopNow.id, ConstraintSet.WRAP_CONTENT)
constraintSet.constrainWidth(textViewShopNow.id, ConstraintSet.WRAP_CONTENT)
constraintSet.applyTo(layoutContent)