jetc.dev Newsletter Issue #177

Published: 2023-08-15

This week, we celebrate new stable releases of Compose and Wear Compose, along with new alphas for both!

In addition, we look at subsampling images, flow layouts, and drag-and-drop. Plus, we see the first sign of the Iguana release for Android Studio. Plus, in honor of Ms. Swift’s Eras tour, we teach our composables to shake it off.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose 1.5.0 shipped as a stable release! 🎉 This is also packaged in the 2023.08.00 edition of the Compose BOM.

We also got Compose 1.6.0-alpha03, which mostly appears to be bug fixes.

Wear Compose shipped its 1.2.0 stable release, in addition to 1.3.0-alpha03. The alpha includes swipe-to-reveal options for cards and chips, along with the usual slate of bug fixes.

And, in Compose-related libraries, Navigation for Compose is up to a 2.7.0 stable release.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do We Control the Password Dot?

In a TextField() with a PasswordVisualTransformation, we see dots for each entered character. But, what if we want something else… such as bigger dots? The key is in the mask parameter to the PasswordVisualTransformation constructor, as we see in this week’s highlighted Stack Overflow question.

What Does “Run In Any Order” Really Mean?

Quoting the docs, “ If a composable function contains calls to other composable functions, those functions might run in any order.” That is a somewhat confusing statement. See how some developers unpack that in this week’s highlighted Kotlinlang #compose Slack thread.

droidcon Berlin 2023

droidcon Berlin 2023 had a lot of Compose-related presentations, inclding:

• Keynote: Kotlin and the Multiplatform Future
• Accompanist Libraries: Enhancing Your UI with Ease
• Adopting Jetpack Compose Safely
• Blast Off: Managing Hundreds of UI Updates for Emoji Cannons
• Building a Highly Customizable Theming Engine for Android Automotive Using Jetpack Compose
• Chaining Jetpack Compose Modifiers Beyond Intuition
• Compose Performance: Hunting for Unnecessary Recompositions
• Composed for Success: Automatic Instrumentation in Jetpack Compose
• Composing Large Screens
• Conquer Your Compose Navigation with KSP & KotlinPoet in a Multi-Module Project
• Creating Your First Wear OS App Using Compose
• Exploration of Touch & Input in Jetpack Compose
• Gesture-Driven, Multiplatform Transitions with Appyx
• Improving LazyColumn Performance
• Inject Your Jetpack Compose Application with Koin
• Kicking Back with Compose for Android TV
• Shared Mobile UIs with Compose Multiplatform
• Super Fast Jetpack Compose with Relay

Composable Commentary

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

What’s new in the Jetpack Compose August ’23 release

Google’s Ben Trengrove walks us through what showed up in Compose 1.5.0, with their focus on performance. Learn how they boosted modifier performance and memory use, with follow-on impacts on text rendering. There is also a companion post on Wear Compose 1.2 reaching stable status.

Podcast: Compose Multiplatform on iOS in Production at Instabee

The Talking Kotlin team chatted with Partha Muruganandam and Johannes Svensson about their use of Compose Multiplatform at Instabee, a family of delivery services operating in northern Europe.

Medium: Effortlessly Toggle Between LazyColumn and LazyVerticalStaggeredGrid

Quite a few apps let the user switch between list and grid rendering for a collection of content. Aritra Das examines what it takes to implement that in Compose UI, using an IconButton() as the toggle between the two modes and using LazyVerticalStaggeredGrid() and LazyColumn() for the two styles of rendering.

Building a sub-sampling image viewer for Compose UI

Saket Narayan created telephoto, inspired by the legendary subsampling-scale-image-view library, to render large images in a memory-efficient fashion. Telephoto supports sub-sampling images, gesture support for pan and zoom, and more.

Add Shake Animations to your Composable

sinsamaki wants to give your composables a bit of a wiggle. For example, you might use that sort of shake animation to highlight an element (e.g., unread messages), to indicate an error, etc. To that end, sinsamaki gives us a shake() modifier and ShakeController to implement such an animation in an easy fashion.

Video: Unleash Design Fluidity: Flow Layouts in Jetpack Compose

Jessica Randall delivered a presentation as part of the Women Developer Academy and Developer Communities in Africa. Jessica explores FlowRow() and FlowColumn(), including various options for arrangement, cross-axis alignment, how sizing rules behave for content in a flow, and more.

Tabbed Navigation for Android TV using Jetpack Compose

Joe Birch continues playing with TV Compose, this time looking at TabRow() and Tab() composables for implementing a tabbed UI, along with how to change the main content based on the tab selection.

Medium: Seamless Play of D&D — Implementing Drag and Drop Across Multiple Screens in Your Android App with Jetpack Compose

Nirbhay Pherwani explores what it takes to support drag-and-drop between composables. Nirbhay uses a composition local to track drag targets, along with detectDragGesturesAfterLongPress(), as the foundation of the implementation.

Other Interesting Links

• Adding Firebase Cloud Messaging to a Jetpack Compose app
• Column And Row In Jetpack Compose
• Custom circle progress in Jetpack Compose
• Decorator Pattern in Jetpack Compose Android Apps
• Dialog APIs in Material 3 Jetpack Compose (with Example)
• ExpandableListView under 2 mins using jetpack compose
• Exploring Scaffolds in Jetpack Compose
• From Android Views to Jetpack Compose- Migrate a recycler view to the Jetpack Compose Lazy Column
• Medium: Android Jetpack Compose State Concept — Hoisting & Unidirectional Flow
• Medium: Compose Multiplatform — managing UI State on iOS
• Medium: Effortless Navigation with Compose
• Medium: How to create an Exposed Dropdown Menu in Jetpack Compose
• Medium: How to use cubic Bézier curves in Jetpack Compose
• Medium: Mastering Jetpack Compose Android : Building a Dynamic UI for All
• Medium: Mastering Layouts with Jetpack Compose: An Introduction to Columns and Rows
• Medium: Use Jetpack Compose in your existing Project
• Sharing View Models in Kotlin Multiplatform Mobile (iOS and Android)
• Space Hoisting: Should I use the padding Modifier or the Spacer composable?
• State Holders in Jetpack Compose
• Time Picker in Material 3 Jetpack Compose (with Examples)
• Using Proto Datastore in Jetpack compose with Hilt
• Video: Getting started with Firebase Authentication on Android

Resource Roundup

100% pure code!

Nightly Android Studio Builds

Are Android Studio Canary releases too boring? You can now download nightly builds of pre-Canary editions, starting with Iguana! Note: no actual canaries or iguanas were harmed in the creation of this newsletter issue.

Snippet: Curtain Transition

Timo Drick created two versions of a curtain transition, where a composable can be animated to fold up like a sliding curtain. In addition to one designed for mobile, Timo also created one targeting the desktop.

GitHub: composeuisuite / ohteepee

ilyas ipek and Tarik Yasar created an OhTeePeeInput() composable for the entry of one-time passcodes (OTP). You get to configure the number of cells, placeholders, border colors/widths, and more. See this Medium post to learn more about it!

Other Interesting Links

• Gist: darvld / CircularReveal.kt (circular reveal modifier)
• GitHub: EmojiPickerDemo (snippet showing using the new EmojiPickerView via AndroidView())
• GitHub: ryan-n-may / Custom_Jetpack_Composables (number picker, drawer, and more)
• GitHub: Trendyol / stately (state rendering system)