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
Layouts from the ProtoLayout Material library are already responsive and take care of correct element placement and visibility. However, in some cases you might want to vary the number of visible elements for best results. For example, you might want 3 buttons on a smaller display, and 5 on a larger display.
To implement this sort of differentiated experience, use screen size breakpoints. To show 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:
![Additional buttons on larger displays](https://developer.android.com/static/images/wear/tile-previews.png?authuser=9)
Small and large displays showing the effect of the breakpoint
For a full example, see the media tiles sample on GitHub.