Expandable lists in Jetpack Compose

Expandable views are a common way to hide details of a visualised data structures. Let’s take a look at how the following can be achieved in 6 steps, using compose:

Step 1: Creating a data class for card

data class ExpandableCardModel(val id: Int, val title: String)

Step 2: Create a data source

We’ll be using AAC viewModel example here, but feel free to use any “controller” abstraction you like.

CardsViewModel.kt

This class serves 4 purposes:

1. Holds list of cards using MutableStateFlow in _cards field, and exposes a StateFlow to observers via cards field.
2. Holds list of expanded card ids in _expandedCardIdsList, and exposes them to observers via expandedCardIdsList field.
3. Provides list of cards using getFakeData() function. We need a coroutine here, to emit the testList into _cards.
4. Contains a onCardArrowClicked() to mark cards as expanded by adding tapped card id to _expandedCardIdsList, and notify observers about this change by mutating the state of _expandedCardIdsList.

Step 3: MainActivity

MainActivity.kt

We are initialising the CardsViewModel here, and providing it to the CardsScreen composable function.

Step 4: CardsScreen composable

We are observing the viewModel.cards containing our list of cards, and viewModel.expandedCardIds with the help of .collectAsState().

What’s the purpose of .collectAsState()? It’s converting StateFlow into a State.
Update: using .collectAsStateWithLifecycle() which is the same thing, but lifecycle aware, and helps to reduce memory consumption when UI is not visible to the user. More info in this article.

What’s a State? From the documentation: ” State is a value holder where reads to the value property during the execution of a composable function, the current recomposeScope will be subscribed to changes of that value.”

Step 5: ExpandableCard composable

ExpandableCard composable

val transitionState = remember {
    MutableTransitionState(expanded).apply {
        targetState = !expanded
    }
}

Here we declare MutableTransitionState, and put it into our transition composable. Our initialState will depend on whether we have this card id in our expandedCardIds, and targetState will be a reversed initialState, since we only have 2 states.

Basically we have the following view hierarchy here:

Card (CardView) {
    Column (LinearLayout) {
        Box (FrameLayout) {
            CardArrow() (ImageView/Button)
            CardTitle() (TextView)
        }
        ExpandableContent()(views to expand/collapse)
    }
}

Since we don’t suffer from multiple layout passes in compose ( except for ConstraintLayout as for now, but we won’t need it in most cases anyway with compose), we don’t need to worry about nesting layouts anymore.

Now let’s look how do we animate things, using previously defined transitionState on a Card example:

animating background card colour & it’s elevation

This is where we define our start and end values for views ( elevation, colour, size, etc).

Card background colour will be white when card is collapsed and yellow when expanded. Elevation will be 24dp for an expanded card, and 4dp for a collapsed one.

Card(
    backgroundColor = cardBgColor,
    elevation = cardElevation,
    ...

Now we just pass these values to the composable, and that’s it.

Step 6: creating CardTitle, CardArrow and ExpandableContent composables

CardTitle composable

CardArrow composable

Modifier.rotate(degrees) allows us to rotate the arrow when we tap on it. arrowRotationDegree is being passed from ExpandableCard composable.

ExpandableContent composable

The most interesting part here is the AnimatedVisibility composable. It will do all the heavy lifting for us.

AnimatedVisibility attributes:

• visible, initiallyVisible - allow us to animate content only on first expansion. So when we scroll back to a card that was in expanded state before - no animation will be played
• enterTransition is EnterTransition
• exitTransition is ExitTransition

That’s it, now you have an idea on how to create a basic expandable list with animations, using Jetpack Compose. If you have suggestions on how this example can be enhanced - please feel free to contact me.

Since compose is in alpha, and is destined to change — this post will be periodically updated to reflect the latest version. Post was created when compose was in 1.0.0-alpha09.

Current compose version 1.3.0-alpha03.

Full, working example can be found here

Skyyo/ComposeExpandableList