Jetpack Compose sheet
Jetpack Compose Cheat Sheet
Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. This cheat sheet will provide an overview of the essential components and functionalities, along with brief explanations to help you get started.
Basic Setup
Gradle Dependencies
To get started with Jetpack Compose, you need to add the necessary dependencies to your app’s build.gradle file:
1
2
3
4
5
implementation "androidx.compose.ui:ui:1.0.0"
implementation "androidx.compose.material:material:1.0.0"
implementation "androidx.compose.ui:ui-tooling-preview:1.0.0"
implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.3.1"
implementation "androidx.activity:activity-compose:1.3.0"
Basic Composables
Text
The Text composable is used to display text on the screen.
1
Text(text = "Hello, Jetpack Compose!")
Button
The Button composable creates a button that can trigger actions when clicked.
1
2
3
Button(onClick = { /* Do something */ }) {
Text("Click Me")
}
Column
The Column composable arranges its children in a vertical sequence.
1
2
3
4
Column {
Text("First item")
Text("Second item")
}
Row
The Row composable arranges its children in a horizontal sequence.
1
2
3
4
Row {
Text("First item")
Text("Second item")
}
Box
The Box composable allows you to stack children on top of each other.
1
2
3
Box {
Text("This is inside a Box")
}
State Management
Managing state in Jetpack Compose is simple and efficient.
Remember
remember helps to retain state across recompositions.
1
2
3
4
5
val counter = remember { mutableStateOf(0) }
Button(onClick = { counter.value++ }) {
Text("Clicked ${counter.value} times")
}
Layouts and Modifiers
Modifiers allow you to adjust the layout, appearance, and behavior of composables.
Padding
Add padding around a composable.
1
2
3
4
Text(
text = "Hello, Padding!",
modifier = Modifier.padding(16.dp)
)
Background Color
Set the background color of a composable.
1
2
3
4
Text(
text = "Hello, Background!",
modifier = Modifier.background(Color.Blue)
)
Size
Set the size of a composable.
1
2
3
4
5
Box(
modifier = Modifier
.size(100.dp)
.background(Color.Red)
)
Material Design Components
Jetpack Compose provides a set of Material Design components to help you build beautiful UIs.
Scaffold
Scaffold implements the basic material design layout structure.
1
2
3
4
5
6
7
8
9
Scaffold(
topBar = { TopAppBar(title = { Text("My App") }) },
content = { padding ->
Text(
text = "Hello, Scaffold!",
modifier = Modifier.padding(padding)
)
}
)
FloatingActionButton
A floating action button (FAB) is a circular button that triggers the primary action in your app.
1
2
3
FloatingActionButton(onClick = { /* Do something */ }) {
Icon(Icons.Filled.Add, contentDescription = "Add")
}
Snackbar
Snackbars provide brief feedback about an operation.
1
2
3
4
5
6
7
Snackbar(
action = {
Button(onClick = { /* Do something */ }) {
Text("Retry")
}
}
) { Text("This is a snackbar") }
Images
Displaying images in Jetpack Compose can be done from resources or URLs.
Load Image from Resources
Use the painterResource function to load an image from the resources.
1
2
3
4
Image(
painter = painterResource(id = R.drawable.my_image),
contentDescription = "My Image"
)
Load Image from URL (using Coil)
Coil is an image loading library that integrates well with Jetpack Compose.
1
implementation "io.coil-kt:coil-compose:1.3.2"
1
2
3
4
Image(
painter = rememberImagePainter("https://example.com/image.jpg"),
contentDescription = "My Image"
)
Lists
Jetpack Compose provides lazy components for efficiently displaying large sets of data.
LazyColumn
LazyColumn is used to display a vertically scrolling list.
1
2
3
4
5
LazyColumn {
items(100) { index ->
Text("Item #$index")
}
}
LazyRow
LazyRow is used to display a horizontally scrolling list.
1
2
3
4
5
LazyRow {
items(100) { index ->
Text("Item #$index")
}
}
Navigation
Jetpack Compose has its own navigation component to handle navigation between composables.
Navigation Component
Add the navigation-compose dependency to your build.gradle file.
1
implementation "androidx.navigation:navigation-compose:2.4.0-alpha10"
Define a navigation graph using NavHost and composable.
1
2
3
4
5
6
7
8
@Composable
fun NavGraph(startDestination: String = "home") {
val navController = rememberNavController()
NavHost(navController, startDestination) {
composable("home") { HomeScreen(navController) }
composable("detail") { DetailScreen(navController) }
}
}
Animations
Jetpack Compose makes animations easy and intuitive.
Simple Animation
Animate properties with animate*AsState.
1
2
3
4
5
6
7
8
val alpha = animateFloatAsState(
targetValue = if (isVisible) 1f else 0f,
animationSpec = tween(durationMillis = 1000)
)
Box(modifier = Modifier.alpha(alpha.value)) {
Text("Fading Text")
}
Preview
Use the @Preview annotation to see your composables in the Android Studio design view.
Preview Composable
Annotate a composable function to preview it in the IDE.
1
2
3
4
5
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyComposable()
}