jetc.dev Newsletter Issue #162

Published: 2023-04-25

We have a wave of new Compose releases: Compiler, BOM, new stable patch releases, and new alphas.

Beyond that, we examine what it means to remember modifiers and look at several solutions to a common text layout problem. We work around @Preview limitations and track user interactions with our composables. And we spend more time with effects and CompositionLocal.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler is up to 1.4.6. This relaxes the Java version requirement for your build environment — it is back down to Java 11 from the Java 17 introduced with 1.4.5.

The Compose BOM is up to 2023.04.01. That pulls in mostly 1.4.2 patch versions with bug fixes.

We also have 1.5.0-alpha03 of the main Compose dependencies. Of note:

• The text rendering code is overhauled, though without API changes

• There is a change in the way the recomposer works, such that animations and other uses of withFrameNanos() will block when the hosting Android activity is stopped (but other recompositions tied to data will continue as before)

• SubcomposeLayout() behaves better with lookahead animations, for at least some scenarios

• Compose Material’s BottomDrawer() and BottomDrawerState are migrating to SwipeableV2 APIs

Also:

• Navigation for Compose is up to 2.6.0-beta01

• Wear Compose is up to 1.2.0-alpha09

• Compose for TV is up to 1.0.0-alpha06, with more Material3 support

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Should We Remember Our Modifiers?

We usually think of remember() as being used for data that gets used by composables. However, we can also remember() entire modifiers, and that approach can reduce some unnecessary recompositions. Learn how this works, and what is coming in future Compose versions to help further, in this week’s highlighted Stack Overflow question.

Is Immutability a Problem With Frequent State Changes?

We like immutable data. We like performant apps. Are those two in conflict when working with Compose UI? The answer is “probably not, if you do it right”. See more in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Medium: Problem solving in Compose Text

Google’s Alejandra Stamato explores multiple solutions for a typical but non-trivial problem: how to center text in a box that should always be two lines of text high, even if there is only enough text for a single line. Alejandra examines six total solutions, with pros and cons of each.

Medium: Improvements and Changes to Compose’s Pointer Input

Google’s Jeremy Walker looks at recent changes to the pointerInput() modifier to help boost performance. Those changes might affect you, if you use pointerInput() directly or implement your own gesture detectors.

Tips for working with Preview in Jetpack Compose

Kaung Khant Soe looks at the ever-popular @Preview annotation and ways to organize your composables to avoid rendering errors. In particular, this post examines the limitations of @Preview when working with the Jetpack ViewModel and ways to work around those limitations.

Pragmatic strategies on Jetpack Compose migration

Alex Styl returns, exploring the scope and process of migrating an app from classic views to composables. Alex advocates for leaving existing screens alone, focusing instead on building up new UI elements and screens using composables.

Medium: How we built user interaction tracking for Jetpack Compose

Sentry offers a crash logging service, including tracking user events that lead to crashes (“breadcrumbs”). In this post, Markus Hintersteiner reviews how Sentry hooked into Compose UI to track user interactions and create breadcrumbs, which required a lot of poking around the Compose implementation to find suitable hooks.

Medium: Mastering Side Effects in Jetpack Compose

Aayush Chaudhary takes a deep dive into effects and related functions, such as rememberUpdatedState(), produceState(), and snapshotFlow(). See also this Medium post and this Medium post for additional coverage of this topic from this past week.

Medium: Video Wizard with HorizontalPager | ExoPlayer | Jetpack Compose

Akbolat Sadvakassov examines using ExoPlayer for multiple pages within a HorizontalPager(), leveraging a pool of player instances to offer smooth transitions between pages.

Medium: Be a local and look no further: CompositionLocals in Jetpack Compose

Ryan Wong was wondering what CompositionLocal implementations existed in Compose. The answer: at least 21, all of which Ryan reviews in this post.

Other Interesting Links

• Adding Compose to Existing Espresso Tests with createEmptyComposeRule()
• Encapsulate your @Composable functions
• Medium: Basic Compose MapView with Custom Marker Made Easy
• Medium: Understand Drawing Arc of A Path In Jetpack Compose Canvas
• Medium: Refreshing onNewIntent with Jetpack Compose
• Medium: Fancy animated UI with AGSL shaders in Jetpack Compose
• Medium: Using Coil in Jetpack Compose: A Guide to Loading and Displaying Images
• Medium: Implement Nested navigation with Bottom Navigation Bar in Android Jetpack Compose
• Reveal: A Jetpack Compose Library for Engaging Reveal Effects
• Firebase Google & Phone Auth in Jetpack Compose
• Medium: Reasons to Love the New Jetpack Compose Pager
• Medium: Common Mistakes to Avoid in Jetpack Compose
• Medium: Crafting Responsive UIs with Jetpack Compose
• Medium: Fun with Icons and Colors: Creating Interactive Buttons in Jetpack Compose
• Medium: Implement GraphQL with Jetpack Compose — Android
• Medium: Kotlin with Jetpack Compose — Appbar
• Medium: Kotlin with Jetpack Compose— Login Page UI

Resource Roundup

100% pure code!

GitHub: exyte / AndroidAnimatedNavigationBar

Exyte published a library with an AnimatedNavigationBar() composable, for implementing your typical sort of bottom navigation bar. It offers a set of animations for the changes in the selected navigation item. See this blog post for more!

GitHub: programadorthi / kotlin-routing

Thiago Santos is starting on a general-purpose Kotlin/Multiplatform routing engine, based on Ktor’s engine. It implements a basic stack metaphor, and it is up to you to supply composables (or whatever) for rendering each route.