Jetpack Compose is Android’s modern UI toolkit designed to simplify and accelerate UI development. By replacing the traditional XML-based layouts with declarative programming, it enables developers to create intuitive and responsive UIs with less boilerplate code. Below, we explore the core components of Jetpack Compose in detail.
Use a Jetpack library in your app
All Jetpack components can be found in the Google Maven repository.
To include this repository, open the settings.gradle file and add the google() repository within the dependencyResolutionManagement { repositories {...}} block as illustrated below:
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
jcenter()
}
}1. Basic UI Components
1.1. Text
The Text component displays text on the screen. It supports rich customization, including font styles, colors, and alignment.
Example:
Text(
text = "Hello, Jetpack Compose!",
fontSize = 20.sp,
color = Color.Blue
)1.2. Button
Button is a clickable UI element used for triggering actions. It can be customized with colors, shapes, and text styles.
Example:
Button(onClick = { /* Perform action */ }) {
Text("Click Me")
}1.3. Image
The Image component is used to display images from resources, URLs, or other sources.
Example:
Image(
painter = painterResource(id = R.drawable.ic_launcher),
contentDescription = "App Icon",
contentScale = ContentScale.Crop
)1.4. TextField
TextField allows users to input text. It can be styled with placeholder text, background colors, and custom shapes.
Example:
var text by remember { mutableStateOf("") }
TextField(
value = text,
onValueChange = { text = it },
placeholder = { Text("Enter your name") }
)2. Layout Components
2.1. Row
Row arranges its child components horizontally.
Example:
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text("Item 1")
Text("Item 2")
Text("Item 3")
}2.2. Column
Column arranges its child components vertically.
Example:
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.Center
) {
Text("Line 1")
Text("Line 2")
Text("Line 3")
}2.3. Box
Box is a versatile layout component that allows stacking elements on top of each other.
Example:
Box(
modifier = Modifier.size(100.dp).background(Color.Gray)
) {
Text("Overlay Text", Modifier.align(Alignment.Center))
}2.4. Spacer
Spacer adds empty space between components for better layout design.
Example:
Row {
Text("Start")
Spacer(modifier = Modifier.width(16.dp))
Text("End")
}3. State Management Components
3.1. remember
remember helps to save the state of a composable during recompositions.
Example:
val counter = remember { mutableStateOf(0) }
Button(onClick = { counter.value++ }) {
Text("Clicked: ${counter.value} times")
}3.2. rememberSaveable
rememberSaveable retains state across configuration changes like screen rotations.
Example:
val name = rememberSaveable { mutableStateOf("") }
TextField(
value = name.value,
onValueChange = { name.value = it }
)4. Advanced Components
4.1. LazyColumn
LazyColumn is used for efficiently displaying long, scrollable lists.
Example:
LazyColumn {
items(100) { index ->
Text("Item #$index")
}
}4.2. LazyRow
LazyRow displays items horizontally in a scrollable list.
Example:
LazyRow {
items(10) { index ->
Text("Row Item #$index")
}
}4.3. Scaffold
Scaffold provides a framework for building app screens with consistent layouts, including top bars, bottom bars, and floating action buttons.
Example:
Scaffold(
topBar = { TopAppBar(title = { Text("Scaffold Example") }) },
floatingActionButton = {
FloatingActionButton(onClick = { /* Action */ }) {
Icon(Icons.Default.Add, contentDescription = "Add")
}
}
) {
Text("Content goes here")
}5. Animations
5.1. AnimatedVisibility
Controls visibility changes with animation.
Example:
var visible by remember { mutableStateOf(true) }
AnimatedVisibility(visible = visible) {
Text("This text appears and disappears")
}5.2. rememberInfiniteTransition
Creates looping animations.
Example:
val transition = rememberInfiniteTransition()
val color by transition.animateColor(
initialValue = Color.Red,
targetValue = Color.Blue,
animationSpec = infiniteRepeatable(animation = tween(1000))
)
Box(Modifier.size(100.dp).background(color))6. Gesture Handling
6.1. Modifier.clickable
Adds click behavior to components.
Example:
Box(
Modifier.size(100.dp).background(Color.Gray).clickable {
/* Handle click */
}
)6.2. Modifier.pointerInput
Handles complex gestures like drag and pinch.
Example:
Box(
Modifier.pointerInput(Unit) {
detectTapGestures(onDoubleTap = { /* Handle double tap */ })
}
)Jetpack Compose components offer a powerful, flexible, and modern way to build Android UIs. By mastering these components, developers can create feature-rich, visually appealing apps while writing clean and maintainable code.
Conclusion
Jetpack Compose revolutionizes Android UI development by introducing a declarative and intuitive approach. With components like Text, Button, LazyColumn, and powerful state management tools such as remember and rememberSaveable, developers can create dynamic and visually engaging applications more efficiently than ever. Furthermore, features like animations, gestures, and advanced layouts ensure a seamless user experience. Mastering these components is essential for developers building modern, maintainable, scalable Android apps. Embrace Jetpack Compose to elevate your app development journey!