Introduction to tvOS

Recently, Apple announced the AppleTV 4K, an improved version of the AppleTV launched in 2015, which brought us a new platform to develop for in tvOS. With the touch-enabled Siri remote, we have a new way to interact with apps on the big screen which is different, but not entirely unfamiliar. Having a device like this in the living room is a great way to bring people together and offers a unique stage for your apps.

From a developer’s perspective, tvOS presents many similarities to iOS (which it is built on), such as using UIKit and many other common iOS frameworks. This, alongside sharing common code with Xamarin, means that creating incredible apps for the big screen has never been easier!

tvOS Background

As developers, we may already be used to working with frameworks such as UIKit to create user interfaces for mobile devices. However, there’s one key difference in tvOS that needs to be considered: the user does not directly touch your interface. This key departure from most iOS counterparts means we should be careful and create easy to use interfaces that work on a large traditional TV screen. The main method of interaction is the touchpad on the AppleTV Remote, so the placement of your controls should be logical and have some kind of consistency, rather than just being placed randomly all over the screen. It should be simple to navigate by swiping on the Remote in the appropriate direction to get to the next control. To learn more about the Focus Engine built in to tvOS, we have a complete set of tvOS documentation.

We generally use storyboards when creating user interfaces for tvOS, the same as we would on iOS. Using storyboards is a great way to create interfaces quickly and easily, and the whole process is similar to creating an iOS app. Apps can also be created using TVML (markup language which is downloaded from a server at runtime), but this will be covered in a future blog post.

Getting Started with tvOS

Let’s get started with a simple tvOS project using Xamarin. For this tutorial, make sure you’re fully up to date with Visual Studio for Mac and Xcode:

File -> New Solution -> tvOS -> Single View App

Set the app name and identifier to anything you want (in this example it’s SimpleQuiz) and the Target to “tvOS 11.0”.

We can run this single view app in the tvOS simulator right away. You’ll notice that where you usually see the iPhone simulators, there are now simulators for the AppleTV 4K and the original AppleTV. For the sake of app development, the differences between the two models are fairly minimal, with the AppleTV 4K being slightly more powerful and able to display 4K content. The sizing of the interface remains consistent across all models.

You’ll be presented with a blank view when running the app, which means the basic single view app was built and deployed successfully! To navigate in the AppleTV simulator, you can use a simulated remote by going to Hardware -> Show AppleTV Remote, or you can use the arrow keys and the “enter” key on your keyboard.

A blank app is great to see that we can deploy successfully, but ultimately not very useful, so let’s create an interface. Building the user interface is simple thanks to storyboards and the Xamarin designer built into Visual Studio. When opening Main.storyboard, you’ll be presented with the blank view seen at runtime. The way we use the tvOS designer is exactly the same as the iOS designer; simply drag and drop the controls from the toolbox. Note that you don’t need to worry about size classes or the UI supporting rotation, as we’re not working with mobile devices.

Your First tvOS App

Let’s create a simple quiz app, which will allow us to explore creating a basic app with standard UIKit controls and add controls to the storyboard. Start by creating the interface below, with a label and four buttons. Give each button a sensible name (in this case Answer1, Answer2, etc.).

We now need to add some functionality to our app. Our interface has four buttons with a choice of four answers, but only one is correct. Our simple quiz app will display an alert when the user chooses an answer and show them whether their choice was correct or not.

Start with basic code for displaying whether the user chose the correct answer or not. Add the following method to ViewControllers.cs:

private void Answer(bool Correct)
{
    // Same UIAlertController we use in iOS!
    UIAlertController AnswerAlertController;
    if ( Correct )
    {
        AnswerAlertController = UIAlertController.Create("Correct Answer!", "You win!", UIAlertControllerStyle.Alert);
    }
    else
    {
        AnswerAlertController = UIAlertController.Create("Wrong Answer!", "Please try again", UIAlertControllerStyle.Alert);
    }
    AnswerAlertController.AddAction(UIAlertAction.Create("Ok", UIAlertActionStyle.Default, null));
    PresentViewController(AnswerAlertController, true, null);
}

Notice that we're using UIAlertController in exactly the same way as we would on iOS. This is what makes tvOS easy to work with, even if you've never created an app for it before. The system handles the presentation for us, and we don't need to concern ourselves with any of the specifics.

Now we need to add some code behind our buttons. To do this, we can simply double click on a button to automatically add a method for the event from the view controller code. Do this for all four buttons and within the created method, calling the WrongAnswer method we just set up.

For this question, the correct answer is 2017, so for buttons 1, 2, and 4 we need to call

Answer(false);

And for button 3:

Answer(true);


Now run the app and use the remote (or keyboard and enter key) to interact with the buttons. As you can see, the system automatically handles the focusing of each control in terms of moving around with the remote—simply swipe in the direction you wish to go!

Summary

We've just created a very simple tvOS app to provide an orientation to the tvOS platform. As discussed, many of the controls and features have been directly brought over from iOS, making creating TV Apps simple and easy. Bringing your apps to the big screen has never been easier with Xamarin!

Stay tuned for more tvOS blog posts in the future, where we'll discuss more advanced topics, such as gesture detection with the Remote, serving TVML apps and video streaming with Azure, and go into further details about the fundamentals of the platform.

To find the code for this app we created in this blog post, please head over to GitHub. Join the discussion on the forums.