TextView inside ConstraintLayout clips text and layout_margin cant not be shown correctly

Question

I use : compile 'com.android.support.constraint:constraint-layout:1.0.2'

The main problems are：

layout_margin can't be shown correctly;
child textview's text is clipped.

Details as below:

This is my xml:

<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="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/darker_gray"
    android:padding="8dp">

    <ImageView
        android:id="@+id/reviewer_avatar"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="@color/colorAccent"
        android:contentDescription="@string/avatar"
        android:layout_margin="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/reviewer_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/reviewer_name"
        android:textSize="16sp"
        app:layout_constraintBottom_toTopOf="@+id/comment_floor"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toTopOf="@+id/reviewer_avatar"
        app:layout_constraintVertical_chainStyle="packed"/>

    <TextView
        android:id="@+id/comment_floor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/reviewer_floor_text"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/reviewer_avatar"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_name"/>

    <TextView
        android:id="@+id/comment_period"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6dp"
        android:text="@string/comment_period_text"
        android:textSize="12sp"
        app:layout_constraintLeft_toRightOf="@+id/comment_floor"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_name"/>

    <TextView
        android:id="@+id/comment_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/large_text"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"/>
</android.support.constraint.ConstraintLayout>

This is my screenshot:

https://stackoverflow.com/questions/1292575/android-textview-justify-text — Amit Vaghela, Jun 15 '17 at 10:00
@AmitVaghela Thank you for answer. But it is not solve the problem — zonda, Jun 15 '17 at 10:08

Pavan · Answer 1 · 2017-06-19T05:36:37.703

Here are mainly two problems

You missing to set right constraint for view with parent
There was an bug in ConstraintLayout with wrap_content which is resolved , now you have to use match_constraint(0dp) and layout_constraintWidth_default property to solve this issue add below two properties to largetext view

android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
app:layout_constraintRight_toRightOf="parent"

So your largetext view would be like

<TextView
        android:id="@+id/comment_content"
        android:layout_width="0dp"
        app:layout_constraintWidth_default="wrap"
        android:layout_height="wrap_content"
        android:text="@string/large_text"
        android:textSize="16sp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"/>

`app:layout_constraintWidth_default="wrap"` is now deprecated, we now can use `app:layout_constrainedWidth="true"`. You still should keep `android:layout_width="0dp"` to match constraint and have constraints on both sides. — Alexis R, Jan 22 '20 at 16:30

zonda · Accepted Answer · 2017-06-15T11:41:38.607

I think I found the answer to child textview's text is clipped.

I change it：

<TextView
    android:id="@+id/comment_content"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/large_text"
    android:textSize="16sp"
    app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
    app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"/>

to

<TextView
        android:id="@+id/comment_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/large_text"
        android:textSize="16sp"
        app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"
        app:layout_constraintRight_toRightOf="parent"/>

This would solve the problem !

But this way, TextView can't scalable，only fill width.

Finnaly, the better answer:

  <TextView
        android:id="@+id/comment_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/reviewer_name"
        android:textSize="16sp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintLeft_toLeftOf="@+id/reviewer_name"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/reviewer_avatar"
        app:layout_constraintWidth_default="wrap"/>

`app:layout_constraintWidth_default="wrap"` is now deprecated, we now can use `app:layout_constrainedWidth="true"`. You still should keep `android:layout_width="0dp"` to match constraint and have constraints on both sides. — Alexis R, Jan 22 '20 at 16:29

score 0 · Answer 3 · answered Jun 15 '17 at 11:07

layout_margin can't be shown correctly; - margins space is outside view's bounds. app:layout_constraintLeft_toRightOf="@+id/reviewer_avatar" means that reviewer_name is constrained to the right side of reviewer_avatar not including margins. Set android:layout_marginLeft="8dp" of reviewer_name, comment_floor and comment_content.
child textview's text is clipped. - width of the comment_content is equal to the width of your ConstraintLayout, but the comment_content is constrained to the right side of reviewer_avatar. Therefore the right side of the comment_content goes beyond the boundaries of the ConstraintLayout, i.e. is clipped. Set the specific width of the comment_content for different screen sizes.

score -1 · Answer 4 · answered Jun 15 '17 at 23:50

-1

I believe this is a resize bug that should be fixed in 1.1 beta 1 (see https://androidstudio.googleblog.com/2017/05/constraintlayout-110-beta-1-release.html to install it) -- please try it and see if that's it.

answered Jun 15 '17 at 23:50

Nicolas Roard

8,339
1
28
30

I try to 1.1 beta1, but it's doesn't solve the problem. layout_width still can't use wrap_content – zonda Jun 16 '17 at 05:59

TextView inside ConstraintLayout clips text and layout_margin cant not be shown correctly

4 Answers4