iOS Like Modal View Dialog Animation In Jetpack Compose

Implementing dialog animations in Android has never been easier

Photo by Juan C. Palacios von Pexels

As a mobile developer, you often have the requirement to emulate the system behavior of another OS. Even if we don't implement a cross-platform app, designers sometimes don’t consider system-specific behavior and develop their designs according to one or the other system.

Sometimes you don’t come around to adapting to these requirements. An example is a requirement to implement a screen that uses the animation of an iOS modality view, which is a part of Apple’s human guidelines while functioning as a full-screen dialog.

While this can be easily done in iOS, at least from my experience, in Android it’s quite a hustle.

I will therefore share with you how I achieved this task by implementing a Jetpack Compose Dialog that will imitate the slide in animation while remaining the functionalities of the composable.

Update 07.03.2023

Thanks to viktor de pasquale for mentioning in the comments a way for overcoming the problem with the magic animation time number. I updated the article accordingly thanks to his suggestion.

• Removed now obsolete Box layout around AnimatedBottomSheetTransition