Creating customized Tiles on Put on OS by Google with the Jetpack Tiles library

Posted by Jolanda Verhoef, Developer Relations Engineer

Wear OS header

We introduced Tiles in 2019, and since then, Tiles have grow to be one of the crucial useful and helpful options on Put on OS by Google smartwatches. They’re quick to entry, handy, and designed to offer customers with swipeable entry to the issues they should know and get completed proper from their wrist. This additionally provides customers management over what info and actions they need to see.

At the moment, we’re excited to announce that the Jetpack Tiles library is in alpha. This library permits builders to create customized Tiles on Put on OS smartwatches. These customized Tiles will grow to be accessible to customers later this Spring once we roll out the corresponding Put on OS platform replace.

Wear OS interface

Tiles may be designed for a lot of use instances, like monitoring the consumer’s each day exercise progress, quick-starting a exercise, beginning a lately performed music, or sending a message to a favourite contact. Whereas apps may be immersive, Tiles are fast-loading and deal with the consumer’s rapid wants. If the consumer would love extra info, Tiles may be tapped to open a associated app on the watch or telephone for a deeper expertise.

Tile designs from Figma

Getting began

Tiles are constructed utilizing Android Studio, as a part of your Put on OS software. Begin by including the Put on OS Tiles dependencies:

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

The primary dependency consists of the library you want to create a Tile, whereas the second dependency enables you to preview the Tile in an exercise.

Subsequent, present the data to render the Tile utilizing the TileProviderService:

class MyTileService : TileProviderService() {
  override enjoyable onTileRequest(requestParams: RequestReaders.TileRequest) =
    Futures.immediateFuture(Tile.builder()
      .setResourcesVersion("1")
      .setTimeline(Timeline.builder().addTimelineEntry(
         // For extra details about timelines, see the docs
         TimelineEntry.builder().setLayout(
           Format.builder().setRoot(
             Textual content.builder().setText("Hiya world!")
           )
         )
      )
    ).construct())

  override enjoyable onResourcesRequest(requestParams: ResourcesRequest) =
    Futures.immediateFuture(Sources.builder()
      .setVersion("1")
      .construct()
    )
}

There are two essential components to this code:

  • onTileRequest() creates your Tile structure. That is the place most of your code goes. You should use a number of TimelineEntry situations to render totally different layouts for different points in time.
  • onResourcesRequest() passes any sources wanted to render your Tile. In case you determine so as to add any graphics, embody them right here.

Create a easy exercise to preview your Tile. Add this exercise in src/debug as a substitute of src/predominant, as this exercise is simply used for debugging/previewing functions.

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

Now you’re able to publish your Tile. For extra info on how to do this, and to be taught extra about Tiles, learn our new guide and try our sample Tiles to see them in motion.

The Jetpack Tiles library is in alpha, and we would like your feedback to assist us enhance the API. Comfortable coding!

Recent Articles

One of the best low-cost laptop computer offers in Could 2021

We're bringing you all one of the best low-cost laptop computer offers presently on the cabinets, and proper now you may choose up some...

Oculus replace set to allow spectacular combined actuality seize on iPhone XS and later – 9to5Mac

Oculus is near releasing a brand new replace for its Quest headsets and one of the fascinating new options is Stay Overlay casting. Beforehand,...

Google Developer Scholar Golf equipment in India construct Android Apps with Kotlin

Posted by Siddhant Agarwal, Google Developer Scholar Golf equipment India Neighborhood Supervisor and Biswajeet Mallik, Program Supervisor, Google Builders India ...

Disneyland Paris to Reopen June 17 as Life Will get Extra Regular Because of Vaccinations

The doorway of a vaccination middle in opposition to the coronavirus at Disneyland Paris in Coupvray on April 24, 2021. Photograph: Geoffrey...

Related Stories

Stay on op - Ge the daily news in your inbox