jetc.dev Newsletter Issue #155
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
its own set of bug fixes, noteworthy changes include:
Added support for
BlendModeto some text-painting functions, such as
Made a bunch of API changes to
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
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
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
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,
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
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
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
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
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.
- 2023-03-14: Compose RC! Wear Compose alpha! Grayscale composables! Updating our Compose dependencies! MVVM! Bottom sheets! And... another Figma-to-composable plugin?!?
- 2023-02-28: Updates to the Compose family of artifacts! Layout()! UiAutomator! Pull-to-refresh! @firstname.lastname@example.org on adding animation sizzle! ExoPlayer! PIN entry! And... @email@example.com is on TV?!?
- 2023-02-21: Modifiers! Drawing! Errors! Paging (and testing paging)! QR codes! KMM templates! And a correction from @firstname.lastname@example.org!