jetc.dev Newsletter Issue #224
Published: 2024-07-23
This week, we go edge-to-edge and look at performance. We explore derivedStateOf()
and better swipe to dismiss options. And we peek at some “pick a value in a range using a horizontal slider” implementations.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
Why Is My pointerInput()
Lambda Confused?
Lambdas “capture” values at the point the function containing the lambda is executed. This sometimes causes confusion, especially when using delegates (by
keyword) and MutableState
holders. Learn more in this week’s highlighted Stack Overflow question.
How Do I Only Use Unit Tests for CMP?
It would be nice to test Compose Multiplatform using purely the JVM. Roborazzi supports this, but you have to take additional steps to avoid running instrumented tests that you might not want. Learn more in this week’s highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Video: Edge-to-edge and insets
Google is starting a series of short videos on specific Compose UI topics. In this installment, Simona Milanovic looks at enableEdgeToEdge()
, the safe*
properties on WindowInsets
, and more!
Compose Performance
Jaewoong Eum (@skydoves@androiddev.social) is maintaining a roster of articles on improving the performance of your composables, plus links to official documentation on the subject.
How derivedStateOf works: a deep d(er)ive
Zach Klippenstein (@zachklipp@androiddev.social) continues an exploration of the Compose snapshot system, this time focusing on derivedStateOf()
: what it is for, when to use it, and how it actually works. This follow-on post contains a droidcon SF 2024 presentation that Zach delivered on this subject.
Medium: Reordering List via drag n’ drop in Jetpack Compose
Emmanouil Artemakis wanted a single list with two sections, one of which should support drag-and-drop and one of which should not. That broke official drag-and-drop support and most libraries, so Emmanouil built a custom implementation, complete with overscroll support.
Medium: Compose Multiplatform: Localization
Dženan Bećirović examines Compose Multiplatform’s support for string resources, including how to change locales on the fly for both iOS and Android.
Swipe to dismiss compose fun
Lyubomir Ganev (@luboganev@androiddev.social) reviews how to use the new anchoredDraggable()
API to implement the classic swipe-to-dismiss UI pattern, complete with fade-out effects.
Medium: A Simple Way To Handle UI Actions In Jetpack Compose
Ali Mohseni Rad worries about composables having too many callback parameters for UI actions, especially composables representing screens. Ali’s solution is to aggregate those function type parameters into actions classes, so we get the same functionality with fewer discrete parameters in the composable.
Don’t Lock the Screen Orientation! Handling Orientation in Compose
Eevis Panula (@eevis@mas.to) looks at supporting orientation changes: detecting the orientation of the device, retaining state across orientation changes, etc.
Other Interesting Links
- Firebase Authentication With Jetpack Compose. Part 1
- Integrate APIs in Android: Compose, MVVM, Retrofit
- Medium: Adding Shimmer Effect to an Image in Jetpack Compose
- Medium: Advanced Jetpack Compose Layout For Dynamic UI
- Medium: An Inquiry Into the Android WebView for Jetpack Compose
- Medium: Build Your Next App with Compose Multiplatform
- Medium: CMP for Mobile Native Developers — Part. 2: UI
- Medium: Compose Multiplatform (Android & iOS): TabLayout with ViewPager
- Medium: Custom National Card/QR Scanner Cutout with Jetpack Compose
- Medium: How to Create a Duolingo Style Button in Jetpack Compose
- Medium: How to Create an Animated Theme Switcher in Jetpack Compose
- Medium: Implementing Dependency Injection in Compose Multiplatform Projects with Koin Annotations
- Medium: Implementing Swipe Action for Bottom Navigation in Jetpack Compose
- Medium: Integrate Supabase In Android App with Jetpack Compose
- Medium: Permissions with Jetpack Compose
- Medium: Progress Bar using Canvas — Jetpack Compose
- Medium: Reduce, Conquer, Repeat
- Medium: Transforming Figma UI Designs into Jetpack Compose Code with Google AI Studio: A Step-by-Step Guide
- Medium: Truly Beautiful Fading Edges in Jetpack Compose
- Video: Merging SwiftUI and Jetpack Compose Without a Hitch!
Resource Roundup
100% pure code!
GitHub: ismai117 / kottie
GitHub user ismai117 created a Compose Multiplatform library for rendering Adobe After Effects animations, akin to Lottie.
Multiplatform Compose Animations
Touchlab has released some animation support libraries for Compose Multiplatform, including one with 30 different easing functions and one with animate*ValuesAsState()
functions to let you specify multiple waypoints rather than just beginning and ending values.
GitHub: rajdeepvaghela / ValuePickerSlider
Rajdeep Vaghela implemented a horizontal slider styled to resemble classic old radio frequency selectors.
GitHub: LeeWeeder / number-slider
Lyniel Jhay Maquilan implemented the same sort of “pick a number within a range using a horizontal slider” composable, in this case with somewhat different styling.
Other Interesting Links
- Composables Core: Dialog (Compose Multiplatform unstyled
Dialog()
) - GitHub: alexstyl / addcoilmultiplatform (simplifies setting up Coil for Compose Multiplatform)
- GitHub: kizitonwose / Calendar (highly-flexible calendar implementation for Compose Multiplatform)
- GitHub: laetuz / Droidcore (Android component library)
- GitHub: SimformSolutionsPvtLtd / SSCompose-CustomInfoBar (Android snackbar replacement)
- GitHub: wingio / syntakts (syntax parser and highlighter using
AnnotatedString
)
Notable Releases
Horologist has a 0.6.16
release, switching to DateTimeFormatter
for 12-hour time in TimePicker()
and adding better responsive support. 0.5.28
is also available, backporting some 0.6.x
changes to be compatible with 0.5.x
APIs.
Coil is up to 2.7.0
, with some performance improvements, plus updates to the versions of Kotlin, Compose, and Okio that it uses.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 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?!?
- 2024-11-19: Compose alphas! Compose Multiplatform patch! PaddingValues! Graphics layers! Swiping! Heatmaps! Navigation! And... why did we get a new production Compose BOM?!?