jetc.dev Newsletter Issue #210
Published: 2024-04-16
This week, we look at Hilt and Koin, two of the most popular dependency inversion options for Compose apps. We examine a new Compose Web app framework, one that supports server-side rendering. We also peek at a couple of minor releases, including to Compose Multiplatform.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
Compose Multiplatform 1.6.2
is available.
This is based on Compose 1.6.4, supports Kotlin 2.0.0-RC1, and has a few bug fixes.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
Why Does My ViewModel Lose State on Tab Switches?
If you are using Navigation for Compose with a TabHost()
and BottomNavigationBar()
,
you need to take care to use the correct version of navigate()
if you want your
tabs to retain their viewmodel state. Learn more in this week’s highlighted
Stack Overflow question.
How Can I Size, But Not Render, a Composable?
When loading data, we might know the general characteristics of what we will render,
enough to calculate the target size, but we cannot actually render it yet. For
example, we might want a placeholder at first, which we swap with the real content
into the same visual space on the screen. See a couple of options for pulling off
this trick in this week’s highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Google Drive cut code and development time in half with Jetpack Compose and new architecture
Google’s Nick Butcher and Florina Muntenescu profile how the Google Drive team leveraged Compose UI for the Drive app’s home screen and the benefits that they saw from the approach.
Dependency Injection in Compose
Google’s Jonathan Koren reviews the basics of Hilt, then walks through some of the challenges when applying Hilt to Compose UI apps.
Medium: Enhancing Jetpack Compose with Koin: The Composable View Module with Dependency Injection
Hilt is not the only dependency inversion framework option for Compose apps. In
particular, if you want to use Kotlin Multiplatform or
Compose Multiplatform, Hilt is not an option… but
Koin is. Kerry Bisset walks us through how to use it with a ViewModel
in
composables, including a couple of challenges.
Medium: Introducing Trio | Part III
Eli Hart concludes his three-part series on AirBnb’s Trio framework for use with Compose UI, specifically looking at Props. Props are ways of passing model data down a hierarchy of Trios. Eli also explores Trio’s navigation support and outlines how much Airbnb has been applying Trio.
Medium: Implement Pinch-to-Zoom for your Image Grids by Jetpack Compose (Part 1)
Bình Phạm wanted pinch-to-zoom functionality on a grid of images, so zooming
out shows lots of tiny thumbnails, while zooming in can largely fill the screen
with a single image. The solution involves a custom detectPinchGestures()
function, which in turn updates the number of columns, with AnimatedVisibility()
to handle the transition in column counts.
Other Interesting Links
- Biometric Authentication with Cryptographic in Jetpack Compose
- Magnifying Glass with Jetpack Compose: Implementing a Zoom Feature
- Medium: A Guide To Navigation in Jetpack Compose ,Questions and Answers
- Medium: Building a Media Player App with Jetpack Media3 in Jetpack compose
- Medium: First look at RuntimeShaders in Compose
- Medium: Jetpack Compose, Ktor, and Koin DI Unlocking MAD Skills
- Medium: Theming 🎨 like a 💙Pro in Android Compose
Resource Roundup
100% pure code!
GitHub: rjaros / kilua
Robert Jaros released a new Web app framework, powered by Compose, targeting
Kotlin/Wasm and Kotlin/JS. It supports server-side rendering (SSR) and offers a
composable API reminiscent of compose-html
.
GitHub: mahdihassani-dev / OtpViewCompose
GitHub user mahdihassani-dev created an OtpView()
for OTP/PIN entry, with customizable
colors and text styles.
GitHub: erdo / n8
Eric Donovan released a pure Kotlin navigation library with a Compose wrapper. See this post to learn more!
Other Interesting Links
- GitHub: arpitkatiyar1999 / Country-Picker (country code drop-down and text field)
- GitHub: RavenLiao/HtmlAnnotator (HTML renderer with CSS support)
Notable Releases
Alexander Zhirkevich’s Compose Cupertino is up to 0.1.0-alpha04
,
with several new components and lots of improvements.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 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?!?
- 2024-11-19: Compose alphas! Compose Multiplatform patch! PaddingValues! Graphics layers! Swiping! Heatmaps! Navigation! And... why did we get a new production Compose BOM?!?