jetc.dev Newsletter Issue #243

Published: 2024-12-03

This week, we try to remove things from a HorizontalPager() and not remove things from a LazyColumn(). We clip our composables, adapt to different screen sizes, and mess with the graphics layer. We learn that JetBrains is in hot pursuit of hot reload. And we explore using MapKit and MapLibre in Compose Multiplatform apps.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can I Animate Item Removals in a Pager?

While LazyColumn(), LazyRow(), etc. offer the animateItem() modifier via LazyItemScope, we lack a similar affordance in the PagerScope offered by HorizontalPager(). With some work, though, we can still animate the removal of items from the pager, as we see in this week’s highlighted Stack Overflow question.

How Can I Stop LazyColumn() From Destroying Stuff?

Lazy containers like LazyColumn() offer their own form of recycling, allowing contents to leave the composition after they have scrolled off-screen. That is fine most of the time, but sometimes that has unwanted side-effects, especially if the composition wraps some stateful View. See a couple of solutions in this week’s highlighted Kotlinlang #compose Slack thread.

Droidcon London 2024

droidcon London 2024 had a wide range of Compose-related presentations, including:

• A Snapshot Preview of Paparazzi 2.0
• Building State Holders in Compose with Molecule: A New Approach to Reusable UI Components
• Crafting Narratives: Shaping TalkBack with Compose Semantics
• Creating a Custom Compose Layout, Step-by-Step
• Cutting-Edge-to-Edge in Android 15: Using Previews and Testing in Jetpack Compose to Manage Insets
• Deep Dive into the Compose Compiler
• Designing scalable Compose APIs
• Hardware development with KMP and Compose Desktop
• Jetpack Compose: Drawing without pain and recomposition
• Navigation in a Multiplatform World: Choosing the Right Framework for your App
• Personalizing Accessibility
• Project Sparkles: how Compose is changing Android Studio
• Streamlining Permission Request in Jetpack Compose
• Tap it! Shake it! Fling it! Sheep it! - The Gesture Animations Dance!
• Text in Compose: Beyond the Basics
• What’s New in Compose Multiplatform - A Live Tour
• Why is adaptive layout a nightmare?

DevFest Venezia 24

Not to be outdone, DevFest Venezia 24 also had some Compose content, such as:

• Beyond the Window: How I used the improved WindowSize Class tooling to make my Android app better
• Compose Animations from A to Z
• JetPack Compose Performance Tips & Tricks
• Practical Tips and Tricks to Improve Your Compose Previews

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Video: Clipping and masking

Google’s Rebecca Franks (Mastodon, Bluesky) walks us through how clipping and masking allow us to control the overall shape of our composable, through the use of things like the clip() modifier, Shape implementations, blendMode, and more.

Medium: Enhancing Adaptive UI in Kotlin Multiplatform with Jetpack Compose

Kerry Bisset gives us a tour of Compose Multiplatform’s “adaptive” family of libraries, ported from the originals in Compose Material3. In addition, Kerry walks through a MultiWindowSizeLayout() use case, showing how it helps you set up distinct UIs for different window sizes.

Medium: Elevating Your Jetpack Compose UI with GraphicsLayer

Stefano Natali (Bluesky) reviews the role of the graphicsLayer() modifier and demonstrates how it can be used for positioning, rotating, scaling, and otherwise mutating the rendered output of a composable, as well as copying its content to a bitmap.

Medium: Integrating MapKit in Compose Multiplatform

Attila Polacsek explains how to create a Compose Multiplatform wrapper around mapping libraries, with MapKit for iOS and Google Maps for Android.

Achieving Type-safe Navigation Results in AndroidX Compose for KMP

FunkyMuse (Bluesky) explores one gap in the type safety offered by Navigation for Compose: getting results passed back from screens to prior screens. FunkyMuse then demonstrates how to wrap the BackStackEntry-based approach offered by Navigation for Compose to layer type safety on top.

Jetpack Compose Modifiers: Unleashing Hidden Potential

The Wawandco team walks us through an image gallery scenario, showing how custom modifiers can handle a lot of the complexity, working in tandem with composables for describing the overall UI.

Other Interesting Links

• Compose Animation, Under The Hood - Part II
• Compose Multiplatform Bridging: A Guide to Seamless Cross-Platform UI Development
• How to Handle UI Events in Jetpack Compose: A Complete Guide
• Medium: A Deep Dive into Modifier Hierarchy
• Medium: Building an Advanced Lazy List with Jetpack Compose: Performance, Dark Mode, and State Hoisting
• Medium: Jetpack Compose: A Better Preview Architecture
• Medium: Senior Level Radio Buttons in Jetpack Compose: A Comprehensive Guide
• Medium: Fetching Data Using Retrofit in Jetpack Compose: A Complete Guide
• Medium: Handling User Interactions in Jetpack Compose
• Medium: Mastering UI States in Jetpack Compose with sealed class
• Medium: Implement Biometric Authentication in Android Apps
• Medium: 7 Simple Ways to Animate Your UI with Jetpack Compose
• Medium: Use Jetpack Compose Modifier Like a Pro: Understanding Modifier Order and Why Sequence Matters
• Medium: Adding a Custom Scrollbar to a Column in Jetpack Compose
• Medium: Custom Slider in Jetpack compose — Android Kotlin
• Medium: Simplifying Automotive UIs with Jetpack Compose
• Medium: Building a State Management Wrapper for Android Using Koin, and Jetpack Compose
• Medium: Understanding State in Jetpack Compose with Simple Examples
• Medium: Image Carousel in Jetpack compose
• Medium: Integrating Koin Dependency Injection with Jetpack Compose in Android
• Medium: How to Crop an Image in Android Using Jetpack Compose
• How to create a scrollable chart in Compose Multiplatform

Resource Roundup

100% pure code!

GitHub: JetBrains / compose-hot-reload

JetBrains is experimenting with “hot reload” technology for Compose to accelerate UI development. Quoting the documentation, “No guarantees apply.” But, then again, the same can be said for this newsletter… 😁

GitHub: sargunv / maplibre-compose

Sargun Vohra is working on a Compose Multiplatform wrapper around MapLibre, presently supporting Android and iOS.

GitHub: DeveloperSyndicate / Composense

GitHub user DeveloperSyndicate has released a library that exposes composable functions that emit sensor readings via supplied function type parameters.

GitHub: zach-klippenstein / constraints-explorer

Zach Klippenstein (Bluesky) has published some code to help you visualize how Compose’s constraint system impacts your widgets and screens. It helps you create an interactive @Preview function with sliders to set the min/max width/height and see how your component reacts.

Other Interesting Links

• GitHub: Aryan2k / JetpackComposeOtpViewer (PIN/one-time password entry widget)
• GitHub: iZakirSheikh / toolkit (Material 2/3 widgets)
• GitHub: LukaLike / TabSlider (seekbar/slider widget)
• GitHub: lynxal / KMM-Permissions (Multiplatform permissions for Android and iOS)

Notable Releases

Coil is now out with 3.0.4 with more bug fixes.

Compose Unstyled is up to 1.20.0, adding detent change confirmation support.

The SVG to Compose project has a 2.0.0 release, adding a Gradle plugin, Dokka support, and a few new CLI options.