Develop tiles for different screen sizes

Your app's tiles should work well on Wear OS devices of all sizes, taking advantage of additional space where available, and still look great on smaller screens too. This guide provides recommendations for achieving this user experience.

To learn more about the design principles for adaptive layouts, read the design guidance.

Build responsive layouts using ProtoLayout

The ProtoLayout Material library provides predefined layouts to help you build your tiles. These layouts are already designed to adapt to the screen size.

Refer to the Figma design layouts, which demonstrate the canonical layouts available and how to build your design using them:

We recommend PrimaryLayout or EdgeContentLayout as top-level layouts for most use cases. Set the responsive behavior using setResponsiveContentInsetEnabled, for example:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

Provide differentiated experiences through breakpoints

With larger displays, you can introduce additional content and features. To implement this sort of differentiated experience, use screen size breakpoints, showing a different layout when the screen size exceeds 225 dp:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

The design guidance illustrates additional opportunities.

Test tiles on different screen sizes using Previews

It is important to test your layouts on different screen sizes. Use the Tile Preview annotations, along with the TilePreviewHelper and TilePreviewData classes:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

This lets you preview your Tile layouts directly within Android Studio. The previous breakpoints example illustrates how additional buttons are shown when the screen space allows, when previewed:

Small and large displays showing the effect of the breakpoint

For a full example, see the media tiles sample on GitHub.