TextView inside ConstraintLayout text clips and layout_margin are not displayed correctly
I am using: compile 'com.android.support.constraint: constraint-layout: 1.0.2'
Main problems:
- layout_margin cannot be rendered correctly;
- text text for children 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:
source to share
I think I have found an answer for text text for children.
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 will fix the problem!
But in this way the TextView cannot scale, but fill the width.
Finnaly, the best 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"/>
source to share
There are mainly two problems here
- You were unable to set the parental view restriction right
- In ConstraintLayout there was an error with wrap_content , now you have to use match_constraint (0dp) and layout_constraintWidth_default to solve this problem. add below two properties to large screen view
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
app:layout_constraintRight_toRightOf="parent"
Thus, your view of the large image will look 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"/>
source to share
-
layout_margin cannot be rendered correctly; - the field of fields is out of sight. app: layout_constraintLeft_toRightOf = "@ + id / reviewer_avatar" means the reviewer_name is limited to the right side of the reviewer_avatar, not including the fields. Set android: layout_marginLeft = "8dp" for reviewer_name, comment_floor and comment_content.
-
text text for children is clipped. - the width of the content_ comment is equal to the width of your ConstraintLayout object, but the comment_content is constrained to the right side of the reviewer_avatar. Therefore, the right side of comment_content is outside the ConstraintLayout bounds, that is, it is cut off. Set a specific width for the comment_content parameter for different screen sizes.
source to share
I believe this is a size 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 and see what it is.
source to share