CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack-compose-tv
Mahdi Iranmanesh
Mahdi Iranmanesh

Reputation: 580

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.

Upvotes: 2

Views: 191

Answers (2)

Jan Itor
Jan Itor

Reputation: 4276

Try adding showSystemUi = true to the @Preview.

Edit:

I checked the value of Devices.TV_720p string and if you copy it directly to your Preview's device argument it shows errors: Unknown parameter: shape, unit. I guess that's why it didn't work. Setting device with preview configuration window results in device = "id:tv_720p" which worked for me. Full code:

@Preview(
    device = "id:tv_720p",
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    showSystemUi = true,
)

I have to emphasize the importance of showSystemUi param. Let's say we have the following preview:

@Preview(device = "spec:parent=tv_720p")
@Composable
private fun BoxPreview() {
    Box(modifier = Modifier.background(Color.Red).size(100.dp))
}

Which will look like this:

preview 1

Adding showSystemUi = true will not only add the system bars, but also "ensure the preview renders correctly as a TV device layout":

@Preview(device = "spec:parent=tv_720p", showSystemUi = true)
@Composable
private fun BoxPreview() {
    Box(modifier = Modifier.background(Color.Red).size(100.dp))
}

preview 2

Upvotes: 2

tyg
tyg

Reputation: 15724

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")

Upvotes: 3

Related Questions