Desenvolver blocos para diferentes tamanhos de tela

Os Blocos do app precisam funcionar bem em dispositivos Wear OS de todos os tamanhos, aproveitando o espaço extra disponível e ainda tendo uma ótima aparência em telas menores. Este guia oferece 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 oferece 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, que demonstram os layouts canônicos disponíveis e como criar seu design usando-os:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

Recomendamos PrimaryLayout ou EdgeContentLayout como layouts de nível superior para a maioria dos casos de uso. Defina o comportamento responsivo usando setResponsiveContentInsetEnabled, por exemplo:

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

Proporcione experiências diferenciadas usando pontos de interrupção

Os layouts da biblioteca ProtoLayout Material já são responsivos e cuidam da colocação e visibilidade corretas dos elementos. No entanto, em alguns casos, variar o número de elementos visíveis pode gerar melhores resultados. Por exemplo, você pode querer três botões em uma tela menor e cinco em uma tela maior.

Para implementar esse tipo de experiência diferenciada, use pontos de interrupção do tamanho da tela. Para mostrar um layout diferente quando o tamanho da tela ultrapassa 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 as visualizações

É importante testar seus layouts em diferentes tamanhos de tela. Use as anotações de 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()
    }
)

Assim, você pode visualizar os layouts de blocos diretamente no Android Studio. O exemplo de pontos de interrupção anterior ilustra como outros botões são mostrados quando o espaço da tela permite, na visualização:

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