How to properly set line height for Android?

I am a UX architect working with a team of Android developers that are mostly junior. We are having issues properly setting line height in Android.

We are using the Material Design spec as our guide for our app. In particular, you can see line height specs here:

https://material.google.com/style/typography.html#typography-line-height

Let's use Body 2 as our example. The spec says the type is 13sp or 14sp, and the leading (line height - same thing) should be 24dp.

Here's the problem: these devs are telling me there is no such way to set line height like that in the code. Instead, they are telling me to measure the distance between the two lines of text and give them that measure - let's say it's 4dp. They want this for each style of text we are using.

We are using a Sketch > Zepelin flow for spec.

It seems odd to me to be able to create a font style (which could easily be class/style in the code) that is 13sp with 24dp leading, and not be able to set the leading, but instead have to add a 3rd measure to the mix. There is no place in Sketch or Zepelin for such a measure "between lines."

Is this really the way it is done, or is there a proper way to set line height?

Solution 1:

I'll explain this from Android Developer perspective.

Line height usually means text size + "padding" top/bottom.

So, if your designer write line height 19sp and text size 15sp, it means you need to have extra padding 4sp.

19sp - 15sp = 4sp.

To implement it in your layout, use lineSpacingExtra attribute.

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="15sp"
  android:lineSpacingExtra="4sp"
  android:fontFamily="sans-serif"
  tools:text="StackOverflow is awesome"
/>

Another way to achieve line height is using scale. For example, 1.2. It means, the spacing is 120% of the text size.

In example above, the line height is 19sp and the text size is 15sp. If we translate it into scale, it become.

19/15 = 1.26

To implement it in your layout, use the lineSpacingMultiplier attribute.

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="15sp"
  android:lineSpacingMultiplier="1.26"
  android:fontFamily="sans-serif"
  tools:text="StackOverflow is awesome"
/>

Solution 2:

lineHeight = height * multiplier + extra

So if you set multiplier = 0 then you can get line-height to be the same as an extra.

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="14sp"
  android:lineSpacingMultiplier="0"
  android:lineSpacingExtra="24sp"
/>

Solution 3:

Since API 28 we now have lineHeight

<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="Lorem ipsum dolor sit amet"
app:lineHeight="50sp"/>

If you are using a style don't forget to remove the app:

<style name="H1">
    <item name="android:textSize">20sp</item>
    <item name="lineHeight">30sp</item>
</style>

Or in code

TextView.setLineHeight(@Px int)

Solution 4:

Here's a way to do it programatically.

public static void setLineHeight(TextView textView, int lineHeight) {
    int fontHeight = textView.getPaint().getFontMetricsInt(null);
    textView.setLineSpacing(dpToPixel(lineHeight) - fontHeight, 1);
}

public static int dpToPixel(float dp) {
    DisplayMetrics metrics = getResources().getDisplayMetrics();
    float px = dp * (metrics.densityDpi / 160f);
    return (int) px;
}