CODEWITHSUNDEEP
androidxmlandroid-constraintlayout
Andrey Aleev
Andrey Aleev

Reputation: 331

View content gets out off bounds in ConstraintLayout

I need to align two TextViews in a row with dynamic content and therefore width. ConstraintLayout works good until text starts wrapping into multiple lines. The left view shifts to the left (goes beyond the left border) on the width of the second view. How to avoid that? Is it some kind of bug or I am forgetting smth using ConstraintLayout incorrectly?

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="textView2 Lorem ipsum "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap" />


    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:text="textView1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        app:layout_constraintEnd_toStartOf="@+id/textView2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap" />

</android.support.constraint.ConstraintLayout>

Shifted view image:

Shifted image

Upvotes: 1

Views: 1427

Answers (2)

j2emanue
j2emanue

Reputation: 62549

you could have just tied it to a guideline that starts from the end of the first textview. both text views could have had there ends tied to a guideline.

 <androidx.constraintlayout.widget.Guideline
    android:id="@+id/glMiddle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="56dp" />

tie tv1 end to this and tie tv2's start to this

Upvotes: 0

Cheticamp
Cheticamp

Reputation: 62841

Change layout_constraintLeft_toLeftOf to layout_constraintStart_toStartOf and layout_constraintRight_toRightOf to layout_constraintEnd_toEndOf and you will get something that looks like the following:

enter image description here

This assumes ConstraintLayout version 1.1.0 although it may not matter.

Upvotes: 1

Related Questions