1. Scroll indicator
2. New visibility Modifier
3. Visual debugging of animations
4. Shared context for ComposeView
5. Conclusion
Jetpack Compose, the declarative UI kit from Jetbrains is constantly evolving. Two months ago Compose 1.10 was released and now Compose 1.11 it’s already in alpha and you can try out some of its new features.
In this article we are going to deep dive into the most interesting features of this new version (the version used for this analysis is Compose 1.11-alpha03, newer versions could change a lot of APIs).
Scroll indicator
Using code from the Google repository we can see an example of how a scroll indicator looks like when an UI element has scrollable content.
As you can see in this basic example, the indicator is shown at the right and it has a semi transparent black color. To be able to show the scroll indicator we have to use the interface ScrollIndicatorFactory, when implemented we receive as a parameter of the function createNode the scroll state, the viewport info and the orientation of the screen, with this information we can show a scroll indicator however we like.
New visibility Modifier
In Compose 1.11 a new Modifier to change visibility is added, Modifier.visible() let´s us hide visually an UI element, it skips the drawing phase without changing the space that occupies in the interface.
In this example we can see how when applied, Modifier.visible(false) hides the darker element but the space is still being occupied.
Visual debugging of animations
The new composable LookaheadAnimationVisualDebugging is going to make life so much easier when perfecting animations, it shows the following information:
- Animation limits.
- Animation trajectory.
- If a transition is active.
The visual information is available for the shared elements transition (SharedElement) and for the animateBounds modifier.
Shared context for ComposeView
A new flag was created to enable shared context for ComposeView. This is going to be very useful for applications that haven’t migrated the codebase to 100% Compose and still depend of the interoperability of Compose with the old view system. The flag is enabled like this (it should be enabled in the Application class before any activity is initialised):
Once set to true, the way views with Composables inside are initialised is changed. Now every view is gonna share a context, instead of being isolated. This is going to enable the sharing of internal resources (internal caches, text measurement caches…), greatly increasing performance, since creating a new composition for each ComposeView is very costly in terms of performance, while linking to an existing one is not.
These are some of the most interesting features that Compose 1.11-alpha03 brings to the table. We’ll have to wait for future versions and see what’s new in the betas and RCs of version 1.11.
Conclusion
Compose 1.11 continues to drive the evolution of Jetpack Compose with improvements aimed at designing new modern interfaces with performance in mind. New visual customization options, new tools for debugging animations and optimizations of performance is gonna make daily work easier.
