Experience Real-Time UI Preview with Android Studio’s Flamingo for Compose

Android Studio Flamingo shows live preview of compose UIs on the device

Google has recently released Android Studio Flamingo, which comes with new preview functions. Live Edit is one of the new features that allows developers to see changes in interaction with the UI toolkit Compose on a connected device. Additionally, the IDE shows how background images affect themed app icons and dynamic colors.

Similar to previous Android releases, every Android Studio version has an animal as its godfather. After Arctic Fox, Bumblebee, Chipmunk, Dolphin and Electric Eel, it’s the flamingo’s turn this time. Android Studio is based on JetBrains’ development environment IntelliJ IDEA, and the current release is based on IntelliJ IDEA 2022.2, released in July 2022.

The Compose toolkit for creating UIs has followed a declarative approach and a reactive programming model since its stable release in 2021. Composable functions define the individual control elements or parts of them. The editor offers a preview window for Compose UIs, which can display variants for different device types in parallel since the Dolphin release.

The new live edit function of Android Studio Flamingo transfers changes to the UI created with Compose directly to a connected end device or an Android emulator. Live Edit transfers changes either manually when saving or automatically each time a composable function is adjusted. However, it is marked as experimental in the current release and has some limitations mentioned in the documentation.

Android 13 introduced themed icons that change color to match the selected background. Android Studio Flamingo shows a preview of the icon for different backgrounds, and dynamic colors are also part of the Material 3 design specification. For this purpose, the component @Preview knows the new attribute wallpaper, which controls the preview rendering of dynamic colors.

Along with customizable configurations of an app for profiling, Android Studio Flamingo also features extensions to the Network Inspector, which can be found on the Android Developer Blog. However, the new Gradle plug-in 8.0 brings changes that may require adjustments to own projects. An article has been published that describes measures and tools to help with the upgrade.

Android Studio can be downloaded for Windows, macOS, Linux and Chrome OS from the project page.

Leave a Reply