Jetpack Compose has revolutionized Android app development by offering a modern, declarative way to create user interfaces. One of the most powerful components for displaying lists in Compose is the LazyColumn. In this blog post, we’ll dive deep into the world of Jetpack Compose’s LazyColumn by examining a code snippet for a list demo. We’ll use the new code snippet provided:
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ListDemo() {
LazyColumn(
modifier = Modifier.background(Color.White),
contentPadding = PaddingValues(vertical = 8.dp) // 8.dp between each item
) {
item {
Text(
modifier = Modifier.padding(horizontal = 16.dp),
text = "Users",
style = MaterialTheme.typography.headlineMedium,
textAlign = TextAlign.Start,
)
}
items(items = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)) { item ->
ListItem(
modifier = Modifier
.padding(horizontal = 16.dp, vertical = 8.dp)
.clip(RoundedCornerShape(12.dp))
.border(border = BorderStroke(1.dp, Color.LightGray), shape = RoundedCornerShape(12.dp))
.clickable { },
colors = ListItemDefaults.colors(containerColor = Color.Transparent),
headlineText = { Text("User - $item") },
leadingContent = {
Icon(
imageVector = Icons.Default.Person,
contentDescription = "Info"
)
},
supportingText = {
Text(
modifier = Modifier,
text = "Software developer",
style = MaterialTheme.typography.bodySmall,
textAlign = TextAlign.Start,
)
}, trailingContent = {
Icon(
imageVector = Icons.Default.KeyboardArrowRight,
contentDescription = "Forward",
)
}
)
}
}
}
Deconstructing the Code
Let’s break down this code snippet to understand the various elements used to create a stunning list with Jetpack Compose and Material Design.
1. Import Statements
First, ensure that you’ve imported the necessary libraries and components to work with Jetpack Compose and Material 3.
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.BorderStroke
import androidx.compose.material3.Color
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.dp2. LazyColumn
The LazyColumn is a fundamental component for creating scrollable lists in Jetpack Compose. It allows for the efficient rendering of large datasets while maintaining smooth scrolling performance. In this example, we apply a white background and specify vertical padding for our list items.
LazyColumn(
modifier = Modifier.background(Color.White),
contentPadding = PaddingValues(vertical = 8.dp) // 8.dp between each item
)
Are you ready to revolutionize your Android development journey? Dive into the second edition of “Jetpack Compose by Example,” available in print, Kindle, and PDF eBook formats. Perfect for Kotlin-fluent Android developers, this comprehensive guide takes you through the ins and outs of Jetpack Compose’s declarative approach.
3. Header Item
The list begins with a header item that displays “Users” with a custom style applied.
item {
Text(
modifier = Modifier.padding(horizontal = 16.dp),
text = "Users",
style = MaterialTheme.typography.headlineMedium,
textAlign = TextAlign.Start,
)
}4. List Items
We use the items function to populate the list with data. In this example, a list of integers from 1 to 10 is provided, and for each item, we create a ListItem with user information.
items(items = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)) { item ->
ListItem(
modifier = Modifier
.padding(horizontal = 16.dp, vertical = 8.dp)
.clip(RoundedCornerShape(12.dp))
.border(border = BorderStroke(1.dp, Color.LightGray), shape = RoundedCornerShape(12.dp))
.clickable { },
colors = ListItemDefaults.colors(containerColor = Color.Transparent),
headlineText = { Text("User - $item") },
leadingContent = {
Icon(
imageVector = Icons.Default.Person,
contentDescription = "Info"
)
},
supportingText = {
Text(
modifier = Modifier,
text = "Software developer",
style = MaterialTheme.typography.bodySmall,
textAlign = TextAlign.Start,
)
}, trailingContent = {
Icon(
imageVector = Icons.Default.KeyboardArrowRight,
contentDescription = "Forward",
)
}
)
}5. Customizing List Items
Within each ListItem, you can customize the content as needed. In this example, we display the user’s name and role, along with icons.
Wrapping up
Jetpack Compose’s LazyColumn is a versatile tool for creating lists in Android apps. It simplifies the process of displaying scrollable data and allows for easy customization of list items. In this blog post, we explored a code snippet for creating a user list and discussed the key components and techniques used in the code. You can use this as a starting point for building your own lists with Jetpack Compose.
Happy coding!
Leave a Reply