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.

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!

Notable Releases

Alexander Zhirkevich’s Compose Cupertino is up to 0.1.0-alpha04, with several new components and lots of improvements.