Os blocos do seu app precisam funcionar bem em dispositivos Wear OS de todos os tamanhos, aproveitando o espaço extra, quando disponível, e ainda ter uma ótima aparência em telas menores. Este guia fornece recomendações para alcançar essa experiência do usuário.
Para saber mais sobre os princípios de design para layouts adaptáveis, leia as orientações de design.
Criar layouts responsivos usando o ProtoLayout
A biblioteca ProtoLayout Material fornece layouts predefinidos para ajudar você a criar seus blocos. Esses layouts já foram projetados para se adaptar ao tamanho da tela.
Consulte os layouts de design do Figma (em inglês), que demonstram os layouts canônicos disponíveis e como criar seu design usando eles:
Recomendamos PrimaryLayout
ou EdgeContentLayout
como layouts de nível superior
na maioria dos casos de uso. Defina o comportamento responsivo usando
setResponsiveContentInsetEnabled
, por exemplo:
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
Ofereça experiências diferenciadas usando pontos de interrupção
Em telas maiores, você pode incluir mais conteúdos e recursos. Para implementar esse tipo de experiência diferenciada, use pontos de interrupção de tamanho de tela, mostrando um layout diferente quando o tamanho da tela exceder 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()
As orientações de design ilustram outras oportunidades.
Testar blocos em diferentes tamanhos de tela usando visualizações
É importante testar seus layouts em diferentes tamanhos de tela. Use as
anotações da visualização do Bloco com as classes TilePreviewHelper
e
TilePreviewData
:
@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
onTileRequest = { request ->
TilePreviewHelper.singleTimelineEntryTileBuilder(
buildLayout()
).build()
}
)
Isso permite visualizar os layouts de blocos diretamente no Android Studio. O exemplo anterior de pontos de interrupção ilustra como botões extras são mostrados quando o espaço na tela permite:
Telas pequenas e grandes mostrando o efeito do ponto de interrupção
Para conferir um exemplo completo, consulte o exemplo de blocos de mídia (link em inglês) no GitHub.