jetc.dev Newsletter Issue #185
We have a new BOM and a bunch of new Compose alphas, so we check them out!
Also, we see what droidcon NYC 2023 had to offer. We look at
accessibility, and gestures. And we examine some wheel picker implementations along
with a “scratch-off card” UI.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
The Compose BOM is up to
2023.10.00, mapping to a new
release of Compose, with a few bug fixes.
We also got an update to
1.6.0-alpha07 of Compose. Of note here:
GraphicsSurfaceis now known as
dragAndDropTarget()modifiers were added
- We now have
ColorSetcollections that avoid allocations
In other Compose design systems:
TV Compose was bumped up to
1.0.0-alpha10with a couple of renames, a new
NavigationDrawerItem, and baseline profiles in both the
Wear Compose has a
1.3.0-alpha07release with improvements to
Also, we got updates to some Compose-adjacent libraries:
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
tween() takes a duration, and it is easy to just hand it a constant duration. However,
that means that animations of different distances use different velocities to meet the constant
time. Instead, you can calculate your desired time based on a fixed velocity, as we see
in this week’s highlighted Stack Overflow question.
If your source of truth is a legacy Java class, you might not be good position to have
it use something like
MutableState directly. You still need a
MutableState, but you
may need to have some additional bridge code to arrange to update that state when the
Java object’s data changes, as we see in this week’s highlighted Kotlinlang
droidcon NYC 2023
droidcon NYC 2023 had quite a few presentations related to Compose, including:
- 90s Website … in 2023 on mobile in Compose … for science
- Adopting Jetpack Compose @ Scale
- Boosting Compose UI from Sluggish to Snappy
- Bootstrapping Simple Server Driven Ui from a Design System
- Building graphs in Jetpack Compose with Canvas
- Building Shared UIs Across Platforms With Compose
- Composing Creatively with Custom Layouts
- Coupling Compose - Interoperability in a Legacy Codebase
- Getting your apps ready for Material 3
- Migrating Android apps from Fragments to Jetpack Compose with Nibel
- Modern Compose Architecture with Circuit
- Practical Magic with Animations in Compose
- Reimagining text fields in Compose
- Shared mobile UIs with Compose Multiplatform
- Trio - Compose Architecture with Mavericks
- Unlocking the Power of Shaders in Android with AGSL and Jetpack Compose
Posts, videos, and other new information related to Jetpack Compose!
Gergely Kőrössy points out a long-standing limitation
Lazy*() family of composables: if you use keys, then the scroll position changes when
you change which item is first in the list. Gergely demonstrates a reflection-based hack to
avoid this behavior.
Radhika S brings us a deep dive into gesture detection with Compose UI (and this is only part 1!). Radhika
looks at the
pointerInput() modifier and detectors based upon it, higher-level
draggable(), and different approaches for detecting click, drag, and scroll
Kaushal Vasava explores semantic nodes in Compose and their relationship to accessibility.
Part 1 looks at the
SemanticsActions, and how to examine the merged and unmerged semantics trees.
looks at a wide range of accessibility concerns, from touch target sizing through
providing adequate descriptions and custom accessibility actions.
Medium user Renatojobal walks us through the individual elements of a toggle button and
how to create one from scratch, leveraging the
swipeable() modifier to find out about
state change interactions. The result is a
CustomSwitch() composable with configurable
resources for the thumb and track backgrounds.
Requesting runtime permissions can be annoying, and requesting location permissions can be annoyingly complex. Tomer Ben Rachel walks us through what it takes to do this right in Compose UI, including handling a variety of edge cases.
Caner Kaşeler teaches us how to create a shimmer effect in Compose UI for both light and
dark modes. The result is a
shimmerLoadingAnimation() modifier, configurable for the speed
of the animation and the width and angle of the shimmer effect.
It feels like having a square UI element in Compose is easy: just give it a size. That works,
but it has limits, such as not necessarily adapting well to changing content sizes.
Misha Malasai looks at what it takes to create a custom
that overcomes these limitations.
Gerard Paligot delivered a Devoxx presentation on Vitamin Compose, a custom design system, where Decathlon overrode certain Material Design aspects to match their visual identity.
Other Interesting Links
- Medium: Android : Compose Interoperability APIs
- Medium: Animating Dark to Light: A Jetpack Compose Guide for Theme Switching on Android
- Medium: Avoid return statements in Jetpack Compose!
- Medium: Biometric Login System in Android with Jetpack Compose
- Medium: Building the Flappy Musk.eteer Arcade Game with Jetpack Compose
- Medium: Code your UI with Jetpack Compose on Android
- Medium: Creating Reusable UI Components in Jetpack Compose
- Medium: Elegantly Handling Asynchronous Results in Jetpack Compose
- Medium: Handling Android Permissions with Jetpack Compose API
- Medium: Implementing Parallax Carousel from SwiftUI to Jetpack Compose
- Medium: Jet Pack Compose — Understanding ReCompose
- Medium: Jetpack compose — Cognitive overload III
- Medium: Long Press Item Select In Jetpack Compose
- Medium: Mastering Nested Navigation in Jetpack Compose: A Comprehensive Guide with Real-World Examples
- Medium: MVI Architecture With Jetpack Compose
- Medium: Navigating with Jetpack Compose: A Comprehensive Guide to Navigation Components
- Medium: One Time Password (OTP) in Jetpack Compose
- Medium: Recreating WhatsApp Top Bar in Jetpack Compose: Part One
- Medium: Stability in Jetpack Compose & Avoid Recomposition
- Medium: Text in Jetpack Compose - Android
- Medium: Trigger Ripple Effect from Code in Jetpack Compose
- Medium: Understanding Recomposition in Jetpack Compose: Parent and Child Composables
- Medium: ViewModel Management with Jetpack Compose
- Slides: Optimising UI in Jetpack Compose
100% pure code!
Other Interesting Links
- Gist: chiragthummar / LinkifyExample.kt (
- Gist: wing-tree / SwipeToReveal.kt (swipe-to-reveal implementation)
- GitHub: arcanegolem / Lycoris (PDF viewer, not yet published as a library)
- GitHub: mori-atsushi / katalog (build demo screen of app composables)
- 2023-11-21: Compose/Material3/Wear Compose updates! remember()! Adaptive layouts! Compose Multiplatform in 2024! @email@example.com on BasicTextField2()! Compose Multiplatform charts! And... is TV Compose in trouble?!?
- 2023-11-14: Compose Compiler! BasicTextField2()! @firstname.lastname@example.org and animations! Optimization! @email@example.com, JetBrains, and Fleet! JetBrains and plotting! And... we collapse?!?
- 2023-11-07: Compose Multiplatform! Chips in fields! Diffing! Custom fonts in Glance app widgets! Heatmaps! PIN input! And @firstname.lastname@example.org is in a bit of a haze?!?