jetc.dev Newsletter Issue #201

Published: 2024-02-06

This week, we key() some Row() contents and annotate an image. We explore font scaling, modal sheet confirming, and screenshot disabling. We also drag stuff around a lazy list and see the latest patch release for Compose Multiplatform.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Use Weight in a LazyRow()?

The answer is “use Row() instead”, especially since this particular row does not otherwise need to be lazy. For the “but I need to use key()!” people, Row supports key() as well (and has its own items() function in RowScope, if that helps). Learn more in this week’s highlighted Stack Overflow question.

How Do I Annotate an Image?

Sometimes, an app needs to display an image and then put annotations on top of it: arrows, captions, etc. The trick to doing this sort of thing is the drawWithContent() modifier, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Compose Multiplatform Documentation Survey

JetBrains is conducting a survey of Compose Multiplatform users, specifically to try to improve the documentation.

Watch How Alex Vanyo Transforms Android UI with TwoPane Composable!

The Code with the Italians team hosted Google’s Alex Vanyo to explore the list-detail UX pattern, but offering a manual option for dragging the divider splitting the list and detail panes.

Medium: Font Size Considerations for Accessibility

Eevis Panula is back, with another lesson in accessibility! A fair number of Android device users increase the font scale via the Settings app, and it would be really nice if your app would accommodate their wishes! Eevis explains how to test font scale with your composables and some simple techniques for improving how you handle larger font scales.

Medium: Graceful Exits: Implementing Close Confirmation for Jetpack Compose ModalBottomSheet

Katie Barnett returns, with tips of how to address a common UX problem: lost input in a modal bottom sheet, because the user accidentally closes it. Katie shows how to add a confirmation dialog, triggered by onDismissRequest on ModalBottomSheet(), so you can intercept the closure before you lose anything!

Medium: How to use Resources in Compose Multiplatform

JetBrains recently added a way to implement Android-style resources for Compose Multiplatform. Kashif Mehmood explores how this works, including the composeResources/ directory and the Res class that is code-generated from the entries in that directory. See how to use it with strings, drawables, and fonts!

Medium: Lifecycle-aware in Jetpack Compose: Disabling Screenshot for a Single Screen

Ahmet Furkan Sevim examines using LifecycleEventObserver with a DisposableEffect() to find out about lifecycle changes in our composable’s hosting activity or fragment. Ahmet’s specific use case: adding and removing FLAG_SECURE from your window to conditionally attempt to block screenshots from certain composables.

Medium: Preview Jetpack Compose Views in Seconds! (PreviewGenerator Lib)

Vram Voskanyan talks about his Preview Generator library, which gives us a @DataPreview annotation that code-generates test data for our composable previews.

Other Interesting Links

• Experimenting with Composable Presenters in Kotlin Multiplatform
• Exploring Jetpack Compose: Aspect Ratio Modifier
• Jetpack Compose Mastery Part 1: A Comprehensive Guide to Building Your First Compose Application
• Medium: Building a Custom Exposed Dropdown Menu with Jetpack Compose
• Medium: Building a Tinder-Like Swipe Card in Jetpack Compose
• Medium: Compose Navigation
• Medium: Create a signature Application with Text and Draw using Jetpack Compose
• Medium: How to get your location in Jetpack Compose
• Medium: Jetpack Compose 🚀 Beginner’s Series
• Medium: Mastering Screen Transition Tracking in Jetpack Compose
• Medium: Performance In Jetpack Compose — Stability & Immutability
• Medium: Translucent Status Bar with Edge-To-Edge Jetpack Compose
• Medium: Using LookaheadScope and intermediateLayout for bottom bar inside Compose navigation
• Medium: What is remember exactly in Jetpack @Compose
• Video: Kotlin and WebAssembly: Unleashing Cross-Platform Power

Resource Roundup

100% pure code!

GitHub: volodymyr-sch / DraggableList

GitHub user volodymyr-sch brings us draggable() and longPressDraggable() modifiers, along with rememberDraggableLazyListState(), to enable drag-and-drop repositioning of elements within a lazy container such as LazyColumn().

Notable Releases

Compose Multiplatform now has a 1.5.12 release, offering support for Kotlin 1.9.22 along with a Desktop bug fix.

Google Maps for Android is up to 4.3.3 with a bug fix.

JetLime, a library for rendering timelines, is up to 2.1.0. 2.0.0 and 2.0.1 overhauled the API and offered both horizontal and vertical timelines. 2.1.0 adds a new dual-content edition, where content can reside on both sides of the timeline.