Today’s tutorial will teach us about the Text widget in KMP Compose Multiplatform. We will discuss all text style properties in this guide on Compose Multiplatform.
KMP All Text Style Properties Guide Compose Multiplatform
Text is one of the most essential widgets on Compose Multiplatform. It allows developers to display text in the KMP application with all the text styling. In today’s tutorial, we will explore each Style property of the Text widget with a code example.
Properties of Text widget:
1. text: The text property is used to specify the Text content of the Text widget. We will pass Text in String format to this property.
|
1 |
Text(text = "Put Your Text here!") |
2. modifier: The modifier property allows us to set padding, width, height, content alignment, and other UI properties of a widget. I have already explained all the properties in my other tutorial. You can read it from HERE.
|
1 2 3 4 |
Text( text = "Hello World!", modifier = Modifier.padding(16.dp).wrapContentSize() ) |
3. style: The Style property of Text defines the typography of Text, such as Font size, weight, and color.
|
1 2 3 4 5 6 7 8 |
Text( text = "Hello World!", style = TextStyle( fontSize = 24.sp, fontWeight = FontWeight.Bold, color = Color.Blue ) ) |
4. color: The Color property is used to set text color. It supports all formats for Color codes like Hex color code, RGBA color code, and Color constants.
- Set the Hex color code for Text in KMP.
1234Text(text = "Colored Text",color = Color(0xFF6200EE), // Put 0xFF before your Hex color code.) - Set ARGB color code on Text.
1234Text(text = "Colored Text",color = Color(red = 0.38f, green = 0.0f, blue = 0.93f, alpha = 1.0f),) - Set Color constants on Text.
1234Text(text = "Colored Text",color = Color.Green)
5. fontSize: To set the font size in KMP. We have to use SP as a font-size property.
|
1 2 3 4 |
Text( text = "Large Text", fontSize = 28.sp ) |
6. fontWeight: To set font thickness on the Text widget. The font-weight property has a few sub-properties.
Properties of font weight:
- FontWeight.Bold
- FontWeight.ExtraBold
- FontWeight.Thin
- FontWeight.W100
- FontWeight.Black
- FontWeight.ExtraLight
- FontWeight.Light
- FontWeight.Medium
- FontWeight.Normal
- FontWeight.SemiBold
- FontWeight.W200
- FontWeight.W300
- FontWeight.W400
- FontWeight.W500
- FontWeight.W600
- FontWeight.W700
- FontWeight.W800
- FontWeight.W900
|
1 2 3 4 |
Text( text = "Bold Text", fontWeight = FontWeight.Bold ) |
7. fontStyle: Apply Italic or regular font style on the Text widget.
|
1 2 3 4 |
Text( text = "Italic Text", fontStyle = FontStyle.Italic ) |
8. letterSpacing: To set the spacing between string characters in KMP.
|
1 2 3 4 |
Text( text = "Sample Text", letterSpacing = 8.sp ) |
9. textDecoration: To create Underline and Strike through text.
|
1 2 3 4 5 6 7 8 9 |
Text( text = "Underlined Text", textDecoration = TextDecoration.Underline ) Text( text = "Strikethrough Text", textDecoration = TextDecoration.LineThrough ) |
10. maxLines: To set the limit of lines displayed in Text.
|
1 2 3 4 |
Text( text = "This is a sample text, In this text we are integrating max lines property", maxLines = 1 ) |
11. overflow: To control text display when it overflows the current parent widget. This works when your text is large, and the root widget size is smaller.
|
1 2 3 4 5 |
Text( text = "This text will overflow if too long", maxLines = 1, overflow = TextOverflow.Ellipsis ) |
12. textAlign: To set text alignment within its parent container widget.
Properties of text-align:
- TextAlign.Center
- TextAlign.End
- TextAlign.Left
- TextAlign.Right
- TextAlign.Start
- TextAlign.Justify
- TextAlign.Unspecified
|
1 2 3 4 5 |
Text( text = "Center Aligned Text", textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth() ) |
Complete source code for App.kt file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
package com.app.test import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp @Composable fun App() { MaterialTheme { Column( modifier = Modifier .fillMaxSize() .verticalScroll(rememberScrollState()) .padding(8.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { SampleStyleText() } } } @Composable fun SampleStyleText() { Text( text = "Sample Text with Multiple Styles Applied on it.", style = TextStyle( fontSize = 28.sp, fontWeight = FontWeight.W300, fontStyle = FontStyle.Italic, color = Color.Magenta ), modifier = Modifier .padding(16.dp) .wrapContentSize(), textAlign = TextAlign.Unspecified, maxLines = 2, overflow = TextOverflow.Ellipsis ) } |
Screenshot:
