How to properly set line height for Android?

Question

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

Answer 1

I always do the things programmatically :

float spc = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,6,r.getDisplayMetrics());
textView.setLineSpacing(spc, 1.5f);

Also, read the material design guideline about typography. This is really helpful for achiving the best look.

Answer 2

Here's React Native's solution: add a span that adjusts the line height https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java

My design colleagues use line height excessively and its a pain that it never looks right after rending in-app.

I'll be planning on making a custom TextView class that takes an arg by XML and will post it here after.

Answer 3

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;
}

Answer 4

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"
/>

Answer 5

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"
/>

Answer 6

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)