How to change Text Letter Spacing in Android Jetpack Compose

By Mohammed Rashid •  November 23rd, 2022 • 

Sometimes, you want to change text properties such as letter spacing, line height, etc. In this Jetpack Compose tutorial, let’s learn how to add custom letter spacing to Text.

You can alter the letter spacing of Text Composable using TextStyle and its parameter letterSpacing. The value should be given in scale-independent pixels(sp). See the code snippet given below.

fun TextExample() {
Text(text = "Letter Spacing Example",
    fontSize = 24.sp,
    style = TextStyle(letterSpacing = 8.sp)
)
}

8 sp letter spacing is given and you can see the change in the screenshot given below.

jetpack compose letter spacing

Following is the complete code.

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 = "Letter Spacing Example",
    fontSize = 24.sp,
    style = TextStyle(letterSpacing = 8.sp)
)
}

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

That’s how you change letter spacing in Jetpack compose.

Mohammed Rashid

Keep Reading