Grids In Jetpack Compose

Building better UI and providing great UX(user experience) to our user is the most important thing we need to achieve in any app development whether it’s mobile or web. In this blog we will discuss how to use Vertical and Horizontal grid for building UI in Android using Jetpack Compose.

Lazy Horizontal Staggered Grid

Let’s Start with Horizontal Staggered Grid. To build Grid Horizontally we need to use the function called LazyHorizontalStaggeredGrid. Let’s understand more about Lazy Horizontal Staggered Grid by looking at example.

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalFoundationApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val itemsList = (0..50).toList()
        val itemModifier = Modifier.border(1.dp, Color.Blue).padding(16.dp).wrapContentSize()
        setContent {
            LazyHorizontalStaggeredGrid(
                rows = StaggeredGridCells.Fixed(3),
                horizontalArrangement = Arrangement.spacedBy(16.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp)

            ){
                items(itemsList){item ->
                    Text("Items is $item", itemModifier)
                }
            }
        }
    }
}

In this example i have directly done it in MainActivity you may have different composable to implement it. In this we have invoked the LazyHorizontalStaggeredGrid function to implement horizontal grid to our UI. We have defined itemList to 1 to 50 in a val. After that inside the LazyHorizontalStaggeredGrid coroutine we have just iterated the items and put it in a text function.

Output Of Horizontal Staggered Grid

Lazy Vertical Staggered Grid

To build Lazy Vertical Staggered Grid we need to invoke the function called LazyVerticalStaggeredGrid. Let’s understand Lazy Vertical Staggered Grid by looking at example. It’s just same like Lazy Horizontal Staggered Grid.

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalFoundationApi::class)
    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 = 1f)
            )
        }
        setContent {
            LazyVerticalStaggeredGrid(
                columns = StaggeredGridCells.Fixed(2),
                modifier = Modifier.fillMaxSize(),
                contentPadding = PaddingValues(16.dp),
                horizontalArrangement = Arrangement.spacedBy(16.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                items(items) { item ->
                    RandomColorBox(item = item)
                }
            }
        }
    }
}

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))
}

In this code firstly we create data class containing our height and color after that we created composable function RandomColorBox which contains properties of our Box(Grid) like it’s size,shape and color. After that inside the Main Function we have initialized the items in val containing values from 1 to 100 and mapping it with random size and color to look a little bit attractive.

Output Of LazyVerticalStaggeredGrid

Thank You people for reading this blog till here. If you like this blog do clap it and follow it. Every individual support helps me to work even more harder. If you haven’t saw my past blogs related to jetpack compose and android do check out by clicking on my profile. We will come with another blog related to android and jetpack compose. Till than Happy Coding Guys. 🥰🥰✌️