Exploring AnimatedVisibility in Compose

Jetpack Compose — Animation Notes: 01

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

With that being said, let’s get started.

Introduction to Animation in Compose

As an introduction to animations in Compose, the android team has provided a tree map to choose where to use which APIs. Have a look:

source: https://developer.android.com/jetpack/compose/animation

My intent in this article is to animate the composable when there is a visibility change.

Simple Composable Design

Let's start by creating a simple composable, we’ll have a simple circular icon designed using Box & Icon compostables and a simple Button. Have a look:

Have a look at the preview:

Visibility Changes Without Animation

For this, we need to add a couple of parameters to the VisibilityAnimationSample composable.

1. show: A boolean to determine the visibility.
2. updateVisibility: Kotlin function to update the visibility.

Have a look:

@Composable
fun VisibilityAnimationSample(
    show : Boolean,
    updateVisibility : () -> Unit
){
    
      ...