Jetpack Compose Expanded List with Animation

Creating animated Expanded List in Compose is very easy.
To create an ExpandedList, we need two main things

• State : It will keep track whether a List is expanded or not.
• AnimatedVisibility Composable container : It will use State to expand or collapse a list.

Let’s define a state

var expanded by remember { mutableStateOf(false) }

You can see, we have a state named expanded which contains false. So initially our list will be collapsed.

Now Define an AnimatedVisibility that will hide or show its content based on the value of expanded.

AnimatedVisibility(
    visible = expanded,
){
  // you child content here
}

Now all we need is to change the value of expanded from true to false and vice versa. For this we’ll add onClickListener in header, whenever header will be clicked, expanded value will be changed and child will be hidden or shown.

Below is the working code above mentioned.

Thanks for reading this. If you like it, Please hit that clap button :)