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

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

What does the Immutable annotation mean?

Quote from official documentation: “ The immutability of the class is not validated and is a promise by the type that all publicly accessible properties and fields will not change after the instance is constructed.

This is a stronger promise than val as it promises that the value will never change not only that values cannot be changed through a setter.

Immutable is used by composition which enables composition optimisations that can be performed based on the assumption that values read from the type will not change.”

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.

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