Create custom tiles on Google Wear OS using the Jetpack Tiles library


Written by Jolanda Verhoef, Developer Relations Engineer

Wear the OS header

We introduced Tiles in 2019. Since then, tiles have been one of the most helpful and useful features of Google Smartwatches for Wear OS. They’re quick to access, convenient, and give users quick access to the things they know and need to do right from their wrist. This also gives users control over what information and actions they want to see.

Today we’re excited to announce that the Jetpack Tiles library is in alpha. This library allows developers to create custom tiles on Wear OS smartwatches. These custom tiles will be available to users later this spring when we roll out the appropriate Wear OS platform update.

Wear the OS interface

Tiles can be designed for many use cases, such as: For example, to track the user’s daily activity progress, to quickly start a workout, to start a recently played song or to send a message to a preferred contact. While apps can be immersive, tiles load quickly and focus on the user’s immediate needs. If the user wants more information, Tiles can be tapped to open a related app on the watch or phone for a deeper experience.

Tile designs from Figma

Started

Tiles are created using Android Studio as part of your Wear OS application. First, add the dependencies of Wear OS Tiles:

dependencies { implementation "androidx.wear:wear-tiles:1.0.0-alpha01" debugImplementation "androidx.wear:wear-tiles-renderer:1.0.0-alpha01"
}

The first dependency contains the library you need to create a tile, while the second dependency allows you to preview the tile in an activity.

Next, enter the information to render the tile using TileProviderService::

class MyTileService : TileProviderService() { override fun onTileRequest(requestParams: RequestReaders.TileRequest) = Futures.immediateFuture(Tile.builder() .setResourcesVersion("1") .setTimeline(Timeline.builder().addTimelineEntry( // For more information about timelines, see the docs TimelineEntry.builder().setLayout( Layout.builder().setRoot( Text.builder().setText("Hello world!") ) ) ) ).build()) override fun onResourcesRequest(requestParams: ResourcesRequest) = Futures.immediateFuture(Resources.builder() .setVersion("1") .build() )
}

This code consists of two important parts:

  • onTileRequest() creates your tile layout. This is where most of your code goes. You can use more than one TimelineEntry Instances to render different layouts for different times.
  • onResourcesRequest() Hand over all the resources needed to render your tile. If you want to add graphics, paste them here.

Create a simple activity to preview your tile. Add this activity src/debug Instead of src/mainas this activity is only used for debugging / previewing.

class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val rootLayout = findViewById<FrameLayout>(R.id.tile_container) TileManager( context = this, component = ComponentName(this, MyTileService::class.java), parentView = rootLayout ).create() }
}

You can now publish your tile. For more information on this and more information on tiles, check out our new guide. Check out our sample tiles to see them in action.

The Jetpack Tiles library is in alpha and we would like your feedback to help us improve the API. Have fun coding!



Recent Articles

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Stay on op - Ge the daily news in your inbox