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"
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"
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.
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" />
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!
Related
If I have two textviews vertically aligned where either the one OR the other could contain the longer text, how can I vertically align these so their background image LOOKS like it is one complete background for both TextViews (so one big box no matter which of those views contains the longer text)
Reason is that I use the textviews on top of a picture but need to shadow them in case the picture has the same color as the textview
UPDATE:
As the comments suggested I now used a linear layout like this, but now there is a very small gap between the textviews that wasn't there with ConstraintLayout. Any idea how to fix?
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginEnd="10dp">
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_overlay_top"
android:paddingStart="6dp"
android:paddingTop="6dp"
android:paddingEnd="6dp"
android:text="TextView1"
android:textColor="?colorOnPrimary"
android:textSize="13sp"/>
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:background="#drawable/bg_overlay_bottom"
android:paddingStart="6dp"
android:paddingEnd="6dp"
android:paddingBottom="6dp"
android:text="TextVie2 long"
android:textColor="?attr/colorOnPrimary"
android:textSize="16sp"
android:textStyle="bold"/>
</androidx.appcompat.widget.LinearLayoutCompat>
UPDATE 2
I now used a complete image as background of the linear layout, but sadly this solution does not work either, the linear layout only constraints to the lower text view, which means if the lower is shorter then the upper, the upper one gets truncated
Here is how you can get the two TextViews to have the same width regardless of which view has the longer text.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:text="Here is some long, long text."
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/barrierEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_min="wrap" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="Bottom"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="#id/barrierEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintWidth_min="wrap" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrierEnd"
android:layout_width="0dp"
android:layout_height="0dp"
app:barrierDirection="end"
app:constraint_referenced_ids="textView1,textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
This solution was borrowed from here. I took a stab at explaining why it works here.
For one big blue background as you said, you can use a vertical LinearLayout as a container of both TextViews and set its background color to blue.
If you are using a vertical LinearLayout, you could set android:layout_width (of the TextViews) to "match_parent" instead of "wrap_content".
Edit: Into the outer vertical LinearLayout put an another vertical LinearLayout with android:layout_width="wrap_content" and the 2 TextViews inside with android:layout_width="match_parent"
If you're using constraint layout then
app:layout_constraintStart_toStartOf
would be working for you , also using baseline would be very useful too.
In a ConstraintLayout, I have 2 TextView's side-by-side, and I want the right one to wrap text when it becomes too long so that it stays on the right of the left TextView, and doesn't overflow the container. Here is the code I have now:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10sp">
...
<TextView
android:id="#+id/buildingTypeLabel"
style="#style/FormLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5sp"
android:paddingBottom="5sp"
android:text="#string/reference_view_building_type"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/dateLabel"
tools:text="Type de bâtiment" />
<TextView
android:id="#+id/buildingType"
style="#style/FormValue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginStart="5dp"
android:layout_weight="1"
android:ellipsize="none"
android:maxLines="100"
android:scrollHorizontally="false"
app:layout_constraintBaseline_toBaselineOf="#id/buildingTypeLabel"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/buildingTypeLabel"
app:layout_constraintTop_toBottomOf="#id/date"
tools:text="Bâtiments gouvernementaux" />
...
</androidx.constraintlayout.widget.ConstraintLayout>
But instead of putting text text on 2 lines in the right TextView, it overflows on the right:
Note that I have tried to add app:layout_constrainedWidth="true" to the right TextView, but it doesn't change anything.
How can I strictly enforce the right and left contraints of that TextView and have it wrap text to have a smaller width when needed?
Try to change to layout_constraintEnd_toEndOf instead layout_constraintRight_toRightOf :)
Use ellipsize= "end" for the textview on the right that is extending text outside of the device screen.
Use Guidelines
Guidelines are part of the constraint layout api.
Documentation are here ->
https://developer.android.com/reference/androidx/constraintlayout/widget/Guideline
This is how you can define your guideline in xml.
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_start"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_begin="?dialogPreferredPadding" />
Guidlines can act as a differentiating factor between the two text views that you want to segregate .
Refer to this stackoverflow answer for much better understanding
What is difference between Barrier and Guideline in Constraint Layout?
The above link will also introduce you to barriers which is also part of constraint layout api which can also help you solve the above issue.
Below you can find the solution:
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10sp">
<TextView
android:id="#+id/buildingTypeLabel"
style="#style/FormLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingTop="5sp"
android:paddingBottom="5sp"
android:text="#string/reference_view_building_type"
app:layout_constraintEnd_toStartOf="#id/buildingType"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/dateLabel"
tools:text="Type de bâtiment" />
<TextView
android:id="#+id/buildingType"
style="#style/FormValue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:maxLines="100"
app:layout_constraintBaseline_toBaselineOf="#id/buildingTypeLabel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/buildingTypeLabel"
app:layout_constraintTop_toBottomOf="#id/date"
tools:text="Bâtiments gouvernementaux\n\nlef,le,flelf,le,fle," />
</androidx.constraintlayout.widget.ConstraintLayout>
I have an arbitrary length textview+icon (icon+text) that needs centering on the screen. On the same row, there is a button aligned to the right side of the screen. (X)
| icon+text | X |
Using a LinearLayout I can center it with the view, but the button on the right shifts it left.
With a relative layout, I can achieve what I want but if the text is too long the button overlaps the text.
What's the right way to do this? I haven't used constraintLayout before, would that solve it?
I suggest you to use a constraint layout,
Example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".YourActivity">
<TextView
android:id="#+id/my_text_view"
android:text="My Long Text That must not overlap the button"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/my_btn"
app:layout_constraintTop_toTopOf="#+id/my_btn"
app:layout_constraintBottom_toBottomOf="#+id/my_btn"/>
<Button
android:id="#+id/my_btn"
android:layout_marginTop="16dp"
android:text="My Nice Button "
android:layout_marginEnd="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/my_text_view"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>
Example Output:
You can set it like this,
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:drawableLeft="#mipmap/ic_launcher"
android:text="Click" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:gravity="center"
android:text="TextView" />
</LinearLayout>
just use a Relative Layout.
Center your Textview
and put toRightOf=txtViewsName on the button.
//UPDATED Forcing Widths in DP to ensure text is always centered and never overlaps button.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#mipmap/ic_launcher"
android:maxWidth="230dp"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:text="My text to show test abcdefghyijkldkf here" />
<Button
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button" />
</RelativeLayout>
You will need to adjust the button width and textview maxwidth to match your design, and confirm on preview all resolutions, but dp should cover you pretty well in this case.
NOTE*
This simply answers your issue, but does not do any funny behavior, i.e. if text grows too much ignore center command and start moving to the left, this does not do that. If that is your desire, please update your question.
//Centering Text in left view and using weight to ensure text area takes proper percentage of the space (based on your comments, not the layout you are looking for, but I'll leave it in case it helps someone else).
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:drawableLeft="#mipmap/ic_launcher"
android:gravity="center"
android:text="My text to show here" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="Button" />
</LinearLayout>
for best practice i think ConstraintLayout is the best solution for designing and yes of course it helps you for what are you looking for.
for more info check this Build a Responsive UI with ConstraintLayout and this
ConstraintLayout.
Since your ImageButton on right has a fixed width (let's say 40dp for the purpose of this example) you can achieve the desired result by adding a margin of the same width at the end of your TextView to ensure that they're not overlapping. To keep the TextView centered on the screen you have to add the same margin at the start as well:
<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">
<TextView
android:id="#+id/textview"
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/button"
android:layout_width="40dp"
android:layout_height="40dp"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/textview"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
If you want to center the text within the TextView use android:gravity="center":
If the ImageButton's width was wrap_content then this approach wouldn't work, because there is no way to constraint the end of the TextView both to the end of the parent (so it's centered on the screen) and to the start of the ImageButton (so they don't overlap if the text gets long) at the same time.
In the end I ended up using RelativeLayout per Sam's suggestion with maxWidth and margin set on the TextView.
I'm designing my constraint layout using XML.
I have an OpenSansBTextView and I need my text to be centered in it. It's centered horizontally, and not centered vertically. I don't know why. Here is my xml file. Can you see my mistake?
<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="match_parent"
android:background="#color/colorAccent"
android:id="#+id/dashboard">
<com.doyousonder.android.utils.RochesterTextView
android:id="#+id/YourActivity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginStart="25dp"
app:layout_constraintVertical_bias="0.34"
android:text="#string/YourActivity"
android:textColor="#color/colorPrimaryMoreDark"
android:textSize="23sp" />
<com.doyousonder.android.utils.OpenSansRTextView
android:id="#+id/YouVoted"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/YourActivity"
android:layout_marginTop="15dp"
android:layout_marginStart="20dp"
android:text="#string/YouVoted"
android:textColor="#color/colorPrimaryMoreDark"
android:textSize="15sp" />
<com.doyousonder.android.utils.OpenSansSBTextView
android:id="#+id/VoteCount"
android:layout_width="29dp"
android:layout_height="35dp"
app:layout_constraintStart_toEndOf="#+id/YouVoted"
app:layout_constraintTop_toTopOf="#+id/YouVoted"
app:layout_constraintBottom_toBottomOf="#+id/YouVoted"
android:layout_marginStart="5dp"
android:background="#drawable/more_curved_edge_button_button_primarycolor_background"
android:gravity="center"
android:text="1"
android:textAlignment="center"
android:textSize="25sp" />
You haven't provided much code to work with, i.e what is the youVoted variable. I'm assuming youvoted is your parent layout
I think you're issue comes with how you set up your constraints. Try these instead
...other layout info
app:layout_constraintBottom_toBottomOf="#+id/YouVoted"
app:layout_constraintStart_toStartOf="#+id/YouVoted"
app:layout_constraintTop_toTopOf="#+id/YouVoted"
app:layout_constraintEnd_toEndOf="#+id/YouVoted"/>
Explanation
I believe the mistake is you made is stating your textview should start at the end of your youvoted layout instead of saying it should start at the start of the youvoted layout.
change app:layout_constraintStart_toEndOf="#+id/YouVoted" to app:layout_constraintStart_toStartOf="#+id/YouVoted"
also add an end constraint.
app:layout_constraintEnd_toEndOf="#+id/YouVoted"
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:
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"/>
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"/>
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.
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.