Hello, I’m new to TV development (Compose-TV). I have a design that was made for 1920×1080px at xxhd...

# compose

[Ameer Amjed]

Hello,
I’m new to TV development (Compose-TV). I have a design that was made for 1920×1080px at xxhdpi (420dpi), but the current density in the emulator is 320dpi. I see a big difference.I need to use the design system with all spacing and padding values as specified in the design.
How can I make the app responsive?

[Ameer Amjed]

Can I calculate the value like this?
px_design = 90
designDpi = 420
targetDpi = 320

px_target = 90 × (320 / 420) ≈ 68.57 px

[Ameer Amjed]

Another recommended solution?

[Stylianos Gakis]

Two questions:
Which part of the screeshots do you find odd here?
Are you not using dp in your code? Why do you want to calculate the pixels?

[Ameer Amjed]

this

[Stylianos Gakis]

Yeah, what about it is odd?

[Ameer Amjed]

When I use the same values from the design, I already use dp/sp for the values.

[Ameer Amjed]

I use emulator for tv

[Ameer Amjed]

Design

[Stylianos Gakis]

I still don't see the problem. One screen has a ton more space than the other therefore it fits more space than the other, no?

[Ameer Amjed]

Both devices have the same screen size but different densities.

[Sergey Y.]

That sounds to me like you’re treating the pixel values from the design as DP. But as you mentioned, the design might have been created for a specific density. In that case, you’ll likely need to convert those design pixels into baseline DP values. I’m not sure what the baseline density is for TV, but on Android mobile we typically use a standard formula to convert design-specific pixels into density-independent pixels:
px = dp * (dpi / 160)
dp = px * 160 / dpi

[Sergey Y.]

https://developer.android.com/training/multiscreen/screendensities#dips-pels

[Ameer Amjed]

Maybe I’ll get another issue. For example, if I use this formula `dp = px * 160 / dpi`:
• for 320dpi → 90 * 160 / 320 = 45 (nice),
• but for 420dpi → 90 * 160 / 420 = 32.
Here it doesn’t match the design, because the design was provided for 420dp

[Sergey Y.]

the design can't be Pixel Perfect

[Sergey Y.]

and 160dp is a baseline for mobile devices, for tv it might be different, idk

[Ameer Amjed]

Ok, but this means that the higher the DPI, the smaller the content appears, which I don’t think is correct.

[Sergey Y.]

The DPI is set by the device manufacturer and must reference the actual display pixel density of the device.
A larger display with the same resolution results in a lower DPI, while a smaller display with the same resolution has a higher DPI. Pixel density is designed to represent how tightly pixels are packed on the screen, ensuring consistent sizing of UI elements across different devices

[Sergey Y.]

Please refer to the documentation page I shared.