jetc.dev Newsletter Issue #237
Published: 2024-10-22
We got a new patch release for production Compose, a new Compose alpha, and a stable Compose Multiplatform — let’s see what they have!
We also take a tour of droidcon NYC 2024, spend a lot of time on adaptive UIs, and review
what MVI is about. Plus, we convert HTML into AnnotatedString objects, render math expressions,
and see a Compose implementation of Microsoft’s Fluent design system.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
We got an updated set of BOMs for 2024.10.00:
androidx.compose:compose-bom:2024.10.00androidx.compose:compose-bom-alpha:2024.10.00androidx.compose:compose-bom-beta:2024.10.00
The production BOM contains the 1.7.4 patch release, containing a couple of bug fixes.
The alpha BOM should contain the 1.8.0-alpha04 release, which contains some performance
improvements and bug fixes, along with improvements like a new containerSize property
on WindowInfo (available via LocalWindowInfo).
Compose Material3’s main artifact is up to 1.4.0-alpha02,
with many API changes and bug fixes.
Glance has a 1.1.1 patch release
to deal with a protobuf-related security issue.
Wear Compose is out with a 1.5.0-alpha04 release, renaming LazyColumn() to
TransformingLazyColumn(), adding rotary support for pagers, and more.
We also got a bunch of updates to Compose-related libraries, including:
androidx.activity:activity-compose:1.9.3androidx.constraintlayout:constraintlayout-compose:1.1.0-rc01androidx.constraintlayout:constraintlayout-compose-android:1.1.0-rc01androidx.lifecycle:lifecycle-runtime-compose:2.9.0-alpha05androidx.lifecycle:lifecycle-runtime-compose-android:2.9.0-alpha05androidx.lifecycle:lifecycle-runtime-compose-jvmstubs:2.9.0-alpha05androidx.lifecycle:lifecycle-runtime-compose-linuxx64stubs:2.9.0-alpha05androidx.lifecycle:lifecycle-viewmodel-compose:2.9.0-alpha05androidx.lifecycle:lifecycle-viewmodel-compose-android:2.9.0-alpha05androidx.lifecycle:lifecycle-viewmodel-compose-desktop:2.9.0-alpha05androidx.navigation:navigation-compose:2.8.3androidx.navigation:navigation-compose:2.9.0-alpha01androidx.navigation:navigation-fragment-compose:2.8.3androidx.navigation:navigation-fragment-compose:2.9.0-alpha01
JetBrains released the stable version of Compose Multiplatform 1.7.0.
Elvira Mustafina has a blog post
that runs down the changes.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Can I Manage Text Wrapping?
A common UI pattern is a Row() of text with an image on one end. You may want to keep
the image and have the text fill up the remaining space, with word-wrap as needed. One approach
for this is the ill-used fill parameter on the weight() modifier, as we see in this week’s
highlighted Stack Overflow question.
How Can I Preview Interaction States?
@Preview is powerful, but it may require you to tweak your composable API to help it. For
example, if you want to preview pressed, hovered, etc. as interaction states, your API needs to
accept an InteractionSource so that the preview function can supply the states. Learn a bit more
about this in this week’s highlighted Kotlinlang #compose Slack thread.
droidcon NYC 2024
droidcon NYC 2024 had a tremendous lineup of speakers and subjects, including several Compose and Compose Multiplatform presentations:
- A Snapshot Preview of Paparazzi 2.0
- Android, Compose, Multiplatform & Server - Inject them all with Koin
- Build adaptive apps with Jetpack Compose
- Building a Compose-idiomatic CameraX Viewfinder: A Deep Dive
- Building a performant and privacy-conscious screen capture library for Compose
- Building an AR app with Compose & OpenGL ES
- Building Modern Responsive Widgets with Jetpack Glance
- Compose Multiplatform on iOS: On the Road to Stable
- Composing an API the right way
- Composing ViewModels: Breaking ViewModels into smaller self-contained UI models
- Creating a Custom Compose Layout, Step-by-Step
- Cross-Platform Animations with Rive
- Declarative APIs for Declarative UIs: Designing Media Friendly Jetpack Compose Components
- Deep Dive into the Compose Compiler
- Lost in the Weeds - Exploring Navigation Libraries for Compose
- Modern Paging at Scale: StoreX + Compose
- Navigation in a Multiplatform World: Choosing the Right Framework for your App
- Unpacking Compose Multiplatform Accessibility
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Creating a responsive dashboard layout for JetLagged with Jetpack Compose
Google’s Rebecca Franks walks us through how they updated the JetLagged dashboard to adapt to different window sizes, animating content as the window is resized.
Video: Custom Adaptive layouts in Compose
Google’s Alex Vanyo walks us through various approaches for implementing adaptive layouts in Compose UI, while avoiding the complexities of subcomposition most of the time.
Video: Adaptive #AskAndroid
A panel of Googlers took a series of questions in a live presentation, ranging from “What new APIs in Compose will help me build adaptive layouts?” to “How can I test my app across different devices including tablets and foldables?”
Video: Top Tech Expert Roberto Orgiu Shares Secrets for Mastering Large Screens and Foldables!
Google’s Roberto Orgiu joined the Code with the Italians team to review approaches for adaptive designs and their Compose implementations, among other topics.
Comprehensive Guide to Glassmorphism in Jetpack Compose
Muhammad Youssef reviews what “glassmorphism” means, then walks us through an implementation
of a glassmorph() modifier and GlassmorphicLayer() container composable that implement
a glassmorphic effect.
Medium: Exploring MVI Principles and Unidirectional Data Flow with Jetpack Compose
Ramadan Sayed gives us a deep dive into what the Model-View-Intent (MVI) architecture pattern looks like and its benefits. The post continues with a demonstration of how to implement this architecture without the support of a third-party framework like Orbit-MVI.
Implementing Overslide interaction in Jetpack Compose
sinasamaki wanted an overscroll animation on a slider, where once you reach the end the slider
stretches. This turned out to be more complicated than overscroll effects on a column, and
sinasamaki demonstrates how to implement it via a custom trackOverslide() modifier.
Medium: Side-effects in Jetpack Compose with Practical Examples
S.V.K Sri Charan K gives us concrete use cases for LaunchedEffect(), rememberCoroutineScope(),
DisposableEffect(), SideEffect(), and SnapshotFlow.
Other Interesting Links
- Building a Feature-Rich Android/iOS App with Kotlin Multiplatform and Jetpack Compose
- First Impressions of Compose Multiplatform
- Making Compose Multiplatform apps feel at home: removing ripple animation on iOS
- Medium: 10 Common Mistakes to Avoid in Jetpack Compose
- Medium: Architecture at Scale: Part 7
- Medium: Build Stunning Grids in Minutes with LazyVerticalGrid
- Medium: How to create Toast message in KMP Compose MultiPlatform | Android and iOS
- Medium: Jetpack Compose Deep Linking: Type-Safe Navigation Done Right
- Medium: MVVM with Jetpack Compose: Structuring Your App for Clean Architecture
- Medium: Subcomposition in Jetpack Compose: How to Use Measurement Phase Data in Other Children
- Medium: Using Kotlin Reflection to Automate Compose Navigation
- Reusable Styles in Compose
- Round and Round: Creating a Fun Custom Dial Control in Jetpack Compose
Resource Roundup
100% pure code!
GitHub: cbeyls / HtmlConverterCompose
Christophe Beyls published a Compose Multiplatform library for Android and Desktop that converts HTML into AnnotatedString
for rendering in a BasicText() or Text() composable.
GitHub: elhaouzi / CExpr
GitHub user elhaouzi released a set of composables for rendering mathematical functions, reminiscent
of MathJax but without the WebView requirement.
GitHub: Konyaco/compose-fluent-ui
GitHub user Konyaco is making available a library that aims to implement Microsoft’s Fluent design system in Compose Multiplatform.
GitHub: chouaibMo / RowKalendar
Chouaib Mounaime brings us a RowKalander() Compose Multiplatform composable for rendering
a single-row horizontal-paging date selector.
Other Interesting Links
- GitHub: keyrunHORNET / composeNepaliDatePicker (Nepali date picker)
- GitHub: sasssass / easynavigation (KSP annotations for building nav routes)
- GitHub: tamimattafi / krop (image cropping, not to be confused with
https://github.com/timhuang1018/Krop) - GitHub: walter-juan / compose-icon-collections (icons as vectors)
Notable Releases
Compose Unstyled is up to 1.7.1,
adding support for Compose Multiplatform 1.7.0.
Compose Destinations is up to 1.11.7, to update its dependencies to the latest stable versions.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-12-10: A Compose Multiplatform alpha! Hot reload! Presentation! Sprites! Calendars!
- 2024-12-03: Rebecca Franks on clipping and masking! Stefano Natali on graphicsLayer()! FunkyMuse on type-safe nav results! And... if we have enough maps, do we need to store our maps in a Map?!?
- 2024-11-26: Math! Shared element transitions! Custom modifiers! Macrobenchmark! Adapting to platform-specific design systems! And... why does wrapContentSize() not wrap my content size?!?