Effortlessly Toggle Between LazyColumn and LazyVerticalStaggeredGrid

Hey, Compose lovers👋🏻

Let’s learn some interesting feature that will be helpful for you in the future. So, today we will see how can we convert a LazyColumn to a LazyVerticalStaggeredGrid & vice-versa using a button. So recently I was working on my first compose app named Notify which is a simple Note application made using Modern Android development tools with a proper architecture. So, as I was developing my app and almost made the MVP version of it, then I thought of seeing & doing some research about other apps which are on PlayStore, there I found Google Keep Notes, I guess it sounds familiar to most of you. So after spending time on Google Keep Notes and noticing its features of it, I came across this toggle button on the SearchBar which makes a Column into a Grid View, I was a bit fascinated with this feature and started doing some research on Google about it and as expected got nothing useful related to this😅, so I thought of jumping into the code and git it a try.

Result of switching layout

Let’s get started 🚀

Step 1: Add a SearchBar.

So create a SearchBar where you want to show a toggle button that will help you to switch between this layout.

var isGridView by rememberSaveable { mutableStateOf(false) }

SearchBar(
    modifier = Modifier
        .align(Alignment.Start)
        .fillMaxWidth()
        .padding(10.dp),
    query = ,
    onQueryChange = {},
    onSearch = {
        isGridView = !isGridView
    },
    active = false,
    onActiveChange = {},
    placeholder = { Text(stringResource(R.string.search_your_notes)) },
    leadingIcon = { Icon(Icons.Default.Search, contentDescription = null) },
    trailingIcon = {
        LayoutToggleButton(
            isGridView = isGridView,
            onToggleClick = { isGridView = !isGridView }
        )
    }
) {
}

So, you will be thinking what is LayoutToggleButton no need to worry in the next step we will discuss it only.

Step 2: Create a Composable function for LayoutToggleButton

So after implementing the SearchBar now, we will be working on the icons means we will be performing a logic that will change the icon if the user wants his list of notes in LazyColumn or LazyVerticalStaggeredGrid. So for this create a different composable function with the name of LayoutToggleButton.

@Composable
fun LayoutToggleButton(
    isGridView: Boolean,
    onToggleClick: () -> Unit
) {
    val customGridViewImage = painterResource(R.drawable.grid_icon)
    val customAgendaViewImage = painterResource(R.drawable.list_icon)

    val imageToShow = if (isGridView) customGridViewImage else customAgendaViewImage

    val tint = LocalContentColor.current

    IconButton(
        onClick = onToggleClick,
        modifier = Modifier.padding(4.dp)
    ) {
        Image(imageToShow, contentDescription = "Toggle Button", colorFilter = ColorFilter.tint(tint))
    }
}

Step 3: Switch Layout according to the button toggled

So we first check whether the layout is in LazyVerticalStaggeredGrid or in LazyColumn based on the isGridView boolean variable. This variable determines whether to display the notes in a grid view or a regular list view.

if (isGridView) {
    // Code for displaying notes in a staggered grid layout
} else {
    // Code for displaying notes in a vertical list layout    
}

• Grid View Layout (Staggered Grid): If the isGridView condition is true, the code enters the block for the grid view layout. It uses the LazyVerticalStaggeredGrid composable to display notes in a staggered grid with two columns.

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Fixed(2),
    modifier = Modifier
        .fillMaxSize()
        .padding(0.dp, 5.dp, 0.dp, 0.dp), // give padding upon your requirement
) {
        GridNoteCard() // Loop through each note and display it as a GridNoteCard
    }
}

• List View Layout: If the isGridView condition is false, the code enters the block for the list view layout. It uses the LazyColumn composable to display notes in a vertical list.

LazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .padding(0.dp, 5.dp, 0.dp, 0.dp), // give padding upon your requirement
) {
        ListNoteCard() // Loop through each note and display it as a GridNoteCard
    }
}

Using these steps you can easily switch between LazyColumn & LazyVerticalStaggeredGrid using a toggle button.

If you need a reference you can check out the code that I have implemented on my app named Notify

Final Result

I am confident that you will find this blog extremely helpful! 😀

If you like this write-up, do share it 😉, because…

“Sharing is Caring”

Thank you! 😄

Let’s catch up on Twitter or LinkedIn to know more about me 😁

Bye 👋

Stackademic 🎓

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us X | LinkedIn | YouTube | Discord
• Visit our other platforms: In Plain English | CoFeed | Venture | Cubed
• Tired of blogging platforms that force you to deal with algorithmic content? Try Differ
• More content at Stackademic.com