Creating Tiles for Wear OS

Demo $[==]

Right now the Tile looks very packed and the plus and minus buttons don’t really look like buttons. Let’s tweak the Tile’s appearance.

To modify the appearance of your elements on Wear OS, you need to use Modifiers. Let’s start off by adding a background to the plus and minus icons.

Open WaterService.kt and go to the imageButton method. You use the setModifiers method to add Modifiers to the Element as follows:

.setModifiers(
  ModifiersBuilders.Modifiers.builder()
)

Here ModifiersBuilders.Modifiers uses the builder pattern to add multiple modifiers at the same time. To add a background to the image, use the setBackground method as follows:

ModifiersBuilders.Modifiers.builder()
 .setBackground(
    ModifiersBuilders.Background.builder()
      
    )
    .build()
)

You can customize two properties of the background: 1. color 2. corner radius

Let’s set the color first. Add the following method to ModifiersBuilders.Background.builder():

.setColor(
  ColorBuilders.argb(ContextCompat.getColor(this, R.color.colorPrimary))
)

Here ContextCompat.getColor is similar to how you fetch colors in Android view development. The ColorBuilders.argb method converts a color integer to a ColorProp that can be used by Wear OS. Build and run the app. You will see that the icons now have a background color.

Given that the watch is circular, it will be nice if the icon background too is circular in shape. You can do this by using the setCorner method as follows:

.setCorner(
  ModifiersBuilders.Corner.builder()
    .setRadius(DimensionBuilders.dp(16f))
    .build()
)

Here, you are using ModifiersBuilders.Corner.builder() to use set the corner radius to 16dp. To get a circular corner, the radius has be to half the width of the background. Build and run the app. The background looks great now.

But the icons look big compared to the background. Let’s change that by adding some padding. You can add padding by using the setPadding method on ModifiersBuilders.Modifiers.builder() as follows:

.setPadding(
  ModifiersBuilders.Padding.builder()
    .setAll(DimensionBuilders.dp(4f))
    .build()
  )

Here, you are setting padding of 4dp on all sides of the icons. Build and run the app. The icons look much better now.

Finally, the Tile could use some spacing between the elements to make it look more spread out. You can achieve this using the Space Element. Add the following code wherever you want to add space and change the dimensions accordingly:

LayoutElementBuilders.Spacer.builder().setWidth(DimensionBuilders.dp(16f))

Build and run the app. The space between the elements look great now. You have successfully tweaked the appearance of your Tile.