Cómo desarrollar tarjetas para diferentes tamaños de pantalla

Las tarjetas de tu app deben funcionar bien en dispositivos Wear OS de todos los tamaños, aprovechar el espacio adicional cuando esté disponible y verse bien en pantallas más pequeñas. En esta guía, se proporcionan recomendaciones para lograr esta experiencia del usuario.

Para obtener más información sobre los principios de diseño de los diseños adaptables, consulta la guía de diseño.

Proporciona experiencias diferenciadas a través de puntos de interrupción

Los diseños de la biblioteca ProtoLayout Material son responsivos y se encargan de la correcta colocación y visibilidad de los elementos. Sin embargo, en algunos casos, es posible que desees variar la cantidad de elementos visibles para obtener los mejores resultados. Por ejemplo, es posible que desees 3 botones en una pantalla más pequeña y 5 en una más grande.

Para implementar este tipo de experiencia diferenciada, usa puntos de interrupción de tamaño de pantalla. Para mostrar un diseño diferente cuando el tamaño de la pantalla supera los 225 dp, haz lo siguiente:

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

La orientación de diseño ilustra oportunidades adicionales.

Cómo probar tarjetas en diferentes tamaños de pantalla con Vistas previas

Es importante que pruebes tus diseños en diferentes tamaños de pantalla. Usa las anotaciones de vista previa de tarjetas junto con las clases TilePreviewHelper y TilePreviewData:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

Esto te permite obtener una vista previa de los diseños de la tarjeta directamente en Android Studio.

Para ver un ejemplo completo, consulta la muestra de tarjetas de temporizador en GitHub.