Menu
I am trying to align two TextViews horizontally like so:
My current layout works fine when Text A is short. However things break when a long string is set for textA, like the following. Text A and Text B are overlapping even though the end of Text A is constrained to the start of Text B.
Here is how it should look when Text A is very long.
Current XML
<?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"
android:padding="8dp">
<TextView
android:id="@+id/textA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rounded_gray_background"
android:ellipsize="end"
android:lines="1"
android:padding="4dp"
android:text="Text A"
app:layout_constraintEnd_toStartOf="@id/textB"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:text="Text B"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
750
and you can right click in design mode and choose center. Show activity on this post. You can use layout_constraintCircle for center view inside ConstraintLayout . with constraintCircle to parent and zero radius you can make your view be center of parent.
Click Guidelines in the toolbar, and then click Add Vertical Barrier or Add Horizontal Barrier. In the Component Tree window, select the views you want inside the barrier and drag them into the barrier component. Select the barrier from the Component Tree, open the Attributes window, and then set the barrierDirection.
You can create linear layouts now with ConstraintLayout by constraining the sides of each element with each other. The quick way of creating these layouts is to select all the views together and right click to center horizontally or vertically.
I am quite new to Android development and today I wondered what the 'Vertical Bias' respectively the 'Horizontal Bias' is used for in the 'ConstraintLayout'. Bias, in terms of ConstraintLayout , means "if there is extra room, slide the widget in this direction along the axis".
You need to add the app:layout_constrainedWidth="true" attribute to your textA TextView to enforce constraints while having the width set to wrap_content:
<?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"
android:padding="8dp">
<TextView
android:id="@+id/textA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rounded_gray_background"
android:ellipsize="end"
android:lines="1"
android:padding="4dp"
android:text="Text A"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="@id/textB"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:text="Text B"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Try this :
<?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"
android:padding="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rounded_gray_background"
android:ellipsize="end"
android:lines="1"
android:padding="4dp"
android:text="Text A"
app:layout_constraintEnd_toStartOf="@id/textB"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/textB"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="4dp"
android:text="Text B"
android:layout_toRightOf="@id/textA"/>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
