Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 381
Jake Moritz Avatar asked Oct 15 '17 13:10

Jake Moritz


People also ask

What is Layer in Constraint layout?

↳ androidx.constraintlayout.helper.widget.Layer. Layer adds the ability to move and rotate a group of views as if they were contained in a viewGroup Added in 2.0 Methods such as setRotation(float) rotate all views about a common center.

What is the purpose of constraint layout?

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way. Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread). As such, we are planning on enriching its API and capabilities over time.

What does 0dp mean in constraint layout?

for the children of ConstraintLayout if you have set constraints then the 0dp is for match_constraint (take full width, or full height) Using 0dp, which is the equivalent of "MATCH_CONSTRAINT" https://developer.android.com/reference/android/support/constraint/ConstraintLayout.

Should you use ConstraintLayout?

Well, each layout has its own benefits but when it comes to complex, dynamic and responsive views you should always choose Constraint Layout. Constraint Layout was added to Android Studio 2.2 in 2016 and it became the default layout of Android Studio because of its simplicity and ease of creating complex layouts.


1 Answers

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?

like image 60
Cheticamp Avatar answered Oct 14 '22 13:10

Cheticamp