Maksim Dmitriev
Maksim Dmitriev

Reputation: 6209

layout_constraintLeft_toLeftOf and layout_constraintRight_toRightOf don't make the view be as wide as the constraint

There are two widgets (TextViews in my example). The first widget has a fixed width, and the second widget should be as wide as the first one.

Consider the following code snippets:

RelativeLayout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="192dp"
        android:layout_height="wrap_content"
        android:background="#ccc"
        android:text="Short message" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/textView"
        android:layout_alignRight="@id/textView"
        android:layout_below="@id/textView"
        android:layout_marginTop="16dp"
        android:background="#aaa"
        android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book" />
</RelativeLayout>

enter image description here

ConstraintLayout.

<?xml version="1.0" encoding="utf-8"?>
<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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="192dp"
        android:layout_height="wrap_content"
        android:background="#ccc"
        android:text="Short message" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        android:background="#aaa"
        android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"
        app:layout_constraintLeft_toLeftOf="@+id/textView"
        app:layout_constraintRight_toRightOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintHorizontal_bias="0.49" />
</android.support.constraint.ConstraintLayout>

enter image description here

As you can see in the second picture, the second widget is not as wide as the first widget. Why? I thought app:layout_constraintLeft_toLeftOf="@+id/textView" app:layout_constraintRight_toRightOf="@+id/textView" would do the trick.

Upvotes: 0

Views: 3510

Answers (2)

Yanbin Hu
Yanbin Hu

Reputation: 537

Change your second TextView as follows:

<TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:background="#aaa"
        android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"
        app:layout_constraintLeft_toLeftOf="@+id/textView"
        app:layout_constraintRight_toRightOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintHorizontal_bias="0.486" />

set layout_width=0 matches the constraints, and you should not set the margin if you want to align the both textView

android:layout_width="0dp" 

Upvotes: 4

artem_p
artem_p

Reputation: 316

Try set android:layout_width to 0dp and app:layout_constraintWidth_default="wrap". Also remove left and right margins.

Upvotes: 2

Related Questions