jetc.dev Newsletter Issue #216
Published: 2024-05-28
KotlinConf 2024 is in the books, and Compose for iOS is now in beta!
We also look at Compose previews, on their own and for screenshot testing. We guard against regressions and take a look at some kelp. We explore animations and Compose Compiler reports. And we look at some tables and charts implementations.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
Compose Multiplatform 1.6.10
is now stable! 🎉
JetBrains announced this
as part of KotlinConf 2024, pointing out that Compose for iOS is now officially in beta,
as Jacob Ras also noted.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
Why Does Font()
Work on iOS But Not Android?
The Font()
function is part of Compose Multiplatform, but its Android actual
implementation
has a bug. If you try switching to a new FontResource
conditionally,
the change will not take effect.
Fortunately, a fix has already been committed.
See more in this week’s highlighted Stack Overflow question.
Why Is My Vector Blurry?
Using the scale()
modifier on an Image()
that has an ImageVector
will result in
a blurry image. That is because scale()
scales the bitmap generated from the vector,
not the vector itself. See a workaround using LocalDensity
in this week’s highlighted
Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Effortless Compose Compiler report analysis
Shreyas Patil walks us through using a Gradle plugin to convert Compose Compiler reports into more-usable outputs, generating color-coded Web pages for composables, classes, and more.
Medium: Let’s Complicate Compose Previews
Kerry Bisset points out that a lot of simplified @Preview
examples leave a lot to the
imagination when it comes to implementing @Preview
for real-world apps. Kerry explores
more complex scenarios, including dealing with viewmodels and dependency inversion frameworks.
Medium: Migrating UI-oriented Android library to Compose Multiplatform (Android/iOS)
Andrei Riik reports on what it takes to convert a Compose for Android library’s code base to Compose Multiplatform, including both UI elements and other aspects (networking, disk caching, image loading).
Medium: Enhance Your Design System Workflow with Kelp Plugin for Android Studio
Anton Popov reviews Kelp, an Android Studio plugin that I mentioned last week. Kelp offers IDE affordances to help steer developers towards using your design system composables, such as custom icons for auto-completion and gutters.
Video: The complete guide to Compose animations
Eliza Camber delivered a half-hour Android Makers presentation on the wide range of animation
options in Compose, from AnimatedVisibility()
and animateContentSize()
to animate*AsState()
and rememberInfiniteTransition()
.
Medium: Adaptive Compose Layouts
Stefano Natali reports on the updates to Compose Material3 Adaptive announced at Google I|O,
including improvements to WindowSizeClass
and the introduction of NavigationSuiteScaffold()
and ListDetailPaneScaffold()
.
Compose Guard: Detecting Regressions In Jetpack Compose
Joe Roskopf writes about his Compose Guard library, which I also mentioned last week. Compose Guard helps you detect regressions where formerly stable types became unstable or formerly skippable composables become non-skippable.
Exploring the Compose Preview Screenshot Testing tool
Joe Birch is back, this time reporting on the new Compose Preview Screenshot Testing tool
announced at Google I|O 2024. This allows us to set up a dedicated screenshotTest
sourceset
containing @Preview
composables whose screenshots can be captured and compared to detect
regressions.
Medium: How to Use Vibration Effects in Android Apps (Using Jetpack Compose)
Michihiro Iwasaki examines how to employ VibrationEffect
to implement one-shot and repeating
vibrations to serve as haptics for user interactions, such as clicks on buttons.
Other Interesting Links
- Change App Theme - Personalizing Accessibility
- Exploring Shared Element Transition with Navigation in Compose
- Medium: Compose: Fundamental Concepts
- Medium: Comprehensive Guide to ModalBottomSheetLayout in Jetpack Compose
- Medium: Custom SearchBar with Jetpack Compose
- Medium: Determining screen types for Adaptive UI in Compose/Kotlin Multiplatform (Desktop and Android)
- Medium: Exploring Multiple Ways to Populate a LazyColumn in Jetpack Compose
- Medium: Guide for Jetpack Compose Navigation
- Medium: Implementing a Custom Infinite Scroll Pager in Jetpack Compose
- Medium: Jetpack Compose: A Powerful Tool for Building Modern Android UIs
- Medium: Mastering Device Orientation Detection in Jetpack Compose
- Medium: Shared Element Transition in Jetpack Compose
- Medium: Understanding the Layout composable in Jetpack Compose
- Slides: Jetpack Compose Mechanism
Resource Roundup
100% pure code!
GitHub: Breens-Mbaka / Jetpack-Compose-Tables
Breens Robert brings us a BeeTablesCompose()
implementation with support for column
headers, alternating row colors, and a lot of control over table and cell rendering.
GitHub: ehsannarmani / ComposeCharts
Ehsan Narmani created an elaborate charting and graphing library, with animated effects to go along with a rich set of chart types (pie, ring, column, line, etc.).
GitHub: ChainTechNetwork / ComposeMultiplatformMediaPlayer
Chetansinh Rajput released a library with support for video playback on Android and iOS in Compose Multiplatform. See this Medium post for more.
GitHub: ChainTechNetwork / ComposeMultiplatformScreenCapture
Medium user ssvaghasiya published a library to capture composable screens to a bitmap for both Android and iOS in Compose Multiplatform. See this Medium post for more.
Other Interesting Links
- Gist: KvRae / VerticalDashedDivider.kt (vertical dashed line)
- GitHub: linhnvtit / quick-image (image loading)
- GitHub: reyazoct / ComposeNav (nav)
Notable Releases
Horologist — the Wear Compose equivalent of Accompanist — now has
a 0.6.12
release. This adds
experimental support for type-safe Navigation for Compose, while it deprecates the Google
Sign-In implementation.
Voyager — a popular Compose Multiplatform-capable navigation library — is
up to 1.1.0-beta01
,
with multiplatform Lifecycle support.
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?!?