Android UI onto TV – Looks Terrible

hoping someone can guide me here

I’ve got an app that looks nice on the phone, but we need to be able to connect and mirror the phone to a TV. I have the adapters and cables and I can hook the phone to the TV and all of that part works.

but when the app launches on the TV – the UI looks TERRIBLE

the images are stretched or missing
the text is stretched too tall

the TV is 1920 x 1080 – just like the phone – but obviously less dense

And I can’t figure out what I need to do to get this UI to look correct on the TV

Can anyone point me in the right direction?

Thanks!!

Answer

Have you created a layout variation for TVs?

  1. Click on the “Orientation for Preview” button in the layout editor (number 2 in this bar)

  2. Click “Create Other…”

  3. Select “UI Mode” as a qualifier, then select “Television” in the dropdown

  4. Design your layout. You may need to change the “Device for Preview” (number 3 in the bar) to a TV

Your layout folder will look like this, and your app should automatically use the television layout when it’s on the TV