jetc.dev Newsletter Issue #166
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!
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.
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
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!
Posts, videos, and other new information related to 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.
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.
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
package, with its
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.
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 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.
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.
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.
Joe Birch is back with a follow-up to his post on his
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
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
100% pure code!
Saket Narayan created a library that offers a
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.
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.
Vishal Kumar has date and time picker composables, mostly using the “wheel” style popularized by iOS. See this Medium post for more.
Other Interesting Links
- 2023-11-21: Compose/Material3/Wear Compose updates! remember()! Adaptive layouts! Compose Multiplatform in 2024! @email@example.com on BasicTextField2()! Compose Multiplatform charts! And... is TV Compose in trouble?!?
- 2023-11-14: Compose Compiler! BasicTextField2()! @firstname.lastname@example.org and animations! Optimization! @email@example.com, JetBrains, and Fleet! JetBrains and plotting! And... we collapse?!?
- 2023-11-07: Compose Multiplatform! Chips in fields! Diffing! Custom fonts in Glance app widgets! Heatmaps! PIN input! And @firstname.lastname@example.org is in a bit of a haze?!?