How to align two TextViews with different font sizes in a ConstraintLayout

Question

In the image above I have two TextViews aligned using ConstraintLayout's layout_constraintBaseline_toBaselineOf property. But what I actually want is the the smaller TextView on the left is aligned with the middle (vertically) of the first line of the TextView on the right (rather than with its baseline). I.e. I want the TextView on the left to be about 2dp higher in this particular case.

My xml is:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="12dp"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    android:layout_marginStart="12dp"
    android:layout_marginTop="8dp"
    android:background="@android:color/white">

    <TextView
        android:id="@+id/tvElapsedTime"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="12dp"
        android:layout_marginRight="12dp"
        android:textColor="@color/grey"
        android:textSize="8sp"
        app:customTypeface="@string/my_typeface"
        app:layout_constraintBaseline_toBaselineOf="@+id/tvHeadline"
        app:layout_constraintEnd_toEndOf="@id/headlineStart"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@id/headlineStart"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="3 min ago" />

    <android.support.constraint.Guideline
        android:id="@+id/headlineStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.2" />

     <TextView
        android:id="@+id/tvHeadline"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="14sp"
        app:customTypeface="@string/my_bold_typeface"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toRightOf="@id/headlineStart"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toEndOf="@id/headlineStart"
        tools:text="Things happened that you would not believe even if I told you." />

</android.support.constraint.ConstraintLayout>

How can I make it so that "3 mins ago" aligns (vertically) with the middle of the first line of "Things happened.."?

(P.S. I have seen this question: Align top two textviews with different font sizes but I believe my question is different)

Answer 1

Try the following XML for the elapsed time TextView:

<TextView
    android:id="@+id/tvElapsedTime"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:textColor="@android:color/darker_gray"
    android:textSize="8sp"
    app:layout_constraintTop_toTopOf="@id/tvHeadline"
    android:layout_marginTop="4sp"
    app:layout_constraintEnd_toEndOf="@id/headlineStart"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="@id/headlineStart"
    app:layout_constraintStart_toStartOf="parent"
    tools:text="3 min ago" />

Ideally, you could constrain the baseline of this text view to the baseline of the headline text view and the top to the top and let it center. Unfortunately, once you tie the baselines that is it: Centering is no longer an option.

This method constrains the top of the elapsed time text view to the top of the headline text view and applies a 4sp margin to the top. This aligns the elapsed time to the center (or nearly center) of the top line of the headline. This placement is invariant whether the headline is one line or many lines. This solution is dependent upon the text sizes that you select.

I use 4sp instead of 4dp because you will want the margin to size appropriately if the font is scaled by the user.

Here is the effect:

Answer 2

<TextView
    android:id="@+id/tvElapsedTime"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    android:textColor="@color/grey"
    android:textSize="8sp"
    android:gravity="center"
    app:customTypeface="@string/my_typeface"
    app:layout_constraintEnd_toEndOf="@id/headlineStart"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="@id/headlineStart"
    app:layout_constraintStart_toStartOf="parent"
    tools:text="3 min ago" />

Answer 3

Try below code for "3 min ago" TextView :

<TextView
    android:id="@+id/tvElapsedTime"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:textColor="@android:color/darker_gray"
    android:textSize="8sp"
    app:layout_constraintBottom_toBottomOf="@+id/tvHeadline"
    app:layout_constraintEnd_toStartOf="@+id/tvHeadline"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/tvHeadline"
    tools:text="3 min ago" />