Creating Tiles for Wear OS

Intro $[==]

There are two parts to adding an image: declare the image resource inside onResourcesRequest and associating it with an ID. Fetch the image inside onTileRequest using the defined ID. Let’s see how you can start adding images to the Tile.

Demo $[==]

To view the images you will use in the Tile, open the res/drawable directory. Here you can see three vector images named: 1. ic_drink.xml 2. ic_minus_one.xml 3. ic_plus_one.xml

The first step is to define IDs for these three images. Open WaterService.kt and add the following strings as global attributes to the class:

private val ID_IMAGE_DRINK = "image_drink"
private val ID_IMAGE_PLUS_ONE = "image_plus_one"
private val ID_IMAGE_MINUS_ONE = "image_minus_one"

Here, you have defined three constant IDs for the three images. Next, you have to map these three IDs to the corresponding image resources. Add the following code to the onResourcesRequest method between setVersion() and build():

.addIdToImageMapping(
  ID_IMAGE_DRINK,
  ResourceBuilders.ImageResource.builder()
      .setAndroidResourceByResId(
          ResourceBuilders.AndroidImageResourceByResId.builder()
              .setResourceId(R.drawable.ic_drink)
      )
)
.addIdToImageMapping(
  ID_IMAGE_MINUS_ONE,
  ResourceBuilders.ImageResource.builder()
      .setAndroidResourceByResId(
          ResourceBuilders.AndroidImageResourceByResId.builder()
              .setResourceId(R.drawable.ic_minus_one)
      )
)
.addIdToImageMapping(
  ID_IMAGE_PLUS_ONE,
  ResourceBuilders.ImageResource.builder()
      .setAndroidResourceByResId(
          ResourceBuilders.AndroidImageResourceByResId.builder()
              .setResourceId(R.drawable.ic_plus_one)
      )
)

In this code, you use addIdToImageMapping to map an ID to the image resource. ResourceBuilders.ImageResource and ResourceBuilders.AndroidImageResourceByResId create an image resource from the image file. Finally, you have to create an Image element and connect it to the correct image resource.

First, let’s add the image for the glass. Add the following method to the class:

private fun glassIcon() =
  LayoutElementBuilders.Image.builder()
      .setWidth(dp(40f))
      .setHeight(dp(40f))
      .setResourceId(ID_IMAGE_DRINK)
      .build()

LayoutElementBuilders.Image.builder creates an Image element. setWidth and setHeight define the dimensions of the Image. dp is a static function in the DimensionBuilders class and you use it whenever you want to specify dimensions for resources. setResourceId specifies the ID of the image resource that was earlier defined in the onResourcesRequest method.

With the Image element defined, you need to include it in the layout.

Inside the layout method, you want to display the glass image next to the glass count. If you recall from the previous episode, you have to the Row Element Builder to achieve this. Let’s wrap the glass count text inside a Row first as follows:

LayoutElementBuilders.Column.builder()
  .addContent(
      LayoutElementBuilders.Row.builder()
          .addContent(currentGlassText(glassCount.toString(), deviceParameters))
  )

Finally, add the glass image to the Row by invoking the glassIcon method and using it to add content to the Row as follows:

.addContent(glassIcon())

The Row build will now be as follows:

LayoutElementBuilders.Row.builder()
  .addContent(currentGlassText(glassCount.toString(), deviceParameters))
  .addContent(glassIcon())
)

Build and run the app. You can now see the glass icon next to the glass count. Let’s also add the images for the plus and minus icon. Add the following method to the class:

private fun imageButton(id: String) =
  LayoutElementBuilders.Image.builder()
    .setWidth(DimensionBuilders.dp(32f))
    .setHeight(DimensionBuilders.dp(32f))
    .setResourceId(id)
    .build()

This is quite similar to how you added an Image element for the glass icon. The only difference is that instead of using a specific ID, you are using the ID passed as a method parameter. This makes the imageButton reusable.

To display the two images below the glass icon row, add a new Row inside the Column.

.addContent(
  LayoutElementBuilders.Row.builder()
)

Finally, add the Image elements to the Row by invoking the imageButton method with the required IDs.

.addContent(imageButton(ID_IMAGE_MINUS_ONE))
.addContent(imageButton(ID_IMAGE_PLUS_ONE))

Build and run the app. You will see that you have successfully added the plus and minus images too.