Posted by Jolanda Verhoef, Developer Relations Engineer

We presented Tiles in 2019, and also ever since, Tiles have actually turned into one of one of the most useful and also helpful functions on Wear OS by Google smartwatches. They are rapid to gain access to, practical, and also made to offer individuals with swipeable accessibility to things they require to understand and also obtain done right from their wrist. This likewise provides individuals manage over what details and also activities they intend to see.

Today, we’re delighted to reveal that the Jetpack Tiles collection remains in alpha. This collection makes it possible for programmers to develop customized Tiles on Wear OS smartwatches. These customized Tiles will certainly appear to individuals later on this Spring when we present the matching Wear OS system upgrade.

Wear OS interface

Tiles can be made for numerous utilize situations, like tracking the customer’s day-to-day task development, quick-starting an exercise, beginning a just recently played tune, or sending out a message to a preferred call. While applications can be immersive, Tiles are fast-loading and also concentrate on the customer’s prompt demands. If the customer would certainly such as even more details, Tiles can be touched to open up a relevant application on guard or phone for a much deeper experience.

Tile designs from Figma

Getting began

Tiles are constructed utilizing Android Studio, as component of your Wear OS application. Start by including the Wear OS Tiles dependences:

dependences {
  execution "androidx.wear:wear-tiles:1.0.0-alpha01"
  debugImplementation "androidx.wear:wear-tiles-renderer:1.0.0-alpha01"
}

The initially dependence consists of the collection you require to develop a Tile, while the 2nd dependence allows you sneak peek the Tile in a task.

Next, offer the details to provide the Tile utilizing the TileProviderService:

course MyTileSolution : TileProviderService() {
  override enjoyable onTileDemand(requestParams: RequestReaders.TileDemand) =
    Futures.immediateFuture(Tile.contractor()
      .collectionResourcesVariation("1")
      .collectionTimeline(Timeline.contractor().includeTimelineAccess(
         // For even more details regarding timelines, see the docs
         TimelineEntry.builder().collectionLayout(
           Layout.contractor().setRoot(
             Text.contractor().collectionText("Hello world!")
           )
         )
      )
    ).construct())

  override enjoyable onResourcesDemand(requestParams: ResourcesDemand) =
    Futures.immediateFuture(Resources.contractor()
      .setVersion("1")
      .construct()
    )
}

There are 2 fundamental parts to this code:

  • onTileDemand() develops your Tile format. This is where a lot of your code goes. You can utilize several TimelineAccess circumstances to provide various formats for various points.
  • onResourcesDemand() passes any type of sources required to provide your Tile. If you make a decision to include any type of graphics, include them below.

Create an easy task to sneak peek your Tile. Add this task in src/debug as opposed to src/main, as this task is just utilized for debugging/previewing functions.

course MainActivity : ComponentActivity() {
  override enjoyable onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val originLayout = findViewById<StructureLayout>(R.id.tile_container)
    TileSupervisor(
      context = this,
      part = ComponentName(this, MyTileSolution::class.java),
      parentView = originLayout
    ).develop()
  }
}

Now you’re ready to release your Tile. For even more details on just how to do that, and also to get more information regarding Tiles, review our brand-new overview and also have a look at our example Tiles to see them at work.

The Jetpack Tiles collection remains in alpha, and also we desire your comments to assist us enhance the API. Happy coding!