jetc.dev Newsletter Issue #172

Published: 2023-07-11

This week, we focus a bit on TV apps and gaze up at a Redwood. We fire up the emoji cannon and talk a bit to Talkback. And Google gives us a composable way to get Pay’d.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can We Keep the Focus Centered?

TV Compose puts renewed emphasis on focus, not only in terms of supporting it for D-pad navigation, but in terms of how focus is presented to the user. Learn how TvLazyRow() has options for controlling where the focused item lands on the screen in this week’s highlighted Stack Overflow question.

What is a ColorProducer?

A ColorProducer produces colors. See how it can reduce recompositions of BasicText() in this week’s short highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Native UI and multiplatform Compose with Redwood

Jake Wharton wrote about the 0.5.0 release of Redwood, Cash App’s composable wrapper around native UI elements.

Medium: Blast Off: Managing Hundreds of UI Updates for an Emoji Cannon

Piotr Prus likes emojis. Lots of emojis. So many emojis that displaying them, with animated movement and eventual fade-out, was getting expensive. In this post, Piotr reviews various steps that were taken to minimize recompositions and keep performance and memory use manageable.

Medium: Talkback Ordering in Android Jetpack Compose

Lucas Kivi examines Compose UI’s semantics properties, in particular the ability to control how Talkback and other screenreders traverse your composables to announce their contents.

Jetpack Compose Multiplatform Android & iOS

The Exyte team writes about their experiences using Compose Multiplatform and experiments in writing a single-source Android and iOS app. Overall, they were impressed and look forward to using it in production apps sometime in the future.

Medium: Custom Pull To Refresh using Jetpack Compose

Abhimanyu demonstrates how to implement pull-to-refresh from scratch, with a customized loading indicator. The resulting MyPullToRefreshLayout() composable has a simple API to start and end a refresh operation.

Medium: Adaptive Layout with Compose

Maria Luiza brings us a brief walkthrough of using calculateWindowSizeClass() and BoxWithConstraints() to implement different UI structures based on the window size, so you can adapt to phones and tablets.

Other Interesting Links

• Android Jetpack Compose – Create a Movie App
• Grid and Lists in Compose
• How to Change Snackbar Position in Android Jetpack Compose
• How to Implement Email Validation in Android Jetpack Compose
• Material 3 Switch in Jetpack Compose (with Examples)
• Medium: A Guide to Filament for Android
• Medium: Biometric Authentication in Jetpack Compose
• Medium: Grids In Jetpack Compose
• Medium: Implementing in-app subscriptions and products using Jetpack Compose
• Medium: Mock the new SavedStateHandle saveable() for Compose in your Unit Tests
• Medium: Onboarding Screen using Jetpack Compose
• Medium: Tips for working with Preview in Jetpack Compose
• Medium: Troubleshooting Jetpack Compose Recomposition Issue : Beginner Guide
• Medium: Unlocking the power of Jetpack Compose, Fragments, Stateflow, and ViewModels: A Comprehensive Guide
• Medium: Wrapping a simple and flexible PullRefresh and LoadMore Compose Layout
• Phone Number Hint API in Jetpack Compose
• Slides: Adopting Jetpack Compose Safely
• Slides: Kicking Back with Compose for Android TV

Resource Roundup

100% pure code!

GitHub: google-pay / compose-pay-button

Google has published a composable wrapper around the Google Pay button. You can supply the allowed payment methods and some light rendering customizations, in addition to a standard click listener.

GitHub: xavijimenezmulet / shapes-for-jetpackcompose

GitHub user xavijimenezmulet has published a library of pre-defined Shape objects, along with utility code for creating custom shapes. See this Medium post for more.

GitHub: xavijimenezmulet / ratingbar-jetpackcompose

GitHub user xavijimenezmulet also released an ImageRatingBar() composable, with custom images per rating level.

Jetpack Compose SVG to Compose converter

Alex Styl added an SVG to composable image converter tool to the composables.com site.

Other Interesting Links

• GitHub: cheonjaewoong / compose-grid (non-lazy horizontal/vertical grid)
• GitHub: yonghanJu / CaptureComposable (image capture of composable content)