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.

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”).

Featured here? Please add this badge to your article or repo! As Seen In - jetc.dev Newsletter Issue #166

Powered by Buttondown

Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.

Recent Issues:
All Issues
Spread the Word!
Suggestions?
If you have ideas for items for future newsletter editions, reach out via email or contact Mark Murphy on kotlinlang Slack!