Announcing Glance: Tiles For Wear OS Made simple

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.

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

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

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:

• <a href="https://developer.android.com/reference/kotlin/androidx/glance/wear/tiles/GlanceTileService" target="_blank" rel="noopener">GlanceTileService</a> – A service to create your tile in the composable Content() function.
• Initial set of Glance Composables: <a href="https://developer.android.com/reference/kotlin/androidx/glance/layout/package-summary#box" target="_blank" rel="noopener">Box</a>, <a href="https://developer.android.com/reference/kotlin/androidx/glance/layout/package-summary#row" target="_blank" rel="noopener">Row</a>, <a href="https://developer.android.com/reference/kotlin/androidx/glance/layout/package-summary#column" target="_blank" rel="noopener">Column</a>, <a href="https://developer.android.com/reference/kotlin/androidx/glance/text/package-summary#text" target="_blank" rel="noopener">Text</a>, <a href="https://developer.android.com/reference/kotlin/androidx/glance/package-summary#image" target="_blank" rel="noopener">Image</a>, <a href="https://developer.android.com/reference/kotlin/androidx/glance/layout/package-summary#spacer" target="_blank" rel="noopener">Spacer</a>, <a href="https://developer.android.com/reference/kotlin/androidx/glance/wear/tiles/curved/package-summary#curvedrow" target="_blank" rel="noopener">CurvedRow</a>, <a href="https://developer.android.com/reference/kotlin/androidx/glance/wear/tiles/curved/CurvedRowScope#curvedtext" target="_blank" rel="noopener">CurvedText</a>.
• <a href="https://developer.android.com/reference/kotlin/androidx/glance/GlanceModifier.html" target="_blank" rel="noopener">GlanceModifier</a> – Plays the same role as androidx.compose.ui.Modifier but for the Glance composables.
• <a href="https://developer.android.com/reference/kotlin/androidx/glance/appwidget/action/package-summary#actionstartactivity" target="_blank" rel="noopener">actionStartActivity</a> – Starts an Activity from a user interaction.
• <a href="https://developer.android.com/reference/kotlin/androidx/glance/wear/tiles/TimelineMode.SingleEntry">TimelineMode.SingleEntry</a> and <a href="https://developer.android.com/reference/kotlin/androidx/glance/wear/tiles/TimelineMode.TimeBoundEntries">TimelineMode.TimeBoundEntries</a> – Handle single-entry and time bound timeline entries.
• <a href="https://developer.android.com/reference/kotlin/androidx/glance/state/GlanceStateDefinition.html" target="_blank" rel="noopener">GlanceStateDefinition</a> – Persistent tile state
• <a href="https://developer.android.com/reference/kotlin/androidx/glance/wear/tiles/package-summary#localtimeinterval" target="_blank" rel="noopener">LocalTimeInterval</a> – Local compositions (similar to <a href="https://developer.android.com/reference/kotlin/androidx/glance/package-summary#localstate" target="_blank" rel="noopener">LocalState</a>)

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!

By Anna Bernbaum, Associate Product Manager
Source Android