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

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>

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.

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.