jetc.dev 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:

• Avoiding common coroutines mistakes in Compose
• Compose Multiplatform on iOS
• Confetti: building a Kotlin Multiplatform conference app in 40min
• Modern Compose Architecture with Circuit
• Reflections on a Year of Compose
• Showkase: Automated UI Infrastructure in Jetpack Compose using KSP
• You can do desktop too!

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

• Building Multiplatform Apps with Compose
• Compose: Beyond Android development
• Material Design 3 in Compose

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.

Other Interesting Links

• How to make expandable text with a button in Jetpack Compose
• Medium: Understand Drawing Arc of A Path In Jetpack Compose Canvas
• Medium: Learn Jetpack Compose Canvas Cubic and Quadratic Bezier And Its Usage
• Medium: Making Graph Plotting Function in Jetpack Compose
• Medium: Deep Linking in Jetpack Compose — Android
• Medium: How To Set A Gradient Background In Jetpack Compose
• TikTok like navigation with Jetpack Compose and the ModalBottomSheetLayout in Android
• Slides: Collapsing toolbar with parallax effect and curved motion in Jetpack Compose
• Medium: Exploring rememberCoroutineScope in Jetpack Compose
• Medium: Managing state in Jetpack Compose: remember vs derivedStateOf vs savableState
• Android Jetpack Compose – Rotation Animation
• Medium: Jetpack Compose Testing — Conditional Clickable Components
• Medium: Implementing Bottom Navigation in Jetpack Compose
• Medium: Handling User Input in Jetpack Compose: A Complete Guide
• Medium: Introduction to Animations in Jetpack Compose
• Medium: Android ViewModel, Repository, Room and Retrofit with Jetpack Compose
• Medium: Jetpack Compose: Login screen with validation
• Using Jetpack Compose’s LocalClipboardManager
• Medium: Multi theme in jetpack compose

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.

Other Interesting Links

• GitHub: UmairKhalid786 / ComposeTv (Compose for TV UI samples)
• GitHub: MortezaNedaei / Compose-BlurHash (another BlurHash implementation)