Android Builders Weblog: Compose for Put on OS and Tiles 1.2 libraries at the moment are secure: take a look at new options!



Posted by Anna Bernbaum, Product Supervisor and Kseniia Shumelchyk, Android Developer Relations Engineer

We’re excited to announce that model 1.2 of Compose for Put on OS and Put on Tiles libraries have reached the secure milestone. This makes it simpler than ever to make use of these trendy APIs to construct lovely and interesting apps for Put on OS.

We proceed to evolve Android Jetpack libraries for Put on OS with new options and enhancements to streamline growth, together with assist for the most recent Put on OS 4 launch.

Many builders are already leveraging the highly effective instruments and intuitive APIs to create distinctive experiences for Put on OS. Companions like Peloton and Deezer had been in a position to shortly construct a watch expertise and are seeing the impression on their feature-adoption and person engagement.

“The Put on OS app was our first utilization of Compose in manufacturing, we actually loved how far more productive it made us.” 

– Stefan Haacker, a senior Android engineer at Peloton.

Compose for Put on OS and Put on Tiles complement each other. Use Put on Tiles to outline the expertise in your app’s tiles, and use Compose for Put on OS to construct UIs throughout the extra detailed screens in your app. Each units of APIs provide materials parts and layouts that guarantee your app expertise on Put on OS is coherent and follows our greatest practices.

Now, let’s look into key options of model 1.2 of Jetpack libraries for Put on OS.

Compose for Put on OS 1.2 launch

Compose for Put on OS model 1.2 comprises new parts and brings enhancements to tooling, in addition to the usability and accessibility of present parts:

Expandable Gadgets

The brand new expandableItem, expandableItems and expandableButton parts present a easy method to fold and unfold content material on demand. Use these parts to cover detailed data on lengthy pages or expanded sections by default. This design sample permits customers to concentrate on important content material and select when to view the extra detailed data.

This sample permits apps to incorporate high-density content material whereas preserving the important thing rules of wearables – compactness and glanceability.

Moving images of expanding list and expanding text using the new component
Instance of increasing listing and increasing textual content utilizing the brand new part

The part can be utilized for increasing lists inside ScalingLazyColumn, so expandableButton collapses after the content material in expandableItems is revealed in a single easy choice. One other use case is increasing the content material of a single merchandise, akin to Textual content, that will in any other case comprise too many strains to point out abruptly when the display screen first hundreds.

Swipe to Reveal

A brand new experimental API has been added to assist the SwipeToReveal sample, as a means so as to add as much as 2 secondary actions when the composable is swiped to the left. It additionally offers assist for customers to undo the secondary actions that they take. This part is meant to be used circumstances the place the present ‘lengthy press’ sample shouldn’t be perfect.

Moving images showing SwipeToReveal implementation with two actions (left) and single action with undo (right)
SwipeToReveal implementation with two actions (left) and single motion with undo (proper)

Word that this function is distinct from swipe-to-dismiss, which is used to navigate again to the earlier display screen.

Compose Previews for Put on OS

In model 1.2 we’ve added system configurations to the set of Compose Preview annotations that you simply use when evaluating how a design appears and behaves on a wide range of gadgets.

We added numerous customized Put on Preview annotations for various watch styles and sizes: WearPreviewSmallRound, WearPreviewLargeRound, WearPreviewSquare. We’ve additionally added the WearPreviewDevices, WearPreviewFontScales annotations to examine your app towards a number of system configurations and kinds directly. Use these new annotations to immediately confirm how your app’s format behaves on a wide range of Put on OS gadgets.

Image showing WearPreviewDevices and WearPreviewFontScales annotations used for Horologist VolumeScreen preview
WearPreviewDevices and WearPreviewFontScales annotations used for Horologist VolumeScreen preview

Put on Compose tooling is accessible inside a separate dependency androidx.put on.compose.ui.tooling.preview that you simply’ll want to incorporate along with basic Compose dependencies.

UX and accessibility enhancements

The 1.2 launch additionally launched quite a few enhancements for person expertise and accessibility:

  • Cut back-motion setting is now supported. When setting switched on it is going to disable scaling and fading animations in ScalingLazyColumn, and switch off the shimmering impact and wipe-off movement on placeholders.
  • HierarchicalFocusCoordinator – new experimental composable that allows marking sub-trees of the composition as focus enabled or focus disabled. Use this to regulate which ingredient receives rotary scroll occasions, akin to a number of ScalingLazyColumns in a HorizontalPage
  • PickerGroup – a brand new composable designed to mix a number of pickers collectively. It handles focus between the pickers utilizing the HierarchicalFocusCoordinator API and permits auto-centering of Picker gadgets. It’s already built-in in prebuilt Date and Time pickers from Horologist: take a look at some examples.
  • Picker has a brand new userScrollEnabled parameter, which determines if picker must be scrollable and disables scrolling when not centered.
  • The shimmer and wipe-off animations for placeholder now apply the wipe-off impact instantly when the content material is prepared.
  • Stepper has a further parameter, enableRangeSemantics, that enables customization of semantics, akin to disabling default vary semantics when required.

Different modifications

ScalingLazyColumn and related courses have migrated from the fabric bundle to the muse.lazy bundle, as a preparation for a brand new Material3 library. You need to use this migration script to replace your code seamlessly.

The Horologist library enhances the implementation of snap habits to a ScalingLazyColumn, TimePicker and DatePicker when the person interacts with a rotary crown. The rotaryWithFling modifier was deprecated in favor of rotaryWithScroll which incorporates fling habits by default. Try rotaryWithScroll and rotaryWithSnap reference documentation for particulars.

Moving image of Snap and fling behavior for scrolling list
Snap and fling habits for scrolling listing

Tiles 1.2 launch

Tiles are designed to offer customers quick, predictable entry to the knowledge and actions they depend on most. Model 1.2 of the Jetpack Tiles Library introduces assist for platform information bindings and animations so you possibly can present much more responsive experiences to your customers.

Moving image of Tiles carousel on Wear Os
Tiles carousel on Put on OS

Platform information bindings

Model 1.2 introduces assist dynamic expressions that hyperlink parts of your tile to platform information sources. In case your tile makes use of platform information sources akin to coronary heart fee, or, step rely, or time, your tile could be up to date as much as as soon as per second.

Moving image of a tile using data binding
Examples of a tile utilizing information binding

Animations

The brand new model of tiles additionally provides assist for animations. You need to use tween animations to create easy transitions when a part of your format modifications, and use transition animations to animate new or disappearing parts from the tile.

Moving images of animated tiles
Examples of animated tiles

Partial tile updates

Now we have additionally now enabled partial tile updates, that means that we are going to solely replace the a part of your tile that has been up to date, not your entire format. This lets you replace a part of your tile, whereas an animation is enjoying in one other half, with out disrupting that animation.

Study extra

Get began with hands-on expertise attempting our codelab to create your first Tile and Compose for Put on OS codelab.

We’ve already up to date our samples and Horologist libraries to work with the most recent model of Jetpack libraries for Put on OS. Additionally be sure to take a look at the documentation for Tiles and Compose for Put on OS to be taught extra about finest practices when constructing apps for wearables.

Present suggestions

We proceed to evolve our APIs with the options you’ve been asking for. Please do proceed offering us suggestions on the situation tracker , and be part of the Kotlin Slack #compose-wear channel to attach with the Google staff and developer neighborhood.

Begin constructing for Put on OS now

Uncover much more by having a look at our developer web site and studying the newest Put on OS bulletins from Google I/O!



Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles