Desenvolver blocos para diferentes tamanhos de tela

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:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

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:

Para conferir um exemplo completo, consulte o exemplo de blocos de mídia (link em inglês) no GitHub.