How to change Line Height of Text in Android Jetpack Compose

By Mohammed Rashid •  November 23rd, 2022 • 

Sometimes mobile app developers want to alter the line height to make the text stand out. Let’s learn how to change the default line height in Jetpack Compose.

You can change the Text line height using TextStyle and its lineHeight parameter. See the code snippet given below.

@Composable
fun TextExample() {
Text(text = "This is custom line height example. Try changing the value of lineHeight and see the difference!",
    fontSize = 24.sp,
    style = TextStyle(lineHeight = 40.sp)
)
}

The default line height will be changed as seen in the output.

line height jetpack compose

Following is the complete code for reference.

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        MyApplicationTheme {
            Surface(
                color = MaterialTheme.colors.background,
                modifier = Modifier.fillMaxSize()
            ) {
                TextExample()
            }
        }
    }
}
}

@Composable
fun TextExample() {
Text(text = "This is custom line height example. Try changing the value of lineHeight and see the difference!",
    fontSize = 24.sp,
    style = TextStyle(lineHeight = 40.sp)
)
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyApplicationTheme {
    TextExample()
}
}

That’s how you change the Text line height in Jetpack Compose.

Keep Reading