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.