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.
Medium: Exploring the Official Pager Composable in Jetpack Compose
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.
Medium: Using Deeplink and UI Testing in Jetpack Compose Navigation
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.
Other Interesting Links
- Using the Navigation Component in Jetpack Compose
- How to handle state in Jetpack Compose
- Medium: Jetpack Compose: Creating Expandable Cards With Content
- Medium: Making a custom shape widget on jetpack compose using Figma and AndroidVectors
- Decimal Input Formatting with Jetpack Compose’s VisualTransformation
- Medium: Migrate from MVVM to MVI
- Medium: Jetpack Compose — Respect the contract of Modifiers
- Medium: Beautiful way to access touch interactions in Jetpack Compose
- Medium: The Pitfalls of Jetpack Compose Recomposition: How to Avoid Breaking Your App
- Medium: Top 5 Android Studio Plugins for Jetpack Compose to Boost Your Productivity
- Medium: How to change status bar color to match your app’s theme in Compose
- Medium: All about AnnotatedString (Jetpack Compose)
- Medium: Android Jetpack Compose for beginners — Part 2
- Medium: Jetpack Compose Tutorial Part 2
- Getting Started with Jetpack Compose Textfield
- What is Jetpack Compose
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!
Other Interesting Links
- GitHub: tunjid / Tiler (paging API with Compose support)
- GitHub: Mr-Pine / Zoomables (zoom composables)
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-10-29: Relay! Paparazzi! droidcon Lisbon 2024! Server-defined UI! And... desktop OS trays?!?
- 2024-10-22: Compose patch! Compose alpha! Compose Multiplatform stable! droidcon NYC! Adaptive UIs! MVI! HTML conversions! Math rendering! And... are we now Fluent in Compose?!?
- 2024-10-15: Alpha and beta BOMs! Compose Multiplatform UI testing! Compose Multiplatform camera apps! Passing data between screens in Navigation for Compose! JSON rendering!