jetc.dev Newsletter Issue #155

Published: 2023-02-28

We got more updates for Compose Compiler, Wear Compose, and Compose itself!

Beyond that, we look at Layout(), UiAutomator, and pull-to-refresh. We examine an ExoPlayer composable wrapper and a Compose project template. Plus, Joe Birch is on TV!

NOTE: I am taking next weekend off, so the next issue after this one will come out March 14 rather than March 7.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler is up to 1.4.3, with bug fixes.

Compose itself did not get a patch release, but did get 1.4.0-beta02. Beyond its own set of bug fixes, noteworthy changes include:

  • modifierElementOf() was removed

  • Added support for BlendMode to some text-painting functions, such as drawText() on DrawScope

  • Made a bunch of API changes to BottomSheetState

However, you might run into some dependency conflicts.

Wear Compose got bumped up to 1.2.0-alpha05. Besides bug fixes, we got a couple of API improvements to the picker API, such as animateScrollToOption.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Add Stuff to BasicTextField()?

BasicTextField(), like the rest of the Basic...() series of composables, represents a core widget type without Material styling. You might use them as the foundation for your own design system. However, since most of the documentation and published material on Compose is really on Compose Material, it is not always clear how you pull some Material features into your design system. See how we can add a placeholder (or hint) to a BasicTextField() in this week’s highlighted Stack Overflow question.

How Can I Have Multiple Items Per Page?

Sometimes, it can be convenient to have a collection of items, where more than one item appears per page. For example, I wrote this blog post with options for doing this in ViewPager nearly 11 years ago (😮). See what our Accompanist options are in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: Advanced Layout concepts

Google’s Simona Stojanovic explores the Layout() (the composable), layout() (the function that forms part of your measurePolicy of your Layout()), and .layout() (the modifier for measuring and laying out a single element). See this video for additional material from Simona!

Medium: Accessing Composables from UiAutomator

Google’s Tomáš Mlynarič examines how we can use UiAutomator for testing Compose UI apps, which is important for integration testing between apps and for other outside-the-process testing (e.g., Appium).

Medium: Effortlessly Add Pull-to-Refresh to Your Android App with Jetpack Compose

Katie Barnett looks at the pullToRefresh() modifier to add pull-to-refresh semantics to a composable, including how it relates to the PullRefreshIndicator() and how to actually, y’know, refresh when that indicator gets pulled.

Video: Android / Glitz And Glamour: The Compose Edition

Eliza Camber examines how meaningful animations can help users understand how to interact with your UI and what the app is doing. Eliza reviews techniques from basic ripples through applying Lottie animations.

Compose for TV has had alpha releases for a few months, but very little information has been published on how to use them. Joe Birch helps to fill the gap this week, with a post looking at the Carousel() composable, used for the “slides” sort of presentation with dot indicators, etc.

Jetpack Compose and WindowSize Classes

Eric Donovan looks at screen sizes and why we might need some of our composables to have different sizes on those different screens. Eric then explains what we can do when we need different composables for different screen sizes, points out issues in Material3’s approach toward size buckets, and more!

Jetpack Compose: DropDown Menu

Alex Zhukovich walks us through the use of DropdownMenu(), including how it and the experimental ExposedDropdownMenuBox() differ, how to write UI tests for them, and more!

How to Debug Jetpack Compose Recomposition with Logging?

Vincent Tsen asks a great question: what techniques should we be using for determining where our recompositions are coming from? Vincent demonstrates a LogCompositions() composable that can help!

Medium: How to Integrate Google Maps into Your Android App using Jetpack Compose

Daniel Atitienei wrote about Maps for Compose, from initial setup through adding and configuring the GoogleMap() composable to display a map. Daniel also looks at annotating the map with markers and artwork, adding Street View, and more!

Medium: Manage Multiple Content, Actions and States ModalBottomSheetLayout Jetpack Compose

Emre UYSAL looks at the experimental ModalBottomSheetLayout() and reports on how you can use it to show multiple distinct sets of content, complete with back navigation support.

Resource Roundup

100% pure code!

GitHub: dsa28s / compose-video

Sanghun Lee brings us a Compose UI wrapper around ExoPlayer for video playback. This comes in the form of a VideoPlayer() composable with parameters for the media items to play, whether picture-in-picture (PiP) mode should be offered, volume and repeat modes, and more!

GitHub: raheemadamboev / pin-lock-compose

GitHub user raheemadamboev created a PIN entry keyboard, wrapped up in PinLock() and ChangePinLock() composables, with integrated data storage and colors.

GitHub: hadiyarajesh / compose-template

Rajesh Hadiya published a template Compose UI project, integrating popular libraries like Retrofit and Coil.

Gist: c5inco / GradientShadowButton.kt

Google’s Chris Sinco put together a quick sample of a button that, when the user hovers over it, displays a gradient blur background behind the button. See Jorge Castillo’s post for a GIF of the effect.