jetc.dev Newsletter Issue #159

Published: 2023-04-04

This week, we wonder about stateful composables and long for a donut. We explore circuits, paparazzi, pagers, and LiveData problems. And we see a way to figure out why our composables might be recomposing, along with a Kotlin/Mutliplatform project generator.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Implement a Donut Chart?

A donut chart is like a pie chart with the center cut out. Learn how to render one, even with animated effects, in this week’s highlighted Stack Overflow question.

Should Composables Be Stateful?

In theory, we prefer stateless composables, for easier testing and greater flexibility. In practice, we sometimes prefer composables like Scaffold(), which manage some state internally, because they are easier to use. We explore this dichotomy in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Mercari reduces 355K lines of code, a 69% difference, by rebuilding with Jetpack Compose

This is an official Compose UI “puff piece”, outlining the results of Mercari’s rewrite of the app UI in Compose.

Video: The Circuit - Compose-driven Architecture for Kotlin and Android

The Talking Kotlin crew met up with Amrita Venkatraman, Kieran Elliott, and Zac Sweers of Slack, to discuss Circuit. Circuit was mentioned here back in issue #144 and is a Kotlin/Multiplatform library that implements the entire UI architecture via composables, not just the UI elements.

Compose & Paparazzi: Automatically find @Preview composables at runtime

codedogg likes Paparazzi for UI testing, comparing screenshots with known-good copies. However, by default, Paparazzi requires you to manually set up those UI tests. codedogg illustrates how we can use reflection to identify relevant @Preview-annotated functions and test them from a single test class.

Many developers used the pager composables from Accompanist, and now they have been replaced by official implementations. Domen Lanišnik examines the HorizontalPager() and VerticalPager() composables, including manually setting the page size and content padding, the impact of beyondBoundsPageCount, and more.

Medium: Performance Issues with Jetpack Compose & LiveData as a state holder

Roman Kamyshnikov reports on a specific problem with using postValue() on LiveData, where composables that depend on the LiveData as a source of state might lag due to the asynchronous nature of postValue().

Change themes programmatically

Alex Styl explores supporting both light and dark themes, either implicitly (via isSystemInDarkTheme()) or explicitly (parameter supplied to the theme-defining) composable.

Medium: How to Fix Keyboard Issues Introduced in the Latest Jetpack Compose (1.4.0)

Patryk Kosieradzki ran into problems with Compose 1.4.0, DialogFragment, and ComposeView, where the soft keyboard (IME) stopped working. While there is an official bug report for the problem, Patryk demonstrates how to create a ComposeView replacement that works around the bug.

Mert Toptas explores Navigation for Compose’s support for deeplinks, in particular how to write a UI test using ActivityScenarioRule that tests whether the deeplink renders the UI that you expect.

Resource Roundup

100% pure code!

GitHub: theapache64 / rebugger

GitHub user theapache64 gives us a Rebugger() composable that logs to Logcat what particular State change(s) triggered a recomposition. This is helpful to determine the “why” of recomposition, given that you have an idea of what composables are over-composing.

GitHub: ygorluizfrazao / composed-permissions

Ygor Frazão offers up a library that helps to hide the complexity of runtime permission requests, via a WithPermission() composable that has a slot-based API for the content to show before permission is granted, after the permission is granted, and after the permission is denied.

Compose Multiplatform Wizard

This site generates a Compose-centric Kotlin/Multiplatform project for you, given an application ID and display name. You can choose from a small set of initial dependencies for networking, navigation, resource management, and more.

GitHub: Mercandj / compose-aspect-ratio-reference

Jonathan Mercandalli released a small library that adds an aspectRatioReference() modifier, to allow you to specify an aspect ratio whose sizes are tied to a parent composable. See this Medium post for more!