Jolanda Verhoef is developer Relations Engineer

We introduced the card in 2019, and since then it has been one of the most useful features on The Wear OS by Google smartwatch. The card is fast and easy to use, and is designed to be swiped so that users can access information and to-do lists directly from their wrist. The cards also allow users to control the information and actions they want to see.

We’re excited to announce the Alpha release of the Jetpack card library. Developers can use the library to create custom cards on Wear OS smartwatches. We’ll be rolling out a Wear OS update later this year that will allow users to use these custom cards.

Developers can design cards for a variety of use cases, such as tracking a user’s daily activities, quickly starting an exercise session, playing recently played songs, and sending messages to friends. Apps can provide users with an immersive experience, while cards load quickly and focus on meeting their immediate needs. If users need more information, they can tap the card to open the relevant app on their watch or phone for a deeper experience.

Begin to build

The cards are built using Android Studio and are part of the Wear OS application. First, add the Wear OS card dependency:

Dependencies {implementation "Androidx. wear:wear-tiles:1.0.0-alpha01" debugImplementation "Androidx. Wear: wear - tiles - the renderer: 1.0.0 - alpha01"}Copy the code

The first dependency contains the libraries needed to create the card, while the second lets you preview the card in your Activity.

Next, use the TileProviderService to provide the information to render the card:

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()
    )
}
Copy the code

This code has two important parts:

  • onTileRequest()Used to create card layouts. You’ll write most of your code inside this function. You can use more than oneTimelineEntryFor instanceDifferent points in timeRender different layouts.
  • onResourcesRequest()Is used to pass all the resources needed to render the card. If you decide to add graphics, you can do so here.

Create a simple Activity to preview the card. Add this Activity to SRC /debug instead of SRC /main, because this Activity is only used for debugging/preview.

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()
  }
}
Copy the code

Now, everything is ready to publish the card. For more information on how to do this and the cards, please read our newly published guide, and check out our card examples to see how this works in action.

The Jetpack card library is available in Alpha and we look forward to receiving your feedback to help us improve our API. Enjoy coding!