Creating Tiles for Wear OS

Intro $[==]

Every Tile is backed by a Timeline. A Timeline contains one or more TimelineEntry instances. Each TimelineEntry is backed by a Layout and is available for a specified time interval. The system takes care of rendering different TimelineEntry instances at different time intervals

If there is only one TimelineEntry, there is no need to specify a time interval.

There are three main types of layouts: 1. Box 2. Column 3. Row Let’s take a look at each of them.

Box stacks all of its children on top of one another. This is similar to FrameLayout on Android. Box also center aligns its children.

A column lays out its children vertically one below the other. Similar to LinearLayout with vertical orientation.

A row lays out its children horizontally one below the other. Similar to LinearLayout with horizontal orientation.

Demo $[==]

Open WaterService.kt and go to the onTileRequest method. Add a Timeline by adding the following method call to TileBuilders.Tile.builder():

.setTimeline(
  TimelineBuilders.Timeline.builder()
    
  )
)

Here, TimelineBuilders.Timeline.builder() is used to create a Timeline. Next, add a TimelineEntry by adding the following code to TimelineBuilders.Timeline.builder():

.addTimelineEntry(
  TimelineBuilders.TimelineEntry.builder().setLayout(
    LayoutElementBuilders.Layout.builder()

    )
  )
)

TimelineBuilders.TimelineEntry.builder() creates a TimelineEntry and setLayout sets the layout corresponding to the TimelineEntry. LayoutElementBuilders.Layout.builder() creates the container to hold the root layout.

We want the Tile contents to be centre aligned. Hence we should use the Box element. Add the following code to LayoutElementBuilders.Layout.builder()

.setRoot(
  LayoutElementBuilders.Box.builder()
    .setWidth(DimensionBuilders.expand())
    .setHeight(DimensionBuilders.expand())
)

Here, you create a Box element by using LayoutElementBuilders.Box.builder() and set its width and height. DimensionBuilders.expand() specifies that the element will expand to the size of its parent. This is the equivalent of match_parent in Android.

Next, let’s add a Text element to display the number of glass. To add a Text element, you need to use LayoutElementBuilders.Text.builder().

Add the following method to the class:

private fun currentGlassText(current: String, deviceParameters: DeviceParametersReaders.DeviceParameters) = 
  LayoutElementBuilders.Text.builder()
    .setText(current)
    .setFontStyle(LayoutElementBuilders.FontStyles.display2(deviceParameters))
    .build()

The currentGlassText method takes a string and DeviceParametersReaders.DeviceParameters instance as parameters. DeviceParametersReaders.DeviceParameters helps the Tile figure out the dimensions and size of the watch. Next, you create a Text element and set its value to the string passed as a method parameter. You also set the font style using the setFontStyle method. LayoutElementBuilders.FontStyles.display2 is one of the main default styles available. It internally checks the watch size and changes the font size.

Before you can call the currentGlassText method, you need to fetch the current glass count and also the device parameters. To do this, add the following code to the onTileRequest method, right before calling TileBuilders.Tile.builder():

val deviceParams = requestParams.deviceParameters

val glassCount = waterRepository.getGlassCount()

Finally, you need to add the Text element to the root layout. Do this by adding the following code to LayoutElementBuilders.Box.builder():

.addContent(
  currentGlassText(glassCount.toString(), deviceParams)
)

The .addContent method adds child elements to the current element. Build and run the app. You will see that the current glass shows up correctly on the Tile.