jetc.dev Newsletter Issue #182

Published: 2023-09-19

This week, we look at blueprints and borders, explore parallax and ripples, and try out libraries for steppers and swipe-to-reveal.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

JetBrains’ Compose Multiplatform now has a 1.5.10-beta01 release, with support for Kotlin 1.9.20, more common Material3 components, a lot of improvements to iOS support, and many bug fixes for iOS and desktop.

Also, Google’s official wrapper library for Maps is up to 2.14.1.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Does This List Work?

When it comes to observing State, what matters is the underlying type of an object, not the type used for a variable or argument referencing the object. So, if you have a SnapshotStateList but pass it around as a List, state-change observation still works, as we see in this week’s highlighted Stack Overflow question.

Can We Have an Outside Border?

Sometimes, we might want to have a composable’s border be outside the composable itself, but the border() modifier has the border be inside. That’s surprisingly complicated, especially when bridging from Compose UI to external things like ComposeView. Learn more in this week’s Kotlinlang #compose Slack thread.

Composable Commentary

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

Video: Making Android Shine on Large Screens with Roberto Orgiu from Google

After a summer break, the Code with the Italians team is back, bringing Google’s Roberto Orgiu with them. Together, they look at ways to improve your apps on tablets and foldables, both from the obvious (hey! usefully use the screen space!) to the less-obvious (keyboard support, tooltips, etc.)

Medium: Styling composables — UI Variants in Jetpack Compose

Medium user mwcode walks us through a variety of ways to pass styling information down to intermediate and leaf composables: arguments, slot APIs, dedicated style-aware composables, and composition locals.

Medium: Blueprint — visualizing paddings in Jetpack Compose

Anton Popov introduces us to the Blueprint library. When enabled, such as via a debug drawer, or when used in @Preview composables, it draws size and padding information for composables on top of the composables itself, to help you measure how your UI is actually being laid out.

Parallax effect in Jetpack Compose

Chris Banes demonstrates ParallaxAlignment, a custom Alignment implementation that is scroll-aware and can implement a parallax effect. Chris shows how to use it both for images and for Box() contents.

Medium: Compose Ripple Customisation Guide

Fergus Hewson examines how to customize the ripples used for click indicators in Compose UI. In particular, Fergus dives deeply into how to control the color of the ripple, despite several layers of Compose code trying hard to interfere with your efforts.

Medium: Animate borders in Jetpack Compose

Medium user Ruthwik demonstrates how to have a border with a animated gradient for the border color. This took two Surface() composables (each with a RoundedCornerShape), animateFloat(), and a drawWithContent() modifier, eventually winding up with a reusable CardWithAnimatedBorder() composable.

Medium: Elevating UI: Unlocking the Potential of WebView in Jetpack Compose

Accompanist’s WebView wrapper composable has been deprecated, yet it seems like it is still important. Kevin Zou has forked it and is looking to maintain that fork going forward. This post looks at what the wrapper provides.

Exploring Compose Test Rules

There are several JUnit test rules that we can use in our Compose UI Android instrumented tests. Joe Birch compares and contrasts several of them: those created by createComposeRule(), createEmptyComposeRule(), and createAndroidComposeRule().

Other Interesting Links

• Bottom Navigation with Screens in Jetpack Compose
• Medium: 3-step guide to adding emojis — Jetpack Emoji Picker
• Medium: Customize pull-to-refresh on Android with Jetpack Compose
• Medium: Designing a Login Screen with Validation using Jetpack Compose
• Medium: Intrinsic Measurements In Jetpack Compose
• Medium: Jetpack Compose: Anchored Draggable Item in MotionLayout Part 1
• Medium: Lottie With Jetpack Compose
• Medium: Mastering Multi-Tab Data Display with Jetpack Paging and Compose
• Medium: Simplifying Authentication with Google Sign-In in Jetpack Compose UI

Resource Roundup

100% pure code!

GitHub: Aghajari / Flexbox-Compose

Amir Hossein Aghajari created a CSS-style flexible box layout (flexbox) implementation for Compose UI. You control the arrangements, spacing rules, maximum number of lines, and more.

GitHub: myounis97 / revealable

GitHub user myounis97 brings us a Revealable() composable wrapper that gives swipe-to-reveal functionality to whatever it wraps. It has slot APIs for the content to be revealed on the start and/or end sides as the user swipes.

GitHub: binayshaw7777 / KotStep

Binay Shaw offers another stepper composable, where you control the number of steps, the size of the circles representing each step, whether the steps are laid out horizontally or vertically, and more.

Composable Colors

Alex Styl returns with another tool: a Material color picker Web page that puts the Compose UI code for the color on your clipboard, such as Color(0xFF84FFFF).

Other Interesting Links

• GitHub: aritra-tech / ComposeCards (credit card composables)
• GitHub: iideprived / OneTapSignIn (Google One-Tap Sign In dialog wrapper)
• GitHub: jemshit / GaugeChart (analog-style gauge chart)
• GitHub: joyner-perez / GoogleSignInButtonLibrary (Google sign-in buttons)
• GitHub: KaradimoulasG / Toasty (custom top toasts)
• GitHub: rwsbillyang / ComposeRouter (React-inspired nav library)
• GitHub: zeeshanali-k / Typist-CMP (typing animation for Compose Multiplatform)
• Gist: Zhuinden / BasicTextFieldWithCursorAtEnd.kt (text field with cursor starting at end of text)