TextView going out of screen with constraintLayout

Question

I am using ConstraintLayout to create below xml in my application. As you can see my first item is fine, But in the second one, some parts of my textView are not on the screen!

This is my XML code:

<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/ly_user"
        android:padding="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <ImageView
            app:layout_constraintRight_toRightOf="parent"
            android:id="@+id/im_user_icon"
            android:layout_width="@dimen/default_message_icon_size"
            android:layout_height="@dimen/default_message_icon_size"
            android:src="@drawable/user_pacific"/>

    <ImageView
            app:layout_constraintTop_toBottomOf="@+id/im_user_icon"
            app:layout_constraintRight_toLeftOf="@+id/im_user_icon"
            android:id="@+id/im_user_arrow"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/arrow_bg1"/>

    <View
            android:id="@+id/view_user_guidLine"
            android:layout_width="1dp"
            android:layout_height="0dp"
            app:layout_constraintLeft_toLeftOf="@id/im_user_arrow"
            app:layout_constraintRight_toRightOf="@id/im_user_arrow"/>

    <TextView
            app:layout_constraintTop_toBottomOf="@+id/im_user_icon"
            app:layout_constraintRight_toLeftOf="@+id/view_user_guidLine"
            android:id="@+id/tv_user_message"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:padding="8dp"
            android:minWidth="@dimen/default_message_textarea_width"
            android:minHeight="@dimen/default_message_textarea_height"
            android:background="@drawable/bg_right_text"
            android:textColor="@android:color/white"/>


</android.support.constraint.ConstraintLayout>

I Know I can fix this problem to adding below line to the textView , But I need my textView be wrapContent .

 app:layout_constraintLeft_toLeftOf="parent"

Answer 1

You can set your TextView's width to wrap_content , but to prevent it from expanding outside of screen you need to add the left constraint as well and use app:layout_constrainedWidth="true" to enforce constraints.

Now, to make the TextView stick to the right, you need to add app:layout_constraintHorizontal_bias="1" , which will align it to its right constraint.

So all in all, these are the changes needed for the TextView :

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="1"
android:layout_width="wrap_content"

Answer 2

Add these following line in your code in your TextView

app:layout_constraintWidth_percent="0.6"

first line layout_constraintWidth_percent is 60 percent of your phone screen width you can change it according to your need.

Answer 3

Accepted answered works but on my side I use android:layout_width="0dp" because my TextView is in the middle of two elements.

<TextView
        android:id="@+id/my_id_text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/long_text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/second_vertical_divider_view"
        app:layout_constraintStart_toEndOf="@+id/first_vertical_divider_view"
        app:layout_constraintTop_toTopOf="parent" />

Answer 4

Accepted answer didn't helped in my case. Alternative solution can look like that:

<ConstraintLayout>

    <TextView
         android:id="@+id/title"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:ellipsize="end"
         android:maxLines="2"
         app:layout_constraintEnd_toStartOf="@+id/option_info"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_weight="1"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintWidth_max="wrap" />

    <ImageView
         android:id="@+id/option_info"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/ic_info"
         app:layout_constraintBottom_toBottomOf="@+id/title"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@+id/title"
         app:layout_constraintTop_toTopOf="@+id/title" />

</ConstraintLayout>

The idea is to prevent one view pushing another while expanding by creating a chain and add some constraint params to hold influenced view in view's border. Hope it still will help somebody!