The latest release of Jetpack Compose, announced at Google I/O 2024, brings several extensions, including support for shared element transitions, lazy list item animations, improved performance, and more.
Shared element transitions allow you to create transitions between screens that have common elements. An example of their use is navigating from a listing to a detail view where an image shown in the listing seamlessly transitions into the detail view.
Shared elements can be used through a few high-level APIs to create a SharedTransitionScope and wrap the AnimatedContent into a SharedTransitionLayout. Then you use Modifier.sharedElement() and Modifier.sharedBounds() to specify the composables that should be animated and the transition bounds. Composables to match between screens are identified in a very simple way through their associated keys.
Lists including lazy items and columns may be now animated automatically when inserting, removing and reordering items. This is accomplished easily by adding them the Modifier.animateItem modifier. This will automatically manage fade-in and fade-out animations as shown in the following images.
(image courtesy of Google)
Another useful new feature in Jetpack Compose June 2024 is support for lazy flow layouts that render only the content that actually fits within the screen bounds. This functionality is provided through ContextualFlowRow and ContextualFlowColumn. Lazy flow layouts are useful when dealing with large numbers of items, which are rendered only partially to optimize performance and resource utilization. This is different from traditional flow layouts, which compose all items regardless of their visibility.
On the performance front, Jetpack improves by 17% the "time to first pixel" benchmark, as well as scroll performance. In both cases, just rebuilding your app will increase performance, although the changes to the API used in scrolling could require some code changes. Another factor contributing to Jetpack Compose improved performance is the adoption of a more efficient data structure to implement the slot table and more efficient detection and removal of unused composition groups.
On the library ecosystem side, this release of Jetpack Compose brings a typesafe navigation component based on Kotlin Serialization that enables defining navigation graphs using a Kotlin DSL. The new navigation component relieves developers from having to keep track of string routes, manually manage arguments and their types, and do string interpolation, Google says.
As a final note, Jetpack Compose also includes now a Compose-only CameraX component providing a new Viewfinder composable to display a camera preview that always shows the correct aspect ratio and rotation, taking into account the window size, the display orientation, and so on.