Issue
My layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp">
<TextView
android:id="@+id/crime_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Crime Title" />
<TextView
android:id="@+id/crime_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/crime_title"
android:text="Crime Date" />
<Button
android:id="@+id/crime_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@id/crime_title" />
</RelativeLayout>
The output:
As you can see the button goes beyond the border that is composed by these two TextViews, but i want it to accurately match it. I also tried to do it with LinearLayout that have two LinearLayouts instead of RelativeLayout but I didn't succeed. So how can i do it ?
Solution
ConstraintLayout is a good option because it gives us much more precise control.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_red_light"
android:padding="8dp">
<TextView
android:id="@+id/crime_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintEnd_toStartOf="@+id/crime_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/crime_button"
tools:text="Crime Title Crime Title Crime Title Crime Title" />
<TextView
android:id="@+id/crime_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="@+id/crime_button"
app:layout_constraintEnd_toStartOf="@+id/crime_button"
app:layout_constraintStart_toStartOf="parent"
tools:text="Crime Date" />
<com.google.android.material.button.MaterialButton
android:id="@+id/crime_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Crime Button" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output will be:
In this case, the first TextView is linked to the top of the Button, and the second TextView is linked to the bottom of the Button. But it will only have a nice result if we know the fixed height of all the components, so it's ideal to put a maximum of lines in the TextView, as I did in the example code itself.
Another example allowing multiple lines for the TextView:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp">
<TextView
android:id="@+id/crime_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/crime_date"
app:layout_constraintEnd_toStartOf="@+id/crime_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Crime Title Crime Title Crime Title Crime Title" />
<TextView
android:id="@+id/crime_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/crime_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/crime_title"
tools:text="Crime Date Crime Date Crime Date Crime Date" />
<com.google.android.material.button.MaterialButton
android:id="@+id/crime_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Crime Button" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output will be:
In this second case, the TextViews are linked only to the parent, so the ConstraintLayout will scale its size, and as the Button is also linked to the parent, it will stay in the middle.
There are still other possible scenarios, where it could be necessary to use a great resource of ConstraintLayout called chainStyle, if you still need something more specific.
Answered By - Thales Isidoro
Answer Checked By - Mildred Charles (JavaFixing Admin)
