Search code examples
androidandroid-layoutandroid-constraintlayout

TextView going out of screen with constraintLayout


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"

enter image description here


Solution

  • 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"