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.
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)