CODEWITHSUNDEEP
androidandroid-constraintlayout
WHOATEMYNOODLES
WHOATEMYNOODLES

Reputation: 897

ConstraintLayout - wrap_content + toRightOf layout issue

I am using constraint layout and I'm trying to make the textview to the right of the guideline and also wrapping its width. However the textview is not using the constraint "app:layout_constraintLeft_toRightOf="@id/guideline1" for some reason

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="@+id/chat_model"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="15dp"
    android:layout_marginTop="15dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".25" />

    <TextView
        android:id="@+id/texview_chatmodel_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bubble_user"
        android:padding="8dp"
        android:text="Username: aaaaaaaa aaaaa aaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        android:textColor="@color/colorBlack"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/guideline1"
        android:gravity="right"/>

</android.support.constraint.ConstraintLayout>

It works when I set the width of the textview to 0

android:layout_width="0dp"

However this causes the issue where short messages extend all the way left to the guideline, creating empty space.

enter image description here

How can I get it so that the message layout is to the right of the guideline, and also wrapping its content?

This is what I want:

enter image description here

and I used wrap_width and horizontal_bias to achieve it

<TextView
      android:id="@+id/textview_chatmodel_message"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/bubble_user"
      android:padding="8dp"
      android:text="Username: aaaaaaaa "
      android:textColor="@color/colorBlack"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintLeft_toRightOf="@id/guideline1"
      app:layout_constraintHorizontal_bias="1"
      android:gravity="right"/>

however this causes the issue of not obeying the Left_toRightOf guideline constraint:

enter image description here

How can I get it so that the message layout is to the right of the guideline, and also wrapping its content?

Upvotes: 2

Views: 2656

Answers (2)

Zohaib Amir
Zohaib Amir

Reputation: 3562

If the view is set to wrap_content it will ignore the constraints when its size exceeds available space. In order to avoid this, you have to add this attribute:

app:layout_constrainedWidth="true"

This was added in ConstraintLayout version 1.1, in earlier versions you need to set the width to match_constraint or 0dp to produce similar behavior.

WRAP_CONTENT : enforcing constraints (Added in 1.1)
If a dimension is set to WRAP_CONTENT, in versions before 1.1 they will be treated as a literal dimension -- meaning, constraints will not limit the resulting dimension. While in general this is enough (and faster), in some situations, you might want to use WRAP_CONTENT, yet keep enforcing constraints to limit the resulting dimension. In that case, you can add one of the corresponding attribute:

app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”

Upvotes: 20

Mathias Kirkegaard
Mathias Kirkegaard

Reputation: 481

One solution could be to wrap the textView inside a viewgroup - and then the viewgroup (e.g. a relative layout with the text right aligned) would have same constraints as the textView currently and 0dp width?... I know it demands an extra view which is kind of a bummer.

Upvotes: 0

Related Questions