jetc.dev Newsletter Issue #167

Published: 2023-05-30

Compose now has a new beta, so we see what’s inside!

We also look at @Stable functions, modifiers for when a composable is continuously pressed, and animated carousels. Plus we look at 3 new libraries from Oleksandr Balan, including a table implementation.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose 1.5.0-beta01 released, suggesting that we’ll get a stable 1.5.0 release within the next few months! Of note:

• There is a @StateFactoryMarker annotation for functions that return some sort of state that ought to be tracked via remember()

• There should be some performance improvements, courtesy of cutting back on allocations in recompositions (as well as color animations and AndroidComposeView)

• SensorGateway was seemingly replaced by PlatformDataProvider

• Renamed a bunch of things, such as isContainer on Semantics is now isTraversalGroup, ColorLambda is now ColorProducer, constrain() on TextRange is now coerceIn(), and more

• Compose Material’s DrawerState and BottomDrawerState offset value are no longer nullable — Float.NaN is used to indicate no offset

• The gesture for opening/closing a ModalBottomSheetLayout can now be disabled

Note also that Compose is going multiplatform, so a bunch of artifacts are getting -android suffixes.

In Compose-adjacent stuff:

• ConstraintLayout for Compose is up to 1.1.0-alpha10 `

• Navigation for Compose shipped both 2.6.0-rc02 and 2.7.0-alpha01

• Paging for Compose is up to 1.0.0-alpha20

• Wear Compose is out in a 1.2.0-beta01 release

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can a Function Be @Stable?

We normally think of the @Stable annotation being applied to types, but it can also be applied to functions, such as Double.dp() used for specifying density-independent pixel resolutions. Learn what this does — and what it does not do — in this week’s highlighted Stack Overflow question.

How Can Float Above the Soft Keyboard?

Unless you are willing to have the soft keyboard (IME) float over your UI on the Z axis, the keyboard can make your design difficult to implement. In this specific case, we want a TextField() to be centered on the screen or slightly higher than a “call to action”-style Button(), the latter case when the keyboard is visible. This is surprisingly complicated, but you can learn of few possible approaches (and a few failed approaches) in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: Creating Touch Held Down Modifier with Jetpack Compose

Altuğ Keçiciler walks us through onTouchHeld() and onTouchHeldAnimated() modifiers, which invoke a supplied lambda as a composable is continuously touched. You can use these for automatic counter changes, animated “hold to pause” sorts of buttons, etc.

Medium: From Idea to Implementation: Developing an Animated Carousel with Jetpack Compose

Somesh Kumar worked on creating a carousel implementation using HorizontalPager() as a foundation, with indicators, automatic scrolling, animated transitions, and more!

Medium: Runtime Permissions In Jetpack Compose

Oussama Cherfaoui tours the different steps in implementing runtime permissions in a Compose UI app, leveraging the RequestPermission and RequestMultiplePermissions ActivityResultContracts, along with a dialog for dealing with permission rejection.

Medium: Implementing Image/Video/Document’s picker In Jetpack Compose

Yogesh Shinde explores the PickVisualMedia and OpenDocument ActivityResultContracts and how you can leverage them within a Compose UI app.

Jetpack Compose + MVI - Part 0 : Introduction

Ritwik Jamuar has a three-part set of posts on applying the MVI architecture to Compose UI apps. The first post handles the concepts and the reducer implementation. The second post covers the “middleware” for handling side effects, while the final post covers testing.

Other Interesting Links

• Medium: Creating an Animated Counter Button in Jetpack Compose
• Medium: Custom Media3 ExoPlayer Layout with Jetpack Compose — Android
• Medium: Using Android’s New Custom Pixel Shader AGSL in Compose: Part 1
• Medium: How To Add and Retrieve Images from Firebase Storage Using Jetpack Compose
• Medium: Migrating to Jetpack Compose: A Guide for Converting XML-based Projects
• Medium: Bottom Navigation Bar With Jetpack Compose
• Medium: AutoSize text implementation in Jetpack Compose
• Medium: How To Mask Your Password in Android (JetPack Compose)
• Fast Tutorial - Beautiful credit cards with JetPack Compose
• Styling a clickable text like TikTok in Android with Jetpack Compose
• Medium: Jetpack Compose Fragment Lifecycle — Building a Tabbed App
• Medium: Mastering Android Jetpack Compose BottomSheet with Material-3
• Medium: Building an Expandable Credit Card Information Card in Jetpack Compose
• Medium: Android Paging3 Library With Jetpack Compose
• Medium: Create Onboarding with Data Store and Clean Architecture in Jetpack Compose
• Medium: Including an AdMob Anchored Adaptive Banner in Jetpack Compose

Resource Roundup

100% pure code!

GitHub: oleksandrbalan / minabox

Oleksandr Balan has been busy!

First up is a wrapper around LazyLayout() that handles 2D scrollable content. It supports pinned rows and columns, items sized either directly or relative to the parent, and more.

GitHub: oleksandrbalan / lazytable

Oleksandr Balan used MinaBox to create a table implementation, where cells in a LazyTable() indicate their position (row and column) and size (in rows and columns). As with MinaBox, LazyTable() supports pinned rows and columns.

GitHub: oleksandrbalan / programguide

Oleksandr Balan also used MinaBox to implement a TV-style program guide, where you provide channels, timeline, and programs, and ProgramGuide() renders the guide, including an optional bar to show the current time.

Cascade

A long time ago, Saket Narayan published a library that implements nested drop-down menus, with animated height changes. I missed that library when it came out, but… better late than never!

GitHub: OneCodeDevs / navigator

The One Code team brings us a KSP-powered set of annotations for generating Navigation for Compose nav graphs, akin to compose-destinations.