jetc.dev Newsletter Issue #164

Published: 2023-05-09

We got a few more Compose updates, in the days prior to Google I|O 2023, including a significant change to Paging for Compose.

Beyond that, we look at preview cards for Compose for TV, along with deep link support. We examine a debounce modifier, one you might even use with a library for Compose sensor support. And we look at three Compose Multiplatform libraries, for rich text editing, navigation, and insets.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler 1.4.7 is available. While the obvious benefit is support for Kotlin 1.8.21, it also offers improved support for using State for primitive types like Int and Long, to improve performance.

Also, Compose 1.4.3 was released, with a handful of bug fixes in compose-ui.

Finally, Paging for Compose is up to 1.0.0-alpha19. This comes with an API change to allow for Paging for Compose to work with things other than LazyRow() and LazyColumn(), such as lazy components for Compose for TV. See the extensive release notes for the details.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Hide Part of a Button() Border?

There are sophisticated solutions… and then there are hacks. Here, we see the use of a negative offset to eliminate the problematic border, in this week’s highlighted Stack Overflow question.

Can a Parent Clip a Child?

CSS offers overflow: hidden | clip to allow a parent to clip a child, such that the child sizes itself larger than it actually renders. We explore how to achieve the same effect in Compose UI in this week’s highlighted Kotlinglang #compose Slack thread.

Composable Commentary

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

Building an Immersive Preview Card for Android TV with Jetpack Compose

Joe Birch walks us through his PreviewCard() composable that I mentioned in last week’s issue. PreviewCard() uses ExoPlayer to play a snippet of video, designed to show a preview of content in a carousel item in a Compose for TV app.

How to Add Deep Links in Jetpack Compose?

Vincent Tsen looks at Navigation for Compose and its support for deep links, showing both the Compose aspects (e.g., navDeepLink()) and the general Android aspects (e.g., assetlinks.json).

Blazing fast Composables

Alex Styl explores a few tips for boosting composable performance, such as the use of @Immutable and @Stable.

Medium: Touch Feedback Animation like Spotify in Jetpack Compose

ilyas ipek wanted a bouncing click effect, instead of the standard Material ripple. This post walks through the solution, in the form of a bouncingClickable() modifier, designed to be used instead of clickable().

Medium: How To Snap Scrollable Items to the Center Of The Screen In Jetpack Compose

Yanneck Reiß reminisces on Chris Banes’ Snapper library for snapping content in scrollable layouts, then shows how to implement the same behavior using the official SnapFlingBehavior option.

useDebounce in Android’s JetPack Compose?

Mohamed Dhyia Eddine looks at an implementation of a useDebounce() modifier, designed to “debounce” a State and invoke a function type (e.g., lambda expression) as the state settles after the debounce period.

Other Interesting Links

• Slides: Getting Started: Jetpack Compose Layouts
• A Jetpack Compose Tutorial for Beginners – How To Understand Composables & Recomposition
• Medium: Discovering Material3 for Android — SearchBar
• Medium: LaunchedEffect vs rememberCoroutineScope in Jetpack Compose
• Custom FilterChip Group using Jetpack Compose in Android
• Building a Language Learning App with Compose – Part 5
• Medium: Working with Compose Navigation, Dagger2, ViewModels.. oh my
• Medium: Snackbar State Management Best Practices for Jetpack Compose
• Medium: ScreenShot Testing Composable with Paparazzi Library
• Medium: Input Validation With Clean Architecture In Jetpack Compose
• Proof of concept. Endless scrolling in Android with Jetpack Compose. Part 1
• Swipe Away Tasks: Jetpack Compose & Material 3 Todo App Quick-Start Guide
• JetchatGPT improvements: error handling and animations
• Medium: Permission-less Photo Picker — Android
• Medium: Building a Compose-based Mobile App with Client-Server Communication in Kotlin using Ktor HTTP Client
• Medium: Understanding and Implementing Navigation Components Jetpack Compose in Application | Part 2
• Medium: Problems With Navigation in Jetpack Compose
• Medium: Compose & Activity lifecycle in relation
• Medium: Why use Jetpack Compose?
• Jetpack Compose: Home Screen

Resource Roundup

100% pure code!

GitHub: ricknout / compose-sensors

Nick Rout crafted a composable wrapper around the Android sensor API, exposing sensor readings via State for easy integration, using functions like rememberAccelerometerSensorValueAsState().

GitHub: xxfast / Decompose-Router

Isuru Rajapakse is assembling a Compose Multiplatform library, based on Decompose, that offers a Conductor-style navigation system, across Android, iOS, desktop, and Web.

GitHub: MohamedRejeb / Compose-Rich-Editor

Mohamed Rejeb has created a RichTextEditor() for Compose Multiplatform, supporting Android and iOS.

GitHub: mori-atsushi / insetsx

Mori Atsushi is working on a Compose Multiplatform library that offers common inset-tracking across iOS and Android, via windowInsetsPadding() and systemBarsPadding() modifiers.

Other Interesting Links

• Gist: oianmol / QrScannerScreen.android.kt (QR scanner using MLKit)
• GitHub: hamid97m / HeroDatePicker (Persian date picker)