jetc.dev Newsletter Issue #180

Published: 2023-09-05

This week, we look at a stable Compose Multiplatform release and rendering our composables in greyscale. We look at Compose interoperability with classic Views, both in development and in test. Plus, we roll with some scrollbars and find a complete SpannedString to AnnotatedString converter.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler 1.5.3 is available, offering support for Kotlin 1.9.10.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Is `.dp` Expensive?

We use .dp quite a bit in Compose UI development. Is that a problem? Learn a bit more about how .dp is implemented, and its performance ramifications, in this week’s highlighted Stack Overflow question.

How Can I Render a Composable to a Bitmap? (No, Really!)

Last week, I pointed out that we have official instructions on rendering a composable to a bitmap. Alas, those instructions have some issues. Learn more in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Compose Multiplatform 1.5.0 Release

JetBrains’ Garth Gilmour announced the stable 1.5.0 release of Compose Multiplatform, based on Compose 1.5 and version 1.1 of Material Design 3. We now have a stable UI testing framework for Compose Desktop, along with more cross-platform composables and improved iOS support (albeit still alpha).

Medium: Seeing your composable in shades of grey

Katie Barnett is back, walking us through creating a greyScale() modifier to apply a saturation matrix to an entire composable, making everything (including text and images) appear grey. Or possibly gray. 😁

Medium: How to use Android View inside Jetpack Compose and vice versa?

Kaushal Vasava walks us through the basics of using AndroidView() to wrap classic View-based widgets in composables and using ComposeView to host composables in a classic View-based layout.

Compose Interoperability in Espresso Tests

Joe Birch returns, looking at the testing challenges of using ComposeView to put a composable inside of a traditional View-based layout. Espresso tests cannot “see” composables, and using ComposeTestRule might break other aspects of your tests. Joe shows us how we can leverage UiAutomator to bridge the gap.

Medium: @Preview Driven Development with Jetpack Compose

Medium member sliskicode writes about a riff on test-driven development (TDD), where the initial focus is on @Preview composables and getting your early UI correct via manual testing with those, with an eye towards speeding up UI construction.

Medium: KodeeLogin — Using Composables in SwiftUI

Christian Gaisl takes a peek at Compose Multiplatform and its bi-directional interoperability: hosting composables in native UI frameworks and hosting native UI elements in composables. Christian specifically examines the iOS support in Compose Multiplatform, seeing how we can create a login composable and render it as part of a SwiftUI interface.

Medium: UI Testing in Jetpack Compose

Maria Luíza gives us a tour of setting up our first instrumented tests for composables, using ComposeTestRule and its set of matchers and verifiers.

Medium: Compose a Compose Button by composing Composable functions

OK, so you need to create a composable from scratch, because your UI does not really fit any existing composable. Now what? André Oriani proposes that you should take a pipeline approach, with layered composables each handling a single responsibility (drawing, animation, state, and theming).

Ravikant Sahu examines the NavigationRail() composable from Compose Material3, for a vertical toolbar-style column of icon buttons. This UI element can be a useful alternative to a bottom navigation bar for larger screen sizes.

Resource Roundup

100% pure code!

GitHub: GIGAMOLE / ComposeScrollbars

Basil Miller published a library with a highly flexible scrollbar implementation, with custom animations and support for all the major scrollable containers, including lazy ones. Basil also published libraries for custom drop shadows, “levitation” effects, and fading edges.

GitHub: Aghajari / AnnotatedText

GitHub user Aghajari brings us a complete mapping of SpannedString with standard spans to AnnotatedString for use in Compose UI. This includes an asAnnotatedString() extension function for SpannedString and a new AnnotatedText() function that takes HTML as input.

GitHub: jianastrero / compose-nav-transitions

Jian James Astrero has created a wrapper library for Navigation for Compose, offering shared element transitions.

GitHub: stevdza-san / KotlinBootstrap

Stefan Jovanovic offers us a library based on Kobweb to support Bootstrap-based UIs using Compose HTML.