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.
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.
