jetc.dev Newsletter Issue #185
Published: 2023-10-10
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 LazyList
problems,
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 1.5.3
patch
release of Compose, with a few bug fixes.
We also got an update to 1.6.0-alpha07
of Compose. Of note here:
SnapshotStateList
now implementsRandomAccess
GraphicsSurface
is now known asAndroidExternalSurface
dragAndDropSource()
anddragAndDropTarget()
modifiers were addedTextFieldState
now hasUndoState
- We now have
ColorList
andColorSet
collections that avoid allocations
In other Compose design systems:
-
TV Compose was bumped up to
1.0.0-alpha10
with a couple of renames, a newNavigationDrawerItem
, and baseline profiles in both thetv-foundation
andtv-material
libraries -
Wear Compose has a
1.3.0-alpha07
release with improvements toPositionIndicator
Also, we got updates to some Compose-adjacent libraries:
androidx.activity:activity-compose:1.8.0
androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13
androidx.hilt:hilt-navigation-compose:1.1.0-beta01
androidx.navigation:navigation-compose:2.7.4
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Can We Move at a Fixed Velocity?
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.
How Can I Get State From Java?
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 #compose
Slack thread.
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
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Medium: Hacking LazyList in Android Jetpack Compose
Gergely Kőrössy points out a long-standing limitation
with the 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.
Medium: Gestures in Jetpack compose — All you need to know — Part 1
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
modifiers like clickable()
and draggable()
, and different approaches for detecting click, drag, and scroll
gestures.
Medium: Semantics and Accessibility in Jetpack Compose: Part-1
Kaushal Vasava explores semantic nodes in Compose and their relationship to accessibility.
Part 1 looks at the semantics()
and clearAndSetSemantics()
modifiers, SemanticsProperties
and SemanticsActions
, and how to examine the merged and unmerged semantics trees.
Part 2
looks at a wide range of accessibility concerns, from touch target sizing through
providing adequate descriptions and custom accessibility actions.
Medium: Custom toggle buttons in Jetpack Compose
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.
How to Request Location Permissions in Jetpack Compose
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.
Medium: Shimmer & Shadow Loading Effect Animation with Jetpack Compose
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.
Medium: Square size in Jetpack Compose
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 squareSize()
modifier
that overcomes these limitations.
Video: Take your shot of Vitamin!
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
Resource Roundup
100% pure code!
GitHub: oOJohn6Oo / JWheelPicker
GitHub user oOJohn6Oo brings us a trio of iOS-style “wheel picker” composables:
JWheelPicker()
(single items), JMultiWheelPicker()
(multiple columns), and
JDateWheelPicker()
(date selection).
GitHub: JaberAhamed / CardScratch
Jaber Ahamed created an ImageScratch()
and a CardScratch()
composable to implement
the “scratch-off” UI pattern.
Other Interesting Links
- Gist: chiragthummar / LinkifyExample.kt (
ClickableText()
sample) - 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)
Notable Releases
Maps for Android released 3.0.0 and 3.1.0 in rapid succession.
Koin, a popular dependency inversion framework for Kotlin, is up to 1.5.0 with improved Compose 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?!?