Multi-line text-views alignment to their baseline (ConstraintLayout Android Studio)

Question

I have three TextViews \"hi\", \"x\" and \"Hello World\" which I would like to align in the bottom of the Hello World text (ie hi_x_World)

Answer 1

Use Guideline

Utility class representing a Guideline helper object for ConstraintLayout. Helper objects are not displayed on device (they are marked as View.GONE) and are only used for layout purposes. They only work within a ConstraintLayout.

A Guideline can be either horizontal or vertical:

a) Vertical Guidelines have a width of zero and the height of their ConstraintLayout parent

b) Horizontal Guidelines have a height of zero and the width of their ConstraintLayout parent

Widgets can then be constrained to a Guideline, allowing multiple widgets to be positioned easily from one Guideline, or allowing reactive layout behavior by using percent positioning.

Example

Code:-

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

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".4"
        />

    <TextView
        android:id="@+id/textViewHi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="50dp"
        android:text="hi"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline" />
    <TextView
        android:id="@+id/textViewX"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="@+id/textViewHi"
        android:layout_marginLeft="50dp"
        android:text="x"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline" />

    <TextView
        android:id="@+id/textViewHelloWorld"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="@+id/textViewX"
        android:layout_marginLeft="50dp"
        android:text="Hello World"
        android:textSize="45sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

You can use:

app:layout_constraintBottom_toBottomOf="@+id/helloworldtextid"

Also, don't forget to set the height to wrap_content so that the bottom of the TextViews line up to the bottom of the "Hello World" even when it wraps to two lines or more.

If you want it centered to "Hello World" when it is multi-line, consider adding

app:layout_constraintTop_toTopOf="@+id/helloworldtextid"

along with the bottom one. It will center the text to the multi-lined "Hello World" vertically.

Answer 3

Second update: This is another way of looking at the first solution taken from this Stack Overflow answer that will also work with ConstraintLayout. This solution uses a custom TextView. The custom TextView returns the baseline of the last line of text in the TextView from the getBaseline() function instead of the baseline of the first line which is the default action. This is a nice, clean solution (IMO) that takes into account multi-line TextViews but also gravity, etc.

Kotlin version of BaselineLastLineTextView

class BaselineLastLineTextView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : AppCompatTextView(context, attrs) {

    override fun getBaseline(): Int {
        val layout = layout ?: return super.getBaseline()
        val baselineOffset = super.getBaseline() - layout.getLineBaseline(0)
        return baselineOffset + layout.getLineBaseline(layout.lineCount - 1)
    }
}

---

First update: This is an update to my answer below which is still a valid solution (IMO). This is an alternate approach that does not involve any Java/Kotlin code and can be accomplished just using XML.

Create an invisible wrap_content TextView that has the same font size as the "Hello World!" TextView. (You may also need to consider padding and margins depending upon the actual layout.) Constrain this new view to the bottom of "Hello World!", make it invisible and set the contents to something short that is guaranteed to occupy just one line. This will give you a target view that has the same base line as the last line of the "Hello World!" view.

Constrain the base lines of "hi" and "x" to the new invisible view. All views will now share the same base line and without coding.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/hiddenView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:textSize="50sp"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="@id/helloView"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/hiView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hi"
        android:textSize="46sp"
        app:layout_constraintBaseline_toBaselineOf="@id/hiddenView"
        app:layout_constraintEnd_toStartOf="@+id/xView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/helloView" />

    <TextView
        android:id="@+id/xView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="x"
        android:textSize="36sp"
        app:layout_constraintBaseline_toBaselineOf="@id/hiddenView"
        app:layout_constraintEnd_toStartOf="@+id/helloView"
        app:layout_constraintStart_toEndOf="@+id/hiView"
        app:layout_constraintTop_toTopOf="@id/helloView" />

    <TextView
        android:id="@+id/helloView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello\nWorld!"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/xView"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:onClick="onClick"
        android:text="Adjust Base Lines"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/helloView" />


</androidx.constraintlayout.widget.ConstraintLayout>

---

---

First answer: As noted in another answer, there is no way to do this just using ConstraintLayout constraints. You will need to resort to a programmatic solution.

Within each TextView is a StaticLayout that can reveal a bit about the typography of the text. By referring to the static layout, padding can be added to the appropriate views to make the base lines align.

In this demo, the three TextViews simply have their tops aligned. Initially, the views look like this:

When the button is clicked, the base line locations are calculated and padding is added to the tops of the "hi" and "x" TextViews.

Details will vary with the implementation, but this is the general technique.

MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    fun onClick(view: View) {
        button.isEnabled = false
        // Get the StaticLayout from the TextView
        val layout = helloView.layout

        // Get the base line location for last line of Hello World! TextView, "hi" and "x"
        val helloBaseLIne = layout.getLineBaseline(layout.lineCount - 1)
        val hiBaseLine = hiView.layout.getLineBaseline(0)
        val xBaseLine = xView.layout.getLineBaseline(0)
        
        // Shift "hi" and "x" down so base lines match that of hello world!
        hiView.updatePadding(top = helloBaseLIne - hiBaseLine)
        xView.updatePadding(top = helloBaseLIne - xBaseLine)
    }
}

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:id="@+id/layout"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/hiView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hi"
        android:textSize="46sp"
        app:layout_constraintTop_toTopOf="@id/helloView"
        app:layout_constraintEnd_toStartOf="@+id/xView"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/xView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="x"
        android:textSize="36sp"
        app:layout_constraintTop_toTopOf="@id/helloView"
        app:layout_constraintEnd_toStartOf="@+id/helloView"
        app:layout_constraintStart_toEndOf="@+id/hiView" />

    <TextView
        android:id="@+id/helloView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello\nWorld!"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/xView"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Adjust Base Lines"
        android:onClick="onClick"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/helloView" />


</androidx.constraintlayout.widget.ConstraintLayout>

Answer 4

AFAIK, there is no way to accomplish this task using ConstraintLayout as of today.

If you know the content of the "helloWorldTextView" in advance, you might wanna split the lines into several textViews and then use app:layout_constraintBaselineToBaselineOf.

I know this is a tricky workaround, but it's the only way that comes to mind.