androidandroid-jetpack-composeandroid-jetpack-compose-tv

Why is my Jetpack Compose TV preview showing a mobile layout instead of TV_720p in Android Studio?

I'm trying to preview my Jetpack Compose layout on a TV device configuration (TV_720p), but despite specifying TV_720p as the device, the preview in Android Studio still looks like a mobile phone. Here’s my setup:

@Preview(device = Devices.TV_720p, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
internal fun VitrineContentViewEmptyStatePreview() {
    ComposeTvTheme {
     /*My Composable*/
    }
}

In the preview pane on the right, the layout doesn't appear in a TV format but resembles a mobile view instead:

this is the how i see the preview

Does anyone know what might be causing this, or if there’s a way to ensure the preview renders correctly as a TV device layout? Any insights would be greatly appreciated!

i also tried TV_1080p but it doesn't make any difference.

Solution

  • The Devices constants are a bit whacky, but you can always describe the device's dimensions yourself:

    @Preview(
    name = "TV 720p",
    device = "spec:width=1280px,height=720px",
    uiMode = Configuration.UI_MODE_NIGHT_YES,
)

    Which results in this preview:

    As Jan Itor suggested in their answer, you can also use device ids, which is more alike what you started with:

    @Preview(device = "id:tv_720p")
@Preview(device = "id:tv_1080p")
@Preview(device = "id:tv_4k")