Complex UI in Jetpack Compose

Jetpack Compose provides many tools for creating UI. With Jetpack Compose you can easily create an MVP of your project, and see how it looks. For example, to create a list in Android in the usual way, we should use RecyclerView. And of course, we need to create an adapter and view holder to manage items in RecyclerView. In Jetpack Compose we can do it easily.

@Composable
fun NewsList() {
    LazyColumn {
        items(rows) { item ->
            Text(
                modifier = Modifier
                    .height(80.dp),
                text = item
            )
        }
    }
}

And that’s all. No need for an adapter, view holder, etc.
LazyColumn is used when you want to create a vertical list. To create horizontal we just replace our LazyColumn with LazyRow and our list become horizontal

@Composable
fun NewsList() {
    LazyRow {
        items(rows) { item ->
            Text(
                modifier = Modifier
                    .height(80.dp),
                text = item
            )
        }
    }
}

If you want to get an index of the item, replace items to itemsIndexed and you will access to index of the current item

itemsIndexed(rows) { index, item ->
    Text(
        modifier = Modifier
            .height(80.dp),
        text = item
    )
}

What if we want to create a nested list. That contains both vertical and horizontal items. Of course, for this purpose, we can use LazyVerticalGrid.

LazyVerticalGrid(cells = GridCells.Fixed(10)) {
    itemsIndexed(rows) { row, item->
        Text(
            modifier = Modifier
                .height(80.dp),
            text = item
        )
    }
}

But there are a couple of problems with the solution. First, is LazyVerticalGrid still annotated as ExperimentalFoundationApi . The second one is it allows your grid to scroll only vertically. And the third one is it always fits the screen width. So for example, if you want to have 8 columns, LazyVerticalGrid tries to fit all of them into the screen. Here is an example of its work.

I think you will agree with me, that it looks a little bit weird, instead of fitting all items into the screen, I want to be able to scroll my grid horizontally to see all items. To make this will use components that we used before LazyRow and LazyColumn. The mix of these two components allows us to create a complex scrollable grid with minimal effort. Let’s start!

First, we need to create LazyColumn to make our items scrollable vertically. But at this time our item of LazyColumn will be LazyRow. I added some modifiers to the Text component to make the grid a little bit beautiful.

LazyColumn {
    itemsIndexed(rows) { index, row ->
        LazyRow {
            itemsIndexed(columns) { index, column ->
                Text(
                    modifier = Modifier
                        .padding(8.dp)
                        .background(Color.Red)
                        .width(100.dp)
                        .height(100.dp),
                    textAlign = TextAlign.Center,
                    color = Color.White,
                    text = "Row $row Column = $column"
                )
            }
        }

    }
}

rows — in an array of strings with size of 10

column — in an array of strings with size of 10

So we will have a grid with 10 rows and with the same size columns

And we run our code we will see something like this:

Using this solution we achieve some benefits:

1. More customization opportunities. Ability to change every item in grid or change items only on specific column or row
2. Full control of our grid.
3. Infinite scroll in both directions

Conclusion

Jetpack Compose provides many tools for creating complex UI. Today we learned the ways to create a grid in Jetpack Compose. If you want to create a simple grid without features such as a horizontal scroll or an infinitive scroll you should use LazyVerticalGrid. Otherwise, I recommend you to use a mix of LazyRow and LazyColumn for these purposes.

Feel free to follow me on Twitter and don’t hesitate to ask questions related to Jetpack Compose.

Twitter : https://twitter.com/a_rasul98

Thanks for reading, and see you later!