question

Jon R. Helms avatar image
Jon R. Helms asked

Screen size versus display size

I have an app that I am trying to get working on FireTV as well as phones and tablets and the first thing I noticed is that the content spills off the screen in all 4 directions, but this does not happen with my app on phones or tablets, nor does it happen with other devices (such as a Roku) hooked to the same TV. The stuff that came on FireTV all looks fine, so I'm sure there is some simple adjustment I have to make, maybe just adding some margin or padding to the outermost container if it is being used on a FireTV. I tried modifying a sample and saw stuff starting to go off the screen then too, so I have no clue what the right way to fix it is. Anyone know what the "right way" is to take care of this? If it is padding then that's fine, I just want to try to do this stuff correctly to lessen headaches down the road.
fire tv
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Sujoy@Amazon avatar image
Sujoy@Amazon answered
Hi Jon, Two things. 1. Can you please look at the sample app provided with Amazon Fire TV SDK Add-on. https://developer.amazon.com/public/solutions/devices/fire-tv/docs/setting-up-your-development-environment#Installing%20the%20Amazon%20Fire%20TV%20SDK%20Add-on The samples folder contains UIWidgetsSample that demonstrates the UI best practices specific to Fire TV. Please check. 2. If the sample does not help to sort out your problem then please provide us the sample app that can demonstrate the issue you have been facing (along with the source code) for our further investigation. Please zip the sample project, put it in a shared directory and share the link. Thanks.
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Jon R. Helms avatar image
Jon R. Helms answered
I did look at the sample but as soon as I tried to change it I started to see stuff fall off the screen and I haven't figured out what the key is yet. I put together a basic sample that demonstrates the margin problem I am having and the zip has a photo of my TV with the app on it so you can see what I am talking about. The first graphic has part of the top and side cut-off when it runs on Fire TV, but on phones and tablets it shows the whole thing. This is the same sample I used for the click issue. http://99.63.38.138:83/android.zip
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Sujoy@Amazon avatar image
Sujoy@Amazon answered
The zip is not accessible. Is that public IP? Can you put it in drop box or some good sharing site?
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Jon R. Helms avatar image
Jon R. Helms answered
The file is fine and accessible, my guess is you are behind a firewall that blocks non-standard ports. I'll see if I can find another spot to put it.
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Jon R. Helms avatar image
Jon R. Helms answered
Great news, you don't need my project as one of the samples does it too. UIWidgetsSample project Carousel Samples Carousel Example The left side of the "0" box is cutoff
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Jon R. Helms avatar image
Jon R. Helms answered
Solved the problem myself. Under Settings -> System -> Display -> Calibrate Display I had to reduce it by 3%.
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Laura@Amazon avatar image
Laura@Amazon answered
For future reference, this issue is called "overscan." Different televisions may provide different amounts of overscan, where more or less of the display gets cut off on the edges. As you discovered, there is an option in the Fire TV settings to adjust the overscan. There may also be an option in your TV menus ("zoom" or "fit" or just "overscan," everyone has a different name for it). The problem of differing amounts of overscan in different TVs is why we suggest in the UX guidelines for Fire TV that you avoid placing any of your app content within 5% of any edge of the screen. That will enable your app to avoid looking like the edges are cut off. See https://developer.amazon.com/appsandservices/solutions/devices/fire-tv/docs/design-and-user-experience-guidelines for more.
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.