Jake Moritz
Jake Moritz

Reputation: 873

Why are my TextViews wrapping early in a ConstraintLayout?

I have three TextViews in a ConstraintLayout, with margins to keep them all in the center of the screen. For some reason, the text in the TextViews are being wrapped early, even though there is still room remaining in the first line. Here is what the layout should look like in the preview:

enter image description here

And here is how it actually looks when running:

enter image description here

You can see the extra space on the right of the TextViews where the text can fit on the first line. Keep in mind both the device and the preview are for a Nexus 5X.

Here is the XML for this layout:

<android.support.constraint.ConstraintLayout
     android:id="@+id/bullet_holder"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_marginEnd="45dp"
     android:layout_marginLeft="45dp"
     android:layout_marginRight="45dp"
     android:layout_marginStart="45dp"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintLeft_toLeftOf="parent"
     app:layout_constraintRight_toRightOf="parent"
     app:layout_constraintTop_toBottomOf="@+id/setup_intro_subheader"
     app:layout_constraintVertical_bias="0.23000002">

     <ImageView
         android:id="@+id/setup_intro_bullet_first"
         style="@style/TextAppearance.AppCompat.Headline"
         android:layout_width="4dp"
         android:layout_height="4dp"
         android:baseline="7dp"
         android:src="@drawable/circle"
         app:layout_constraintBaseline_toBaselineOf="@+id/setup_intro_bullet_first_text"
         app:layout_constraintLeft_toLeftOf="parent" />

     <TextView
         android:id="@+id/setup_intro_bullet_first_text"
         style="@style/TextAppearance.AppCompat.Subhead"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginLeft="6dp"
         android:layout_marginStart="6dp"
         android:text="@string/setup_intro_benefit_notification"
         android:textColor="@android:color/white"
         app:layout_constraintLeft_toRightOf="@+id/setup_intro_bullet_first"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toTopOf="parent" />

     <ImageView
         android:id="@+id/setup_intro_bullet_second"
         style="@style/TextAppearance.AppCompat.Headline"
         android:layout_width="4dp"
         android:layout_height="4dp"
         android:baseline="7dp"
         android:src="@drawable/circle"
         app:layout_constraintBaseline_toBaselineOf="@+id/setup_intro_bullet_second_text"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toLeftOf="@+id/setup_intro_bullet_second_text" />

     <TextView
         android:id="@+id/setup_intro_bullet_second_text"
         style="@style/TextAppearance.AppCompat.Subhead"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginLeft="6dp"
         android:layout_marginStart="6dp"
         android:layout_marginTop="20dp"
         android:text="@string/setup_intro_benefit_backlog"
         android:textColor="@android:color/white"
         app:layout_constraintLeft_toRightOf="@+id/setup_intro_bullet_second"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/setup_intro_bullet_first_text" />

     <ImageView
         android:id="@+id/setup_intro_bullet_third"
         style="@style/TextAppearance.AppCompat.Headline"
         android:layout_width="4dp"
         android:layout_height="4dp"
         android:baseline="7dp"
         android:src="@drawable/circle"
         app:layout_constraintBaseline_toBaselineOf="@+id/setup_intro_bullet_third_text"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toLeftOf="@+id/setup_intro_bullet_third_text" />

     <TextView
         android:id="@+id/setup_intro_bullet_third_text"
         style="@style/TextAppearance.AppCompat.Subhead"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginLeft="6dp"
         android:layout_marginStart="6dp"
         android:layout_marginTop="20dp"
         android:text="@string/setup_intro_benefit_browser"
         android:textColor="@android:color/white"
         app:layout_constraintLeft_toRightOf="@+id/setup_intro_bullet_third"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/setup_intro_bullet_second_text" />

 </android.support.constraint.ConstraintLayout>

Upvotes: 6

Views: 534

Answers (1)

Cheticamp
Cheticamp

Reputation: 62841

For each of your text views, set the following:

    android:breakStrategy="simple"

See android:breakStrategy.

The deeper question here is why does the designer show something different from an emulator/device by default?

Upvotes: 5

Related Questions