Photo by Julian Hochgesang on Unsplash
In this article, you will learn how to create an expandable section using Jetpack Compose. Expandable sections are like drawers in your app. They help with organizing your content and provide a better user experience.
Let’s get started
First, create the ExpandableSectionTitle Composable. Select your preferred icon based on the isExpanded state and use a Row to place it next to the section title.
| @Composable | |
| fun ExpandableSectionTitle(modifier: Modifier = Modifier, isExpanded: Boolean, title: String) { | |
| val icon = if (isExpanded) Icons.Rounded.KeyboardArrowUp else Icons.Rounded.KeyboardArrowDown | |
| Row(modifier = modifier.padding(8.dp), verticalAlignment = Alignment.CenterVertically) { | |
| Image( | |
| modifier = Modifier.size(32.dp), | |
| imageVector = icon, | |
| colorFilter = ColorFilter.tint(color = MaterialTheme.colorScheme.onPrimaryContainer), | |
| contentDescription = stringResource(id = R.string.expand_or_collapse) | |
| ) | |
| Text(text = title, style = MaterialTheme.typography.headlineMedium) | |
| } | |
| } |
Then create the ExpandableSection Composable. To ensure reusability, pass the content as a parameter when creating this function.
| @Composable | |
| fun ExpandableSection( | |
| modifier: Modifier = Modifier, | |
| title: String, | |
| content: @Composable () -> Unit | |
| ) { | |
| var isExpanded by rememberSaveable { mutableStateOf(false) } | |
| Column( | |
| modifier = modifier | |
| .clickable { isExpanded = !isExpanded } | |
| .background(color = MaterialTheme.colorScheme.primaryContainer) | |
| .fillMaxWidth() | |
| ) { | |
| ExpandableSectionTitle(isExpanded = isExpanded, title = title) | |
| AnimatedVisibility( | |
| modifier = Modifier | |
| .background(MaterialTheme.colorScheme.secondaryContainer) | |
| .fillMaxWidth(), | |
| visible = isExpanded | |
| ) { | |
| content() | |
| } | |
| } | |
| } |
Create the isExpanded state using rememberSaveable. This ensures it remains intact during both configuration changes and recompositions.
Use a Column to position the content beneath the section title. With the help of AnimatedVisibility, you can add the content to the screen with a beautiful animation.
Finally, you can use the ExpandableSection to present your content. Here’s an example of how to display text when it’s expanded:
| @Composable | |
| private fun InstructionsView(modifier: Modifier = Modifier, instructions: String) { | |
| ExpandableSection(modifier = modifier, title = stringResource(id = R.string.how_to_prepare)) { | |
| Text( | |
| modifier = Modifier.padding(8.dp), | |
| text = instructions, | |
| color = MaterialTheme.colorScheme.onSecondaryContainer | |
| ) | |
| } | |
| } |
OUR VIDEO RECOMMENDATION
Jobs
Let’s run the code and see what it looks like.
You can find the complete code for this project on GitHub:
Happy coding! 👨💻
This article was previously published on proandroiddev.com
