Blog Infos
Author
Published
Topics
Published
Topics

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

,

Meet Jewel:Create IDE plugins in Compose

Jetpack Compose is the declarative UI toolkit for Android that makes it easy to create beautiful, responsive apps. However, until recently, there was no easy way to use Compose to create IDE plugins without too…
Watch Video

Meet Jewel:Create IDE plugins in Compose

Sebastiano Poggi & Chris Sinco
UX Engineer & UX Design Lead
Google

Meet Jewel:Create IDE plugins in Compose

Sebastiano Poggi & ...
UX Engineer & UX Des ...
Google

Meet Jewel:Create IDE plugins in Compose

Sebastiano Poggi ...
UX Engineer & UX Design L ...
Google

Jobs

No results found.

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

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
Compose is a relatively young technology for writing declarative UI. Many developers don’t even…
READ MORE
blog
When it comes to the contentDescription-attribute, I’ve noticed a couple of things Android devs…
READ MORE
blog
Compose is part of the Jetpack Library released by Android last spring. Create Android…
READ MORE
blog
Welcome to part 5 of “Building a Language Learning App with Compose “ series.…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu