Text in Android using Jetpack Compose
Jetpack Compose is a new toolkit provided by Google. This is useful for designing beautiful UI designs. Android Text is a simple view in Android which is used to display text inside our App.
In this article, we will take a look at the implementation of Text in Android using Jetpack Compose.
Important Attributes of Text
Attributes | Description |
---|---|
text | to set the text which we have to display inside our Text. |
style | to change the style of Text in Android. |
color | to change the color of Text. |
fontSize | to change the font size of our text. |
fontWeight | to set the weight for our font ie. to extra bold, dark, and many more |
fontStyle | to set font style to italic. |
fontFamily | to change the font family of our text. |
letterSpacing | to set spacing in between letters of our Text. |
background | to set the background color for our Text. |
shadow | to add a shadow for our Text. |
textAlign | to change the alignment of our Text. |
modifier | the modifier is used to add padding to our Text. |
textDecoration | the decoration to be applied to the text |
lineHeight | the height of each line of text. |
overflow | how to handle overflowed text |
softWrap | whether to wrap the text if it exceeds the width of its container. |
maxLines | the maximum number of lines for the text |
minLines | the minimum number of lines for the text. |
onTextLayout | callback that is invoked when the text is laid out. |
Step by Step Implementation
Step 1: Create a New Project
To create a new project in the Android Studio Canary Version please refer to How to Create a new Project in Android Studio Canary Version with Jetpack Compose.
Step 2: Adding Text in MainActivity.kt file
Navigate to the app > java > your app’s package name and open the MainActivity.kt file. Inside that file add the below code to it.

Comments are added inside the code to understand the code in more detail.
MainActivity.kt:
package org.geeksforgeeks.demo
import android.os.Bundle
import androidx.activity.*
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.*
import org.geeksforgeeks.demo.ui.theme.DemoTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
DemoTheme {
Surface(color = MaterialTheme.colorScheme.background) {
MyTextView("Geeks for Geeks")
}
}
}
}
}
@Composable
fun MyTextView(data1: String, modifier: Modifier = Modifier) {
Column(
// we are using column to align
// our textview to center of the screen.
modifier = Modifier.fillMaxSize(),
// below line is used for specifying
// horizontal arrangement.
horizontalAlignment = Alignment.CenterHorizontally,
// below line is used for specifying
// vertical arrangement.
verticalArrangement = Arrangement.Center
) {
// This is Text composable function
Text(text = data1, modifier = modifier)
}
}
Output:

Modifying Text further in Jetpack Compose
In this example we are adding some extra functionality to the Text.
MainActivity.kt:
package org.geeksforgeeks.demo
import android.os.Bundle
import androidx.activity.*
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.*
import androidx.compose.ui.graphics.*
import androidx.compose.ui.text.*
import androidx.compose.ui.text.font.*
import androidx.compose.ui.text.style.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.*
import org.geeksforgeeks.demo.ui.theme.DemoTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
DemoTheme {
// A surface container using the
// 'background' color from the theme
Surface(
// to add background color for our screen.
color = MaterialTheme.colorScheme.background,
) {
// here we are calling our Composable
// function inside setContent method.
TextExample()
}
}
}
}
}
// below is the Composable function
// which we have created for our Text.
@Composable
fun TextExample() {
Column(
// we are using column to align
// our textview to center of the screen.
modifier = Modifier.fillMaxSize(),
// below line is used for specifying
// horizontal arrangement.
horizontalAlignment = Alignment.CenterHorizontally,
// below line is used for specifying
// vertical arrangement.
verticalArrangement = Arrangement.Center
) {
// Text Composable
Text(
// below line is for displaying
// text in our text.
text = "GeeksforGeeks",
// modifier is use to give
// padding to our text.
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
// color is used to provide white
// color to our text.
color = Color.White,
// font size to change the
// size of our text.
fontSize = 40.sp,
// font style is use to change style
// of our text to italic and normal.
fontStyle = FontStyle.Italic,
// font weight to bold such as light bold,
// extra bold to our text.
fontWeight = FontWeight.Bold,
// font family is use to change
// our font family to SansSerif.
fontFamily = FontFamily.SansSerif,
// letter spacing is use to
// provide between letters.
letterSpacing = 1.5.sp,
// Decorations applied to the text (Underline)
textDecoration = TextDecoration.Underline,
// textAlign to align our text view
// to center position.
textAlign = TextAlign.Center,
// The height of each line of text (24sp).
lineHeight = 24.sp,
// Used to handle overflowed text (Ellipsis).
overflow = TextOverflow.Ellipsis,
// Whether the text should wrap if it exceeds the width of its container (true).
softWrap = true,
// The maximum number of lines for the text (2).
maxLines = 2,
// The minimum number of lines for the text (1).
minLines = 1,
// A callback that is invoked when the text is laid out, here used to print the line count.
onTextLayout = { textLayoutResult: TextLayoutResult ->
// Example usage of onTextLayout callback
val lineCount = textLayoutResult.lineCount
println("Line Count: $lineCount")
},
// below line is used to add
// style to our text view.
style = TextStyle(
// background is use to specify background
// color to our text view.
background = Color.Green,
// shadow to make our
// text view elevated.
shadow = Shadow(color = Color.Gray, blurRadius = 40f)
)
)
}
}
@Preview
@Composable
fun DefaultPreview() {
MaterialTheme {
// we are passing our composable
// function to display its preview.
TextExample()
}
}
Output:
