Jetpack Compose — Animation Notes: 2

Building Fab Menu with Compose AnimatedVisibility and Animatable

Photo by Clay Banks on Unsplash

Jetpack Compose is a revolutionary update for building an android app UI. It leveraged the concept of declarative UI and brought the fun in building UI with Kotlin — a dream for many Android devs. If you’re new to Jetpack Compose I recommend you to please go through the following articles:

• Jetpack Compose Components (Part 1)
• Build Android Layouts in JetPack Compose

To learn more about animations in jetpack compose, please read the following article in this animations series:

• “Jetpack Compose — Animation Notes: 1” — Exploring AnimatedVisibility in Compose
• “Jetpack Compose — Animation Notes: 2” — You’re here now
• “Jetpack Compose — Animation Notes: 3” — Exploring LaunchedEffect and InfiniteTransition in Jetpack Compose

With that being said, let’s get started.

Design Fab Button

First, let’s go through a list of composable & fab models that we need to build:

1. Fab data model
2. A simple circular composable with an icon.
3. A label for each fab button.
4. Make the content configurable from the root.

Fab data model

Let’s create a FabItem Kotlin data class with variables, title, icon, and ischild to indicate if the fab button is a child or parent(root button). Have a look:

data class FabItem(
    val imageResourceId : ImageVector,
    val title : String,
    val isChild : Boolean = false
)

A simple circular composable with an icon

Here we use Card and Icon composable to build a circular shape with a purple background and a plus icon respectively. Have a look at the code:

@Composable
fun FabButton(){
    Card (
        elevation = 8.dp,
        backgroundColor = Purple500,
        shape = CircleShape,
        modifier = Modifier
            .clickable {

            }
    ){
        Icon(
            imageVector =…