This project demonstrates a lazy vertical staggered grid layout in Jetpack Compose, featuring randomly colored boxes of varying heights.
- Lazy vertical staggered grid layout.
- Randomly colored boxes with dynamic heights.
- Smooth scrolling and spacing between items.

-
Clone the repository:
git clone https://github.com/Bhavyansh03-tech/Lazy_Staggered_Grid.git
-
Open the project in Android Studio.
-
Sync the project with Gradle files.
To use this layout in your project, include the LazyVerticalStaggeredGrid
and RandomColorBox
composables. Here is a brief example:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val items = (1..100).map {
ListItem(
height = Random.nextInt(100, 300).dp,
color = Color(
Random.nextLong(0xFFFFFFFF)
).copy(alpha = 0.7f)
)
}
enableEdgeToEdge()
setContent {
LazyStaggeredGridTheme {
LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Fixed(2),
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalItemSpacing = 16.dp
) {
items(items.size) {
RandomColorBox(items[it])
}
}
}
}
}
}
data class ListItem(
val height: Dp,
val color: Color
)
@Composable
fun RandomColorBox(item: ListItem) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(item.height)
.clip(RoundedCornerShape(10.dp))
.background(item.color)
)
}
Contributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.
- Fork the repository.
- Create your feature branch (
git checkout -b feature/your-feature
). - Commit your changes (
git commit -am 'Add some feature'
). - Push to the branch (
git push origin feature/your-feature
). - Create a new Pull Request.
For questions or feedback, please contact @Bhavyansh03-tech.