Mastering Scroll in Jetpack Compose — PART 1

Photo by Andrew Neel on Unsplash

Scrolling is a fundamental element of any mobile app, and Jetpack Compose provides powerful tools to create smooth and efficient scrolling experiences. This article dives into the world of scroll in Compose, starting with the foundational concepts and gradually progressing towards more complex scenarios.

Compose offers two workhorses for creating scrollable lists: LazyColumn for vertical scrolling and LazyRow for horizontal scrolling. They behave similarly to RecyclerView in XML, efficiently rendering only the visible items while maintaining excellent performance.

Lazy Column

@Composable
fun LazyColumnExample() {
    val items = listOf("Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10","Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10")

    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
    ) {
        items(items.size) { item ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = items.get(item),
                    color = Color.Black
                )
            }
        }
    }
}


@Preview
@Composable
fun Preview() {
    LazyColumnExample()
}

Lazy Row

@Composable
fun LazyRowExample() {
    val items = listOf("Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10","Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10")

    LazyRow(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
    ) {
        items(items.size) { item ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = items.get(item)…