jetc.dev Newsletter Issue #135

Published: 2022-10-04

droidcon NYC 2022 happened, and we have the videos to prove it!

After all of those, we look at design systems and shaped text backgrounds. We consider using Popup() and consider perhaps not using SubcomposeLayout(). And we showcase our layouts using, um, well, ShowcaseLayout().

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Find the Tapped-Upon Word?

Some apps take specific action when a user taps a word in a longer piece of text. One way to handle that in Compose UI is ClickableText(), as we see in this week’s highlighted Stack Overflow question.

How Can I Convert Suspend to State?

Sometimes, you have a suspend fun or a suspend lambda, and you need the results of that to wind up as a State. Whether you write your own solution or use produceState(), Compose has you covered, as we see in this week’s short highlighted Kotlinlang #compose Slack thread.

droidcon NYC 2022

droidcon NYC 2022 videos are up, with a vast array of Compose content, including:

• 6 weeks of Compose or How a good Design System is vital in Compose

• A Hitchhiker’s Guide to Compose Compiler: Composers, Compiler Plugins, and Snapshots

• Building StateFlows in Android with Jetpack Compose

• Composable Sheep: A Canvas Story

• Composing With Confidence

• Creative Coding with Compose

• Demystifying Molecule: Running Your Own Compositions For Fun And Profit

• Demystifying the UX of Compose Guidance

• Leverage Compose Tooling to Improve Your Workflow

• Model-driven navigation with Jetpack Compose – From zero to hero

• Native UI with multiplatform Compose

• Navigation and Dependency Injection in Compose

• Opening the shutter on snapshots

• Optimize your app for large screens

• Optimizing Render Performance of Jetpack Compose

• Overview of UI testing in Compose

• The ever increasing convergence of native iOS and Android mobile development

• Using Compose Runtime to create a client library

• Using Jetpack Compose to Create Apps From Figma UI Sketches

• What does Recomposition mean to your app?

Composable Commentary

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

Medium: Compose Toolkit

Google’s Chris Arriola continues an introductory Compose UI post series, this time looking at Scaffold(), Surface(), common layout composables like Row(), and the modifiers that apply to them. There is also a video that corresponds to this post.

Medium: Build a Custom Design System Using Jetpack Compose

Semyon Zadoroznyi explores design systems in Compose UI, both in terms of the existing Material design system and creating a brand-new one that fully replaces Material. Semyon looks at setting up a custom theme, what you lose by abandoning Material, and how to write replacements for those lost composables.

Shaped Text Backgrounds

Nikita Afonasov looks at Exyte’s ShapedBackgroundAndroid library, which offers a RoundedBackgroundText() composable. This composable applies a background to your text… and only to your text, not the entire rectangle that contains your text.

Medium: Adaptive UI with Jetpack Compose

Udit Verma looks at supporting phones and tablets from your Compose UI app, leveraging WindowSizeClass, BoxWithConstraints(), and FlowRow()/FlowColumn().

Medium: Jetpack Compose — Simplifying arguments in Navigation

Jassiel Melgoza is another developer who was less than excited by Navigation for Compose’s approach towards arguments. Jassiel shows us how to create an enum-based navigation approach that leverages a navigationRoute() DSL to build the argument-laden navigation paths.

Medium: Jetpack Compose Popup — Master It!

Elye is back, looking at the Popup() composable for putting a composition into a separate window floating over your main UI surface. Elye explores various configuration options, including the SecureFlagPolicy that I am very grateful was implemented.

Tweets: When To Use SubcomposeLayout()

Halil Özercan wrote a series of tweets about SubcomposeLayout() and why it may not be the solution to your problem. Instead, your problem may be how you are thinking about the composition, and that Layout() or simpler solutions may be preferable.

Other Interesting Links

• The Unholy Composable
• Medium: Translating Objects along a Path
• Medium: Creating a wiggle animation in jetpack compose
• Medium: Zero To Hero in KMM with Compose and SwiftUi
• Medium: Suggestion Chips in Jetpack Compose
• Medium: Collapsing toolbar with parallax effect and curved motion in Jetpack Compose
• Loading Shimmer in Compose
• Medium: Jetpack Compose navigation in easiest way possible
• Medium: Jetpack Compose Navigation Using Enum Class with Basic Splash Screen
• Medium: LazyList Padding in Jetpack Compose
• Medium: What the Heck Is Jetpack Compose remember Vs remember mutableStateOf?
• Medium: Using Constraint Layout for Compose -Part 1
• Medium: How to Implement Radio Button in Jetpack Compose?
• Medium: Jetpack Compose Dotted Shape
• Android Jetpack Compose Form Tutorial

Resource Roundup

100% pure code!

GitHub: oleksandrbalan / textflow

Oleksandr Balan returns, this time with a TextFlow() composable that works like Text() but supports wrapping the text around another composable’s content.

GitHub: jayasuryat / dowel

Jaya Surya Thotapalli created a KSP engine and @Dowel annotation to code-generate PreviewParameterProvider implementations and simplify your @Preview composable work.

GitHub: tahaak67 / ShowcaseLayoutCompose

Taha Ben Ashur offers us a ShowcaseLayout() and Showcase(), designed to implement the “highlight a UI element with an explanation” pattern. The library offers animated arrows, optional introductory messages, and more!

Other Interesting Links

• GitHub: SmartToolFactory / Compose-Cropper (image cropping)
• GitHub: abema / compose-impression-tracker (impression() modifier)