jetc.dev Newsletter Issue #161

Published: 2023-04-18

This week, we look at a new Compose Compiler… as well as the next Compose Compiler.

We also deal with insets, work with TVs and keyboards, crop some images, and gaze upon an alpha of Compose for iOS.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler now has a 1.4.5 release. On the plus side, it supports Kotlin 1.8.20. However, it also accidentally introduced a requirement for Java 17 to build. That issue may be addressed this week in a 1.4.6 release.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can We Create a Custom Shape?

At a high level, you implement a Shape (and override createOutline()) or create a GenericShape() (where your supplied lambda forms the implementation of createOutline()). See the latter approach in action, with convex/concave rounded rectangle, in this week’s highlighted Stack Overflow question.

How Can We Control Animations by Key?

Wanting to animate between major state changes, such as loading/content/error, is common. However, sometimes it can be tricky to only animate between those state changes and not animate for same-state updates, such as having refreshed content. Alas, AnimatedContent() lacks a contentKey — see a workaround in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Drawing edge to edge in Jetpack Compose

Alex Styl wants your app to render all the pixels: making the status bar and navigation bars transparent, having your background extend edge-to-edge, and having your content avoid the bars using the Insets API.

Different types of width in jetpack compose

You might think things like “width” are easy. Tarik Billa is here to point out that width, at least, is not easy. There are many options for defining your width, including modifiers (width(), widthIn(), requiredWidthIn(), etc.) and constraints with ConstraintLayout().

Pass by Value vs CompositionLocal vs Static CompositionLocal

Our composables need stuff. Most of the time, we pass that stuff in via function parameters. Vincent Tsen explores the differences between that and using CompositionLocal in terms of how they affect recomposition.

Google’s account switcher with Jetpack Compose

Victor Brandalise shows us how to reproduce the Google account switcher UI. This shows an account avatar, where gestures cause the current avatar to animate out and another avatar to animate in.

Medium: Exploring Surface Composable in TV Compose

Umair Khalid continues an exploration of Compose for TV, looking at its edition of the Surface() composable. Compared to the standard Surface(), the TV edition is optimized for D-pad use and focus management, two key aspects of any TV-centric UI.

Medium: Exploring Keyboard Types in Kotlin Jetpack Compose

Gokhan Kaya reviews the different KeyboardType values that you can pass to TextField(), indicating generally what sort of keyboard your users will see. Just bear in mind that keyboard implementations can do what they want, so KeyboardOptions (and View equivalents like android:inputType) are hints, not commands.

Medium: ViewPager in Jetpack Compose using Official API

Medium user Saqib explores the HorizontalPager() and VerticalPager() composables that “graduated” out of Accompanist and into Compose itself. Saqib not only explores the basics, but also how to manually control the paging, how to add indicators, and how to migrate from the original Accompanist implementation to the new Foundation one.

Other Interesting Links

• Medium: Jetpack Compose Side Effects & Effect Handlers -II
• Medium: Side Effects in Kotlin
• Medium: Improving accessibility in Android apps
• Medium: Accessibility in Jetpack Compose
• Medium: Building Interactive User Interfaces with Jetpack Compose Chip Component
• Revolutionize Your Jetpack Compose Navigation with Compose-Destinations
• Android Jetpack Compose – Build a BMI Calculator App from Scratch
• Medium: Efficiently Display Data with Jetpack Compose: A Beginner’s Guide to LazyColumn and LazyRow
• Medium: Jetpack Compose Multipreview Setup
• 3 Ways to Create Lines in Jetpack Compose
• Medium: Real-Time Password Validation with Jetpack Compose — Android
• Medium: Maximizing Mobile Code Reuse with Compose Multiplatform and MOKO Libraries
• Medium: State Hoisting in Jetpack Compose: Simplifying State Management for Your UI
• Medium: How to get the Height or Width of an Element in Jetpack Compose
• Medium: Getting User Location In Android, The Jetpack Compose Way
• Medium: Effortlessly implement paging in Jetpack Compose

Resource Roundup

100% pure code!

GitHub: JetBrains / compose-multiplatform

JetBrains has released an alpha edition of Compose for iOS. They also published a project template that includes iOS support and set up a dedicated #compose-ios Kotlinlang Slack channel.

GitHub: MoyuruAizawa / Cropify

Moyuru Aizawa brings us a Cropify() composable to allow a user to view and crop an image, where the image is either supplied as a bitmap or as a URL.

GitHub: tkuenneth / compose_adaptive_scaffold

Thomas Künneth is creating a Compose for Android edition of Flutter’s adaptive scaffold, where the scaffold adapts based on screen size, foldable posture, etc.

GitHub: nasrabadiAM / progress-modifier

Ali Nasrabadi created progress() and progressAnimation() modifiers, to put a progress overlay on top of another composable. Learn more in this Medium post.

GitHub: ygorluizfrazao / compose-splash-screens

Ygor Frazão wanted a splash screen without much ceremony, in particular avoiding having to tie a splash screen into a navigation system. To that end, Ygor created a SplashScreen() and a CountdownSplashScreen() composable, along with some helper composables for common splash screen styles.