Jetpack Compose — Animation Notes: 2

Building Fab Menu with Compose AnimatedVisibility and Animatable

Siva Ganesh Kantamani


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:

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

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:

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

imageVector =