Newsletter Issue #163

Published: 2023-05-02

This week, we watch a bunch of KotlinConf videos touching on Compose!

We also consider @Immutable, work with Navigation for Compose, and explore FlowRow(). We take some photos and we update our custom theme based on Material 3 platform color choices. And, we look at a Google-created toolchain for creating composables via Figma… that is not Relay.

(the idea was so nice, we built it twice!)

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Do We Use @Immutable on Data Classes?

If a data class contains only primitive values, why would we bother adding the @Immutable annotation. The answer is module boundaries, as seen in this week’s highlighted Stack Overflow question.

Does Compose Have “Auto” Line Height?

The overall discussion surrounds line height in TextView() and related composables. The context is a common developer challenge: why doesn’t the UI exactly match the Figma design? Learn more about TextUnit.Unspecified and includeFontPadding in this week’s highlighted Kotlinlang #compose Slack thread.

KotlinConf 2023 and Android Worldwide April 2023

JetBrains held KotlinConf! While this conference was about Kotlin generally, there were several sessions with Compose-related content, including:

Android Worldwide April 2023 also published a few Compose-related videos, including:

Composable Commentary

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

Creating Pager Animations in Jetpack Compose

sinsamaki examines how to animations work with the HorizontalPager() and VerticalPager() composables, looking at currentPageOffsetFraction, using it with modifiers like graphicsLayer() and drawWithContent() to achieve interesting effects.

Every single type of Dialog in Jetpack Compose and how to use them

Alex Styl continues covering a wide range of Compose UI topics, this time turning some attention to Dialog() and AlertDialog(), including how display them and how to customize their appearance.

Medium: Nested Navigation in Jetpack Compose

Jayant Kumar plays around with nested navigation graphs in Navigation for Compose, using navigation() in the NavHost() DSL to define the nested routes. This follows Jayant’s earlier post introducing Navigation for Compose.

Medium: Capturing Images from Camera in Android with Jetpack Compose: A Step-by-Step Guide

Dheeraj Singh Bhadoria examines how to use the TakePicture contract and rememberLauncherForActivityResult() to take a photo from within Compose UI and display it on-screen.

Jetpack Compose Tutorial: How to use FlowLayout

Alexander Yudenkov and Nikita Afonasov explore FlowRow() and FlowColumn(), for allowing content to “wrap” when the particular axis gets filled (e.g., wrap onto the next row once the width is filled with content).

Medium: Goodbye to Activity Lifecycle and Hello to Compose Lifecycle

Pinar Turgut reviews the lifecycle of composables (composition, recomposition, disposal), drawing comparisons to the classic Activity lifecycle.

Resource Roundup

100% pure code!

GitHub: google / automotive-design-compose

Last year, Google introduced Relay, a Figma plugin to code-generate composables from designs. Google’s Android Automotive OS team has created tooling around a similar workflow, though theirs is somewhat more complex to set up.

GitHub: hitherejoe / PreviewCard

Joe Birch published a library that wraps ExoPlayer in a PreviewCard() Compose for TV composable, designed to show a snippet of a video when the card gets the focus, such as while a user is navigating through a carousel.

GitHub: ygorluizfrazao / dynamic-theme-colors

Ygor Frazão brings us a library for blending Material 3 dynamic colors into your own custom themes, to have your theme somewhat adopt the system theme, with a developer-chosen blend ratio.

GitHub: mejdi14 / Card-Switcher

Mejdi Hafiane created a SwitchedCard() composable, which switches between two cards using animations to simulate the cards sliding over top of each other. You use CardContent() composables to define what goes onto each card.