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 turn out to be some of the useful and helpful options on Put on OS by Google smartwatches. They’re quick to entry, handy, and designed to supply customers with swipeable entry to the issues they should know and get performed proper from their wrist. This additionally offers customers management over what info and actions they need to see.

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

Wear OS interface

Tiles could be designed for a lot of use instances, like monitoring the person’s day by day exercise progress, quick-starting a exercise, beginning a not too long ago performed tune, or sending a message to a favourite contact. Whereas apps could be immersive, Tiles are fast-loading and deal with the person’s quick wants. If the person would love extra info, Tiles could 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 utility. 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 contains the library you want to create a Tile, whereas the second dependency helps you to preview the Tile in an exercise.

Subsequent, present the knowledge 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(
           Structure.builder().setRoot(
             Textual content.builder().setText("Hiya world!")
           )
         )
      )
    ).construct())

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

There are two necessary elements to this code:

  • onTileRequest() creates your Tile format. That is the place most of your code goes. You should utilize a number of TimelineEntry situations to render completely different layouts for different points in time.
  • onResourcesRequest() passes any sources wanted to render your Tile. Should 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 an alternative of src/important, as this exercise is simply used for debugging/previewing functions.

class MainActivity : ComponentActivity() {
  override enjoyable onCreate(savedInstanceState: Bundle?) {
    tremendous.onCreate(savedInstanceState)
    setContentView(R.format.activity_main)
    val rootLayout = findViewById<FrameLayout>(R.id.tile_container)
    TileManager(
      context = this,
      element = 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 study 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 wish your feedback to assist us enhance the API. Blissful coding!

Recent Articles

What we’re anticipating from Google I/O 2021

As a result of we’re nonetheless within the midst of COVID19, Google I/O goes digital this yr, — it was canceled final yr —...

Idea: How Apple may increase iPhone customization past widgets with iOS 15 – 9to5Mac

iOS 14 noticed the introduction of House Display widgets on the iPhone, and that alone was anticipated to trigger a tsunami of artistic customization...

#AndroidDevChallenge – It’s a wrap!

Posted by The Jetpack Compose Workforce From pleasant doggos to artistic countdowns and storming climate apps, the 2000 submissions to the #AndroidDevChallenge blew our...

Related Stories

Stay on op - Ge the daily news in your inbox