tvOS: What you need to know before starting the first project

Tomas Parizek
3 min readJul 30, 2017

--

I’ve just finished my first tvOS project (video streaming app, something like Netflix). I worked on this project last two months and through those two months I learned a lot about tvOS platform. I’ll try to summarize in this article main limitations and benefits of tvOS, so you’ll be more prepared for your first project than I was.

No touch, gestures, … Only focus

This is probably the most important difference between iOS and tvOS. There are no gesture recognizers, you can’t touch UI components. This is obvious because most TVs doesn’t have a touch screen. It is extremely important to design your app with this in mind.

Instead of gestures in tvOS, there is something called focus. It took me some time to get familiar with it. You can read more about it at apple’s Human Interface Guidelines.

Image 01: Focus example (source: Apple)

tvOS components

Image 02: TabBar example (source: Apple)

iOS and tvOS components are similar, but not the same. Some iOS components are on tvOS a bit different, some are not available at all. For instance image 02 shows example of UITabBar, it’s completely different from iOS one. (only UI, it works the same way) Another one is UITextField, which in tvOS has a detail view. (image 03).

Image 03: UITextField detail

TextField are terrible

In the image 03, you can see a detail screen of UITextField. The experience of typing email and password on this keyboard is absolutely horrible. Try to use them as little as possible. For example, instead of doing log in by asking user to type email and password, you can display some code on screen, user would then go to his/her computer or smartphone and enter the code. This is how Facebook’s LoginKit SDK works and in my opinion it’s a lot better UX than those email and password textfields.

Auto Layout

It’s there and it works the same way as in iOS, don’t worry. :)

WebView

Apple TV doesn’t have Safari, therefor UIWebView is not available. I know that I’ve already talk about lack of some iOS UI components on tvOS, but I think it is extra important to talk about this one, because there is no way of cheating it. You can’t hack this somehow, UIWebView is just not available. Apple probably decided not to include Safari and UIWebView on tvOS, because of the fact, that it would be hard to control and navigate it.

AppIcon

Image 04: tvOS AppIcon (Source: Apple)

AppIcon is a bit more complicated on tvOS. First thing is that AppIcon has to have more than one layer. (two or three) Each layer has to be exported as a speared PNG file. The second thing is top shelf image, which is a wide image that is displayed above your app if it is in top row of home screen and it has focus. (image 05) This area above your app can be also dynamic, all of this (AppIcon, top shelf image — static or dynamic) is described in apple’s Human Interface Guidelines.

Image 05: Top shelf image (Source: Apple)

The end

That’s it from me today, I hope you learned something today and that it will help you one day. If you have now a minute or two and you are in the mood for it, I would like to ask you to write me a feedback for this article, so I can make even better articles for you in the future. Thank you for reading, Tomas.

--

--