jetc.dev Newsletter Issue #166

Published: 2023-05-23

This week, we try to keep our focus and wonder why “states flow down, events flow up” is being replaced as a pattern.

We also look at interactions and their visual states, along with when our compositions get disposed. We learn about BasicTextField2() and Compose for iOS. And we examine a library for zooming composables and another that offers an implementation of table UIs.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Maintain My Focus?

Compose for TV puts added emphasis on focus, as everything is driven through a D-pad rather than a touchscreen. However, focus, like many other UI properties, is state that we need to maintain ourselves. See how to track focus changes and restore them in this week’s highlighted Stack Overflow question.

What’s Up With the Changing Patterns for UI Events?

We are used to “states flow down, events flow up” as the API pattern for interactive composables, where the state is used to render and the events, in the form of lambda expressions, are used eventually to mutate that state. However, some composables, like DatePicker(), HorizontalPager(), and ModalStateBottomSheet instead require you to observe properties on the state to find out about “events” with those composables. Explore the ramifications and watch a rollicking debate on the approaches in this week’s highlighted Kotlinlang #compose Slack thread!

Composable Commentary

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

Medium: Illuminating Interactions: Visual State in Jetpack Compose

Google’s Louis Pullen-Freilich explores Compose’s indication system, which is used for responding to input, such as the classic Material ripple, focus highlights, etc. Louis also looks at Compose’s interactions system, how those tie into indications, and what modifiers are used to apply those to composables.

Medium: ViewCompositionStrategy Demystified

Compositions get disposed, eventually. Google’s Chris Arriola examines when compositions get disposed, by means of a specific ViewCompositionStrategy, and when using strategies other than the default might be the best option for you.

Video: New Jetpack Compose BasicTextField2

The Code with the Italians crew hosted Google’s Zach Klippenstein to talk about recent improvements in Compose UI text rendering. The focus is on the new androidx.compose.foundation.text2 package, with its BasicTextField2() and BasicSecureTextField() implementations.

Compose Multiplatform for iOS Is in Alpha

JetBrains’ Sebastian Aigner announced that Compose Multiplatform officially supports iOS, albeit presently in an alpha state. Compose for iOS, as with Compose for Desktop, leverages Skiko, so your typical canvas-backed composables should “just work”. And, akin to ComposeView for Android view interop, Compose for iOS has UIKitView, in addition to ComposeUIViewController for embedding composables in SwiftUI apps.

Video: Make time count with Wear OS

GDG Lagos hosted Moyin Adeyemi, speaking on Wear Compose and Horologist, in addition to the current roster of options for Wear OS UI (e.g., tiles), in the context of a simple countdown app for the watch.

Medium: Color Picker in Compose

Medium user Abhilash walks through all the steps needed to create a color picker composable, including a seekable hue panel and a separate panel for selecting the saturation and specific color value for a given hue.

Jetpack Compose Tutorial: Animated Navigation Bar

Alexander Yudenkov and Nikita Afonasov walk us through a bottom navigation bar implementation, based on Dribble’s, where a bouncing or rolling ball in an indent indicates the current navigation item. Alexander and Nikita reimplemented this in Compose Material3 in the form of an AnimatedNavigationBar() composable and explain in detail how it works.

Medium: Exercises in futility: Jetpack Compose Recomposition

Costa Fotiadis writes about recomposition and common approaches for eliminating over-composition: method references rather than lambdas, breaking up composables into smaller units, using compiler metrics to figure out what is going on, etc.

Integrating the PreviewCard with Jetpack Compose on Android TV

Joe Birch is back with a follow-up to his post on his PreviewCard() composable, which is designed for showing preview snippets in a carousel-style row in Compose for TV. This week, Joe looks at what it takes to actually use PreviewCard() in a TvLazyRow() and a bit of wiring that is needed for managing focus state.

Other Interesting Links

• How to create Responsive Layouts in Jetpack Compose
• Blooming love for Compose animation
• Medium: Jetpack Compose Recomposition
• Video: Jetpack compose recomposition
• Medium: Jetpack Compose: Clean and Encapsulated Composables
• Medium: DisposableEffect: side-effect API in Jetpack Compose
• Medium: Why To Enable R8 Now Before Migrating To Jetpack Compose
• Medium: Real-Time Text Detection with CameraX, MLKit and Jetpack Compose on Android
• Abstract your Android Navigation for Compose, part 3
• Podcast: Treehouse, Redwood and Zipline with Colin White
• Medium: Material 3 Search Bar in Jetpack Compose Android Example
• Medium: KeyboardOptions in Jetpack Compose: A Beginner’s Guide
• Medium: Circular Progress Bar with Jetpack compose: A Step-by-Step Guide
• Simple Firebase Sign-in UI Demo App
• Let’s create notification reminder app in Jetpack Compose
• Podcast: JetPack Compose DeepDive
• Medium: Android Server Driven UI-XML VS Compose Example & Benchmark
• Medium: Consume Flows Safely in non-composable scopes in Jetpack Compose
• Medium: Simple Login Page in Jetpack Compose
• Medium: How to Integrate Top Jetpack Compose Features into a Functioning App
• Medium: How to create image slider with Jetpack Compose
• Medium: Creating a Dynamic Image Slider with Accompanist Pager in Jetpack Compose
• Medium: Android’s Jetpack Compose and Admob ads

Resource Roundup

100% pure code!

Telephoto

Saket Narayan created a library that offers a ZoomableImage() and ZoomableAsyncImage() pair of composables with a variety of pan and zoom gestures (pinch, double-tap, etc.). The zoom logic itself is extracted into a zoomable() modifier for use with other types of composables.

GitHub: sproctor / compose-data-table

Material Design has a data table component, but Compose lost its implementation years ago. Sean Proctor is rebuilding it, currently with support for columns with headers and rows with cells.

GitHub: vsnappy1 / ComposeDatePicker

Vishal Kumar has date and time picker composables, mostly using the “wheel” style popularized by iOS. See this Medium post for more.

GitHub: alexzhirkevich / compose-look-and-feel

Alexander Zhirkevich is creating a set of themes for Compose Multiplatform, one based on Material3 and one based on iOS (“Cupertino”).

Other Interesting Links

• GitHub: rwsbillyang / ComposeRouter (navigation library)
• GitHub: omkar-tenkale / ExplodingComposable (make your composable go 💥)
• Gist: oianmol / platform.android.kt (KMM side effect to update status bar and navigation bar color)
• Gist: amarland / MainActivity.kt (SVG DSL)