Exploring BasicText and Text in Compose
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
When it comes to displaying text, Compose offers two composables, Text and BasicText, for high-level and low-level text rendering, respectively.
Exploring BasicText in Compose
BasicText is a barebones composable that offers low-level text rendering ability and semantics/accessibility information with limited options. Here’s what its signature looks like:
@Composable
fun BasicText(
text: String,
modifier: Modifier = Modifier,
style: TextStyle = TextStyle.Default,
onTextLayout: ((TextLayoutResult) -> Unit)? = null,
overflow: TextOverflow = TextOverflow.Clip,
softWrap: Boolean = true,
maxLines: Int = Int.MAX_VALUE,
minLines: Int = 1,
color: ColorProducer? = null
)
Exploring Text in Compose
Before learning how to use the Text Composable, you’ll examine its signature and see how much it differs from BasicText.
@Composable
fun Text(
text: String,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
fontSize: TextUnit = TextUnit.Unspecified,
fontStyle: FontStyle? = null,
fontWeight: FontWeight? = null,
fontFamily: FontFamily? = null,
letterSpacing: TextUnit = TextUnit.Unspecified,
textDecoration: TextDecoration? = null,
textAlign: TextAlign? = null,
lineHeight: TextUnit = TextUnit.Unspecified,
overflow: TextOverflow = TextOverflow.Clip,
softWrap: Boolean = true,
maxLines: Int = Int.MAX_VALUE,
minLines: Int = 1,
onTextLayout: ((TextLayoutResult) -> Unit)? = null,
style: TextStyle = LocalTextStyle.current
)
Using Text
The simplest way to display text in compose is by using the Text composable and passing a string as a parameter.
@Composable
fun HelloCompose() {
Text("Hello Compose")
}
@Composable
fun HelloCompose() {
Text(stringResource(R.string.hello_compose))
}
@Composable
fun StyledText() {
val annotatedString = buildAnnotatedString {
append("This is ")
withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
append("bold text")
}
append(" and this is not.")
}
Text(text = annotatedString)
}
Styling Text
Some common options to style your text would be to change the color, font size, and font weight.
@Composable
fun RedBoldBigText() {
Text(
text = "Hello World",
color = Color.Red,
fontSize = 30.sp,
fontWeight = FontWeight.Bold
)
}
Skewing Your Text
To skew your text, you can use the style property along with a textGeometricTransform as shown below.
@Composable
fun SlantedText() {
Text(
modifier = Modifier.width(150.dp),
textAlign = TextAlign.Center,
text = "Slanted",
color = Color.Blue,
fontSize = 30.sp,
style = TextStyle(
textGeometricTransform = TextGeometricTransform(
scaleX = 0.5f,
skewX = 1.3f
)
),
fontWeight = FontWeight.Bold
)
}
Adding Shadow to Your Text
The style parameter of the text composable lets you configure multiple parameters, such as shadow.
@Composable
fun ShadowText() {
val offset = Offset(5.0f, 10.0f)
Text(
text = "I got shadows!",
style = TextStyle(
fontSize = 24.sp,
shadow = Shadow(
color = Color.Gray, offset = offset, blurRadius = 3f
)
)
)
}
Using Gradient as Text Color
Using the style parameter, you can also opt for using a gradient as the text color. Here’s what using a gradient as the text color looks like:
@Composable
fun GradientText() {
val gradientColors = listOf(Color.Cyan, Color.Magenta, Color.Red)
Text(
text = "Here's a text with a gradient color!",
style = TextStyle(
brush = Brush.linearGradient(
colors = gradientColors
)
)
)
}
Styling Paragraphs
Now that you’ve covered how to style individual blocks of text, it’s time to look at how to style paragraphs.
@Composable
fun ParagraphStylingExample() {
Text(
buildAnnotatedString {
withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
withStyle(
style = SpanStyle(
color = Color.Blue, shadow = Shadow(
color = Color.Gray,
offset = Offset(5.0f, 10.0f),
blurRadius = 3f
)
)
) {
append(
"This paragraph has a shadow under it. Looks funky\n"
)
}
withStyle(
style = SpanStyle(
fontWeight = FontWeight.Bold, color = Color.Red
)
) {
append("This paragraph is just bold.\n")
}
append("Finally here is an unstyled paragraph")
}
}
)
}
