Tag Archives: wear-tiles

Compose for Wear OS and Tiles 1.2 libraries are now stable: check out new features!

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

We’re excited to announce that version 1.2 of Compose for Wear OS and Wear Tiles libraries have reached the stable milestone. This makes it easier than ever to use these modern APIs to build beautiful and engaging apps for Wear OS.

We continue to evolve Android Jetpack libraries for Wear OS with new features and improvements to streamline development, including support for the latest Wear OS 4 release.

Many developers are already leveraging the powerful tools and intuitive APIs to create exceptional experiences for Wear OS. Partners like Peloton and Deezer were able to quickly build a watch experience and are seeing the impact on their feature-adoption and user engagement.

"The Wear OS app was our first usage of Compose in production, we really enjoyed how much more productive it made us.” 

– Stefan Haacker, a senior Android engineer at Peloton.

Compose for Wear OS and Wear Tiles complement one another. Use Wear Tiles to define the experience in your app’s tiles, and use Compose for Wear OS to build UIs across the more detailed screens in your app. Both sets of APIs offer material components and layouts that ensure your app experience on Wear OS is coherent and follows our best practices.

Now, let’s look into key features of version 1.2 of Jetpack libraries for Wear OS.

Compose for Wear OS 1.2 release

Compose for Wear OS version 1.2 contains new components and brings improvements to tooling, as well as the usability and accessibility of existing components:

Expandable Items

The new expandableItem, expandableItems and expandableButton components provide a simple way to fold and unfold content on demand. Use these components to hide detailed information on long pages or expanded sections by default. This design pattern allows users to focus on essential content and choose when to view the more detailed information.

This pattern enables apps to include high-density content while preserving the key principles of wearables – compactness and glanceability.


Moving images of expanding list and expanding text using the new component
Example of expanding list and expanding text using the new component

The component can be used for expanding lists within ScalingLazyColumn, so expandableButton collapses after the content in expandableItems is revealed in one smooth option. Another use case is expanding the content of a single item, such as Text, that would otherwise contain too many lines to show all at once when the screen first loads.

Swipe to Reveal

A new experimental API has been added to support the SwipeToReveal pattern, as a way to add up to 2 secondary actions when the composable is swiped to the left. It also provides support for users to undo the secondary actions that they take. This component is intended for use cases where the existing ‘long press’ pattern is not ideal.


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

Note that this feature is distinct from swipe-to-dismiss, which is used to navigate back to the previous screen.

Compose Previews for Wear OS

In version 1.2 we’ve added device configurations to the set of Compose Preview annotations that you use when evaluating how a design looks and behaves on a variety of devices.

We added a number of custom Wear Preview annotations for different watch shapes and sizes: WearPreviewSmallRound, WearPreviewLargeRound, WearPreviewSquare. We’ve also added the WearPreviewDevices, WearPreviewFontScales annotations to check your app against multiple device configurations and types at once. Use these new annotations to instantly verify how your app’s layout behaves on a variety of Wear OS devices.

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

Wear Compose tooling is available within a separate dependency androidx.wear.compose.ui.tooling.preview that you’ll need to include in addition to general Compose dependencies.

UX and accessibility improvements

The 1.2 release also introduced numerous improvements for user experience and accessibility:

  • Reduce-motion setting is now supported. When setting switched on it will disable scaling and fading animations in ScalingLazyColumn, and turn off the shimmering effect and wipe-off motion on placeholders.
  • HierarchicalFocusCoordinator - new experimental composable that enables marking sub-trees of the composition as focus enabled or focus disabled. Use this to control which element receives rotary scroll events, such as multiple ScalingLazyColumns in a HorizontalPage
  • PickerGroup - a new composable designed to combine multiple pickers together. It handles focus between the pickers using the HierarchicalFocusCoordinator API and enables auto-centering of Picker items. It’s already integrated in prebuilt Date and Time pickers from Horologist: check out some examples.
  • Picker has a new userScrollEnabled parameter, which determines if picker should be scrollable and disables scrolling when not focused.
  • The shimmer and wipe-off animations for placeholder now apply the wipe-off effect immediately when the content is ready.
  • Stepper has an additional parameter, enableRangeSemantics, that allows customization of semantics, such as disabling default range semantics when required.

Other changes

ScalingLazyColumn and associated classes have migrated from the material package to the foundation.lazy package, as a preparation for a new Material3 library. You can use this migration script to update your code seamlessly.

The Horologist library enhances the implementation of snap behavior to a ScalingLazyColumn, TimePicker and DatePicker when the user interacts with a rotary crown. The rotaryWithFling modifier was deprecated in favor of rotaryWithScroll which includes fling behavior by default. Check out rotaryWithScroll and rotaryWithSnap reference documentation for details.


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

Tiles 1.2 release

Tiles are designed to give users fast, predictable access to the information and actions they rely on most. Version 1.2 of the Jetpack Tiles Library introduces support for platform data bindings and animations so you can provide even more responsive experiences to your users.

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

Platform data bindings

Version 1.2 introduces support dynamic expressions that link elements of your tile to platform data sources. If your tile uses platform data sources such as heart rate, or, step count, or time, your tile can be updated up to once per second.

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

Animations

The new version of tiles also adds support for animations. You can use tween animations to create smooth transitions when part of your layout changes, and use transition animations to animate new or disappearing elements from the tile.

Moving images of animated tiles
Examples of animated tiles

Partial tile updates

We have also now enabled partial tile updates, meaning that we will only update the part of your tile that has been updated, not the entire layout. This allows you to update part of your tile, while an animation is playing in another part, without disrupting that animation.

Learn more

Get started with hands-on experience trying our codelab to create your first Tile and Compose for Wear OS codelab.

We’ve already updated our samples and Horologist libraries to work with the latest version of Jetpack libraries for Wear OS. Also make sure to check out the documentation for Tiles and Compose for Wear OS to learn more about best practices when building apps for wearables.

Provide feedback

We continue to evolve our APIs with the features you’ve been asking for. Please do continue providing us feedback on the issue tracker , and join the Kotlin Slack #compose-wear channel to connect with the Google team and developer community.

Start building for Wear OS now

Discover even more by taking a look at our developer site and reading the latest Wear OS announcements from Google I/O!

Wear OS Tiles Material Library: Build Tiles, Fast.

Posted by Anna Bernbaum, Product Manager, Ataul Munim, Developer Relations Engineer

We are excited to announce the launch of the Tiles Material library! Now, instead of building buttons, progress arcs and more from scratch, you can use our pre-built Material components and layouts to create tiles that embrace the latest Material design for Wear OS. You can use these together with the Tiles Design Kit to easily follow the Tiles Design Guidelines.

Tiles provide Wear OS users glanceable access to the information and actions they need in order to get things done quickly. They also are one of the most used surfaces on Wear OS. Just one swipe away from the watch face, users can quickly access the most important information or actions from an app, like starting a timer or getting the latest weather forecast.

animation showing the tiles experience on Wear OS. User swipes left from the watch face to see the first tile, and continues swiping to see others, including a fitness tile with buttons to initiate a workout, a music tile with chips to navigate to playlists, an alarm tile showing an upcoming alarm, among others.
Tiles carousel on Wear OS

We have built the following components for elements commonly used in tiles:
common tile components. a round icon with a pencil labelled "button". a full width rectangle with rounded corners and text labelled "chip". similar components, one larger and one smaller, labelled "title chip" and "compact chip" respectively. a circle path filled 75% clockwise labelled "circular progress indicator" and finally text labelled "text with recommended typography pre-set"

These components also make it faster to build tiles. For example, creating a button for your tile takes just a few lines of code:

val clickable: Clickable = generateClickable()

val button: Button = Button.Builder(this, clickable)
    .setIconContent("icon_exercise")

    .setContentDescription("Start workout")

    .build()



We have also created some predefined layouts to kickstart your tiles development. These already follow our design guidelines on how your tile layout should be formatted.
A calendar event tile with vertically stacked text details with an "open" action at the bottom, a weather tile showing a cloud icon, the current temperature and the day's high and low in a single row, a step counter tile with a progress indicator encircling the content and a timer tile with 5 buttons for different durations.

For example, we can build this tile using a predefined layout:
Tile with a PrimaryLayout, showing "Primary label text" at the top and "Action" as the primary chip at the bottom. The content slot is a MultiButtonLayout with 2 round icons , each with the plus sign.

val theme = Colors(

    /*primary=*/ 0xFFD0BCFF.toInt(), /*onPrimary=*/ 0xFF381E72.toInt(),

    /*surface=*/ 0xFF202124.toInt(), /*onSurface=*/ 0xFFFFFFFF.toInt()

)

val buttonColors = ButtonColors.secondaryButtonColors(theme)

val chipColors = ChipColors.primaryChipColors(theme)

val timeline = Timeline.fromLayoutElement(
    PrimaryLayout.Builder(deviceParameters)

        .setPrimaryLabelTextContent(

            Text.Builder(this, "1 run this week")

                .setTypography(Typography.TYPOGRAPHY_CAPTION1)

                .setColor(argb(theme.primary))

                .build()

        )

        .setContent(

            MultiButtonLayout.Builder()

                .addButtonContent(

                    Button.Builder(this, clickable)

                        .setIconContent("icon_run")

                        .setButtonColors(buttonColors)

                        .setContentDescription("Run")

                        .build()

                )

                .addButtonContent(

                    Button.Builder(this, clickable)

                        .setIconContent("icon_yoga")

                        .setButtonColors(buttonColors)

                        .setContentDescription("Yoga")

                        .build()

                )
                .addButtonContent(

                    Button.Builder(this, clickable)

                        .setIconContent("icon_cycle")

                        .setButtonColors(buttonColors)

                        .setContentDescription("Cycle")

                        .build()

                )

                .build()

        )

        .setPrimaryChipContent(

            CompactChip.Builder(this, "More", clickable, deviceParameters)

                .setChipColors(chipColors)

                .build()

        )

        .build()

)


What's in the library

This library contains components and layouts that are in-line with Material guidelines and easy to use. The included components are:
  • Button - clickable, circular-shaped object, with either icon, text or image with three predefined sizes.
  • Chip - clickable, stadium-shaped object that can contain an icon, primary and secondary labels, and has fixed height and customizable width.
  • CompactChip & TitleChip - two variations of the standard Chip that have smaller and larger heights, respectively, and can contain one line of text.
  • CircularProgressIndicator - colored arc around the edge of the screen with the given start and end angles, which can describe a full or partial circle with the full progress arc behind it.
  • Text - styled text which uses the recommended Wear Material typography styles.
All these components have their own colors object that can be built with the main Colors class to easily apply the same theme over all components. In addition to colors, there is a Typography class to easily get FontStyle objects using the typography name.

In addition to components, there are recommended tile layouts:
  • PrimaryLayout - a layout which can be customized by adding primary or secondary labels, content in the middle, and a primary chip at the bottom. The main content within this layout could be added as a MultiSlotLayout or MultiButtonLayout object.
  • EdgeContentLayout - a layout for hosting CircularProgressIndicator around the edge with main content inside and primary or secondary label around it.
  • MultiButtonLayout - a layout that can contain between 1 - 7 buttons, arranged in line with the Material guidelines depending on their number.
  • MultiSlotLayout - a row-like style layout with horizontally aligned and spaced slots (for icons or other small content).
All layouts have recommended padding and styles applied that are within Material guidelines.


Tools for tiles

Android Studio Dolphin includes the Direct Surface Launch feature. This lets developers install and launch a tile directly from Android Studio, instead of having to manually add it from the tile selector on the target device. Get started with Direct Surface Launch by creating a new Run Configuration and selecting Wear OS Tile, then choosing the module and TileService class.

Horologist Tiles is also recommended to save time during tile development. This library gives you the ability to preview a tile UI straight from Android Studio, making the write-test loop a lot shorter. Horologist Tiles also includes Kotlin friendly abstractions, like CoroutinesTileService so you can use what you're already familiar with.


Get started with Tiles Material

For a quick start, take a look at the new Tiles codelab, the code sample and the docs.

Please share your feedback on the issue tracker and let us know what you think of Tiles Material!









Announcing Glance: Tiles for Wear OS made simple

Posted by Anna Bernbaum, Associate Product Manager


Last year we announced the Wear Tiles API. To complement that Java API, we are excited to announce that support for Wear OS Tiles has been added to Glance, a new framework built on top of Jetpack Compose designed to make it easier to build for surfaces outside your app on Android. We'd love to get your feedback on this alpha version.

Tiles provide Wear OS users easy access to the information and actions they need in order to get things done quickly. They also are one of the most used surfaces on Wear OS. Just one swipe away from the Watch Face, users can quickly access the most important information or actions from an app, like start a timer or get the latest weather forecast.


Watch face gif


Let's see how we can create a Tile with Glance: 


class HelloTileService : GlanceTileService() {
   @Composable
   override fun Content() {
       Text(text = "Hello Glance")
   }
}

The simple code above generates the Tile below.


“Hello Glance” Tile sample with Glance

“Hello Glance” Tile sample with Glance


Note: Using Glance-wear-tiles requires`minSdkVersion`>= 26.



How it works

Glance creates “glanceable” experiences across Android surfaces using a base-set of Composables. For Tiles on Wear OS, Glance translates Composables into Tiles.


Diagram: Glance structure 

Diagram: Glance structure


Glance requires Compose to be enabled and depends on Runtime, Graphics, and Unit UI Compose layers, but it’s not directly interoperable with other existing Jetpack Compose UI elements, like Compose for Wear OS.

What’s in the Alpha

This initial release introduces the main APIs to build wear Tiles:

We are working on bringing even more functionality with default theming, further Android Studio support, and more. Stay tuned for new releases.

Get started with Glance

For a quick start, take a look at the samples in the AndroidX repository. Glance works with the latest stable Android Studio, although since Glance relies on Compose Runtime, follow the steps on the Jetpack Compose docs to set it up first.

The Alpha version is your opportunity to influence the APIs, so please share your feedback and let us know your experience!

Happy Composing with Glance!