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 asdrawText()
onDrawScope
-
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.
Exploring Jetpack Compose for Android TV: Carousel
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.
Other Interesting Links
- Medium: Implementing Relay with Jetpack Compose: Streamlining Your Android App Development
- Medium: Jetpack Compose Boilerplate: A Simplified Way to Kick-Start Your Next Compose Project
- Medium: [Part 4] Jetpack Compose — Implementing a Compose View in a ViewGroup
- Medium: Jetpack Compose: Navigation
- Medium: Fixing Huge Argument Lists When Using Jetpack Compose
- Medium: Tabs in Jetpack Compose
- Medium: Jetpack Compose: Creating Bottom Navigation
- Convert Android App to Use Material 3 Design
- Medium: Graphics in Jetpack Compose
- Medium: Declarative Form Validation with Jetpack Compose
- Medium: Implementing Custom Shadows with Jetpack Compose for Neumorphism Design
- How to Create Login UI with Jetpack Compose
- Get Started with Jetpack Compose Authentication, Part 2: Adding Authentication
- Medium: Building Basic Layouts in Jetpack Compose (Column, Row, and Box)
- Medium: How to Supercharge Your Jetpack Compose Skills with Simple but Powerful Techniques!
- Medium: Jetpack Compose Modifiers
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.
Other Interesting Links
- GitHub: AndreasLill / ComposeDatePicker (Material3 date picker)
- GitHub: SEAbdulbasit / TravelApp-KMP (Compose/Multiplatform sample)
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-12-03: Rebecca Franks on clipping and masking! Stefano Natali on graphicsLayer()! FunkyMuse on type-safe nav results! And... if we have enough maps, do we need to store our maps in a Map?!?
- 2024-11-26: Math! Shared element transitions! Custom modifiers! Macrobenchmark! Adapting to platform-specific design systems! And... why does wrapContentSize() not wrap my content size?!?
- 2024-11-19: Compose alphas! Compose Multiplatform patch! PaddingValues! Graphics layers! Swiping! Heatmaps! Navigation! And... why did we get a new production Compose BOM?!?