Composing the Bigger Picture
Widening our Focus
At Google I/O 2022 there was a strong focus on the larger Android ecosystem and not just improvements to the mobile phone experience. With new hardware products in the tablet, smart watch, and glasses markets, Google is showing that their focus is on creating a user experience that surrounds us, puts us in the center of, and in control of all our technology. This is being backed by Google’s strong presence in AI and enabled by more powerful development tools, such as Jetpack Compose.
In this blog series we will cover how to leverage these tools to create a unified UX across the entire ecosystem while saving time and money.
Tablets First
With tablet and foldable devices becoming more popular this is the logical place to start our series. Large screens provide an opportunity for mobile applications to provide a customized experience for the user and to distinguish themselves from the competition. However, in an ever-competitive market where cost and delivery time is of utmost importance, how do we deliver this value without increasing costs?
Jetpack Compose to the Rescue
Besides being Android’s newest user interface coding paradigm, Compose has a focus on re-usability. Every UI widget is made of composables and can be used by other composables. It is this nature of composition that enables the developer to create components that can be used to deliver value without increasing effort.
In that vein, we will be covering several Compose based solutions for common large screen design patterns:
- List Detail
- News Feed
- Map/Location List
Animated List Detail
The List Detail pattern is a common design pattern where a list of items is displayed on one pane of a screen and, when an item it selected, its detail is shown on the other pane. On a standard mobile device these panes are presented as separate screens and, on a tablet, they are presented side by side on a single screen.
Using Animated List Detail
In order to demo our list detail view, first we will need to create an activity.
Here we are using our default theme, grabbing the current WindowSizeClass, and passing it to our content function.
Our content function creates a column as a placeholder, adds the Animated List Detail widget, and defines a simple List and Detail view.
Looking Inside the Code
From here in, we’ll be getting technical and showing how the AnimatedListDetail composable was built. If you’re more interested in using the widget and not creating from scratch or modifying, you may jump ahead to the section on LaunchPad Compose (Bottle Rockets open-source library of ready to use Compose Components)
The Scope
From the above code, we saw how a developer could use the composable and scope to create a List Detail view within their app. Now we can look at a quick breakdown of how the scope functions.
ListDetailScope is a templated interface that allows for the ListDetail view to handle complex UI models. This is necessary so your list view can display more than just a simple String. The List function allows the developer to define a composable block that accepts a list of items in order to create the List UI. The Detail function allows the develop to define a code block that accepts an item in order to create the Detail UI. DetailState is a callback that can deliver back the state of detail pane so that parent UI can adjust navigation behavior and other UI components. The select function allows for code inside the List/Detail blocks to select an item by its key value.
The UI
There are 2 UI pieces used to display the list and detail.
Single View
Side by Side View
The Composable
The AnimatedListDetail composable puts everything together so the developer doesn’t have to.
LaunchPad Compose
Using the LaunchPad Compose library is simple. First, we add JitPack to our Gradle files where we handle repositories:
Then we add the dependency to our app level Gradle file:
Sync the project and that’s it! We’re now ready to use the AnimatedListDetail widget.
Resources
- GitHub repo for library code: https://github.com/BottleRocketStudios/Android-LaunchPad-Compose
Credits
- Mark Allison — https://blog.stylingandroid.com/compose-list-detail-basics/