jetc.dev Newsletter Issue #200

Published: 2024-01-30

It’s the 200th issue of this newsletter! 🎉

To celebrate, Google released a stable version of Compose 1.6.0, a new alpha, plus stable and alpha editions of Wear Compose! It’s possible that the release timing was pure coincidence with the milestone newsletter issue, though. Regardless, in this issue, we learn more about what’s in here!

Beyond that, we try to look at a tiny WebView, create an OTP-style field, and navigate around bottom sheets. We also explore a chip field implementation for Compose Multiplatform and learn about some library updates, including to Compose Multiplatform itself.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

The Compose BOM is up to 2024.01.00. This maps to the new 1.6.0 stable release (and 1.1.2 of Compose Material3), which has just a few bug fixes from the last RC.

We also got 1.7.0-alpha0, as the release train never slows down. Of note:

• Strong skipping mode is enabled by default

• Improved ClipboardManager with support for non-text content, such as images

• IndicationNodeFactory was introduced, and we can get some performance gains from it

• BasicTextField2() is ready for use, albeit as an experimental API

• Added a receiveContent() modifier for receiving rich content from keyboards or the clipboard

• TextInputService was deprecated, replaced by PlatformTextInuptModifierNode

• Compose Material deprecates RippleTheme and rememberRipple(), replaced by RippleConfiguration and related APIs

Similarly, Wear Compose has a 1.3.0 stable release and a 1.4.0-alpha01 release. 1.3.0 should be the same as the preceding RC. The alpha includes:

• Support for entry transitions with SwipeDismissableNavHost

• Mandatory display of the PositionIndicator when the screen is first shown, which may break your screenshot tests

• Adopted the new ripple APIs and dropped RippleTheme

• ColorScheme is now immutable

And, the following Compose-adjacent libraries got updates:

• androidx.activity:activity-compose:1.9.0-alpha02
• androidx.fragment:fragment-compose:1.7.0-alpha09
• androidx.hilt:hilt-navigation-compose:1.2.0-beta01
• androidx.lifecycle:lifecycle-viewmodel-compose:2.8.0-alpha01
• androidx.navigation:navigation-compose:2.8.0-alpha01

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Is My WebView Tiny?

When using AndroidView() as a way to get classic View classes into composables, sizing is up to you. You may need to customize the layoutParams to get what you want rather than zero height and width, as we see in this week’s highlighted Stack Overflow question.

How Can I Share Function Type Implementations?

Compose makes extensive use of slot parameters and other function types, such as for callbacks. Sometimes, a particular composable takes two function types, and we want to use the same implementation for both. Is it better to share a lambda, implement a local function, or do something else? Learn more in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

What’s new in the Jetpack Compose January ’24 release

Google’s Ben Trengrove reviews what is in the 2024.01.00 edition of the Compose BOM. Of note, they boosted performance directly in Compose plus are giving us better tools to declare what types are stable (potentially improving our own recomposition counts). “Strong skipping mode” is an experimental opt-in capability to also attempt to improve recomposition counts, at the risk of introducing subtle problems. Fonts now opt out of font padding by default and support non-linear scaling. And, we have platform drag-and-drop support.

Embed a SearchBar into a TopAppBar in Jetpack Compose

Andrew Lord wanted to add a SearchBar() into a TopAppBar() rather than using it as a standalone bar. This post shows how Thomas accomplished this, including having proper styling for the SearchBar() and properly transitioning to the active search state.

Jetpack Compose Puzzlers

Thomas Künneth is back, this time exploring some “hey, wait a minute!” moments that newcomers to Compose encounter, such as “how can composables build a UI if they do not return anything?” and “why do I get different results when my modifiers are in a different order?”.

Medium: Code TextField in Jetpack Compose

Lucian Ghimpu wanted an OTP-style field, where individual characters would appear in their own rounded-square containers. Lucian demonstrates how to do this, leveraging decorationBox on BasicTextField() to be able to draw the per-character borders.

Medium: Jetpack Compose Bottom Sheet Management

Tarik Yasar walks us through using Compose Destinations and its DestinationStyleBottomSheet style to help deal with the complexities of navigating to and from bottom sheets, including returning results from the sheet.

Medium: Adaptive Responsive Layout in Jetpack Compose

Jolly Raiyani explores WindowSizeClass and calculateWindowSizeClass() in the Compose Material3 realm, to help create user interfaces that adapt to different screen sizes and postures (e.g., landscape).

Medium: ColorScheme in Kotlin for Android Jetpack Compose: From Basics to Advanced Applications

Jigar Rangani peeks at ColorScheme: how to define them, how to add them to a theme, and how to switch schemes on the fly, including for manual opt-in of particular colors, such as a high-contrast scheme.

Other Interesting Links

• Beginner Tips for Creating Composables with Jetpack Compose
• Enhancing User Experience with Gestures in Jetpack Compose
• Implementing WebView With Jetpack Compose
• Listening for element events with Compose for Web
• Medium: Android Vibrations in Jetpack Compose
• Medium: Creating SharedViewModel in Android
• Medium: Enhancing Performance in Jetpack Compose
• Medium: Exploring CustomScopes in Jetpack Compose: A Practical Guide
• Medium: How to use Coil with rememberAsyncImagePainter() in Jetpack Compose to load .svg .gif and .jpg/.png from URL
• Medium: Jetpack Compose Basics: Discovering the Fun of Boxes and Surfaces
• Medium: Jetpack Compose Layout Basics
• Medium: Magic Wavy Button in Jetpack Compose. Unleashed the Power of AGSL Shaders in Android.
• Medium: Multiplatform Magic: One Codebase, Three Platforms
• Medium: Scaffold Story in Android Jetpack Compose
• Medium: Snackbar using Jetpack Compose
• Medium: Using Proguard with Jetpack Compose Desktop: size reduction, performance gains, and challenges
• Navigating Effect Handlers and Side Effects in Jetpack Compose: A Practical Introduction

Resource Roundup

100% pure code!

GitHub: Deaths-Door / advanced-chiptextfield-compose-kmp

Aarav Shah has created a Compose Multiplatform edition of a text entry field supporting conversion of keywords into chips. Chips can have an X affordance to remove the chip, be checkable, or have avatar images (e.g., for contacts).

Notable Releases

JetBrains has released 1.6.0-beta01 for Compose Multiplatform. This adds improved support for multiplatform releases (e.g., translated strings), first-class artifacts for Compose for Web/WASM, experimental support for common-module tests, and more.

Google’s Maps for Compose is up to 4.3.2, with a couple of bug fixes over 4.3.0.

Shreyas Patil’s Capturable has been updated to v2.0.0, with a new modifier-based API for declaring the capturable area, along with improved support for scrollable content.