How can I set one/two TextViews to the height of another TextView at its side?

Question

Hi I have a layout with three TextViews. One of them on the left (numPreguntaTv) and the others two on the right (enunciadoPregTv and tipoPregItemTv), one above of the other.

I want the numPreguntaTv to have the height of two lines, so when enunciadoPregTv has two lines, it must has the same height of numPreguntaTv on the left. Also, if enunciadoPregTv has only one line, then tipoPregItemTv must fit in the second line.

I would like to have them align perfectly (or almost).

Right now they are like this:

If enunciadoPregTv has two or more lines, its fine, it seems to have the same height than numPreguntaTv. However if enunciadoPregTv only has one line, then tipoPregItemTv doesn't fit the second line properly. It is a bit below.

How can I accomplish my idea?

This is my layout:

<?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">

    <TextView
        android:id="@+id/numPreguntaTv"
        android:layout_width="52dp"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-smallcaps"
        android:text="10"
        android:textAlignment="textEnd"
        android:textColor="@color/azul"
        android:textSize="48sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/enunciadoPregTv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp"
        android:justificationMode="inter_word"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in finibus purus. Curabitur ex nisi, aliquam nec turpis quis, mollis consequat diam. In felis nibh, fringilla nec mi eu, tempus iaculis nulla."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/numPreguntaTv"
        app:layout_constraintTop_toTopOf="@+id/numPreguntaTv" />

    <TextView
        android:id="@+id/tipoPregItemTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="56dp"
        android:text="Verdadero o falso"
        android:textStyle="italic"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/enunciadoPregTv" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/borrarPregButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginEnd="8dp"
        app:backgroundTint="@color/rojo"
        app:icon="@drawable/ic_baseline_delete_24"
        app:iconGravity="textStart"
        app:iconPadding="0dp"
        app:layout_constraintEnd_toStartOf="@+id/editarPregButton"
        app:layout_constraintTop_toBottomOf="@+id/tipoPregItemTv" />

    <Button
        android:id="@+id/editarPregButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/editar_pregunta_button"
        app:icon="@drawable/ic_baseline_edit_24"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tipoPregItemTv" />
</androidx.constraintlayout.widget.ConstraintLayout>

Thank you!!

Cheticamp · Accepted Answer · 2021-05-11T03:15:39.617

I think that your layout seems to (mostly) work for you because of your setup. When I loaded your layout in Android Studio, this is what I got:

As you can see, things look a little different.

You can align a TextView baseline to another TextView's baseline to achieve what you want with app:layout_constraintBaseline_toBaselineOf="@id/otherView". There are two catches:

A multi-line TextView reports the baseline of its first line but you will want the baseline of the second line.
If the the top-right TextView has a single line, you will want to tie the baseline of the top-left view to the baseline of the bottom TextView. This will mean a change to the constraints.

Issue #1 can be handled with something like this. For issue #2, you will need to detect when the top-right TextView has a single line and change the constraints of the top-left view to the baseline of the bottom view. You can do this with an ViewTreeObserver.OnGlobalLayoutListener. You can change constraints like this.

Of course, once you have a layout listener involved, you could use the layout listener to add margin to the top of the top-left TextView to make it align to the baseline of the second line of the top-right view. This would be for issue #1 and is probably how I would approach it.

How can I set one/two TextViews to the height of another TextView at its side?

1 Answers1