How to center text vertically in a TextView that contains text with different sizes?

Question

I have a TextView in my layout that contains text with different sizes:

That's achieved with SpannableString:

SpannableString spannableString = new SpannableString("$20 Rewards");
    spannableString.setSpan(
            new AbsoluteSizeSpan(getResources().getDimensionPixelSize(R.dimen.textSize_16)), 0,
            3, 0);

    textView.setText(spannableString);

My issue is that the smaller text doesn't get centered vertically, as you can see in the pic above. I've added android:gravity="center_vertical" to the TextView, to no avail:

<TextView
    android:id="@+id/tv_hotel_rewards"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:background="@drawable/bg_dark_blue_partial_round"
    android:gravity="center_vertical"
    android:paddingBottom="4dp"
    android:paddingEnd="8dp"
    android:paddingStart="8dp"
    android:paddingTop="4dp"
    android:textColor="@color/white"
    android:textSize="@dimen/textSize_12"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tv_hotel_price"
    tools:text="$140 Rewards"/>

Anyone knows how to center that vertically or if that's possible at all using a single TextView?

Answer 1

TextView will, by default, draw all text within it on the same baseline. However, you can use a MetricAffectingSpan to modify the baseline for certain characters. By applying a span to all the "small" text, you can move its baseline up so that it appears vertically centered.

public class CenterVerticalSpan extends MetricAffectingSpan {

    @Override
    public void updateMeasureState(@NonNull TextPaint textPaint) {
        textPaint.baselineShift += getBaselineShift(textPaint);
    }

    @Override
    public void updateDrawState(TextPaint textPaint) {
        textPaint.baselineShift += getBaselineShift(textPaint);
    }

    private int getBaselineShift(TextPaint tp) {
        float total = tp.ascent() + tp.descent();
        return (int) (total / 2f);
    }
}

SpannableString spannableString = new SpannableString("$20 Rewards");
spannableString.setSpan(new AbsoluteSizeSpan(fontSize), 0, 3, 0);
spannableString.setSpan(new CenterVerticalSpan(), 3, spannableString.length(), 0);