Layout

TVs vary widely in size. On Apple TV, app layouts don’t automatically adapt to the size of the screen like they do in iOS. Instead, apps show the same exact interface on every display. Take extra care in designing your layout so that it looks amazing in a variety of screen sizes.

Television with 16 by 9 aspect ratio

Optimize assets for the big screen. Design your app’s user interface for a screen resolution of 1920 x 1080 pixels (1080p), which implies a widescreen aspect ratio of 16:9. All assets should be @1x resolution.

Television with safe zone border

Keep primary content away from the edges of the screen. Be mindful of the area spanning 60 pixels from the top and bottom of the screen, and 90 pixels from the sides. It’s difficult to see content that close to the edges, and unintended cropping can occur due to overscanning on older TVs.

Appropriate padding between focusable items

Include appropriate padding between focusable elements. If you’re using UIKit and the focus APIs, an element gets bigger when it comes into focus. Consider how elements look when they’re focused, and make sure they don’t unintentionally overlap important information.

Offscreen elements in grid layout

Allude to hidden content by partially displaying offscreen elements. In large collections where content doesn't fit on a single screen, hint at the additional content by showing portions of the offscreen items.

Use layout templates to build media-centered apps. If your app layout requires minimal customization and simply needs to present content beautifully, use a predesigned layout template. See Layout Templates.

Grids

Collections of content tend to work well in grid format on Apple TV. They showcase content well, are easy to browse at a distance, and are quick to navigate with the remote.

The following grid layouts provide an optimal viewing experience. Be sure to use appropriate spacing between unfocused rows and columns to prevent overlap when an item is brought into focus.

  • Three-Column Layout Grid

    Three-Column Grid

    Attribute Value
    Unfocused content width 548pt
    Horizontal spacing 48pt
    Minimum vertical spacing 100pt
  • Four-Column Layout Grid

    Four-Column Grid

    Attribute Value
    Unfocused content width 375pt
    Horizontal spacing 80pt
    Minimum vertical spacing 100pt
  • Five-Column Layout Grid

    Five-Column Grid

    Attribute Value
    Unfocused content width 308pt
    Horizontal spacing 50pt
    Minimum vertical spacing 100pt
  • Six-Column Layout Grid

    Six-Column Grid

    Attribute Value
    Unfocused content width 250pt
    Horizontal spacing 48pt
    Minimum vertical spacing 100pt
  • Seven-Column Layout Grid

    Seven-Column Grid

    Attribute Value
    Unfocused content width 204pt
    Horizontal spacing 52pt
    Minimum vertical spacing 100pt
  • Eight-Column Layout Grid

    Eight-Column Grid

    Attribute Value
    Unfocused content width 172pt
    Horizontal spacing 52pt
    Minimum vertical spacing 100pt
  • Nine-Column Layout Grid

    Nine-Column Grid

    Attribute Value
    Unfocused content width 148pt
    Horizontal spacing 51pt
    Minimum vertical spacing 100pt

If you use the collection view flow element provided by UIKit, the number of columns in a grid is automatically determined based on the width and spacing of your content. For developer guidance, see UICollectionViewFlowLayout.

Adhere to the screen’s safe zone. Inset primary content 60 pixels from the top and bottom of the screen, and 90 pixels from the sides. Only partially displayed offscreen content and elements that deliberately flow offscreen should appear outside this zone.

Include additional vertical spacing for titled rows. If a row has a title, provide appropriate spacing between the bottom of the previous unfocused row and the center of the title. Then, provide additional spacing between the bottom of the title and the top of the unfocused items in the row.

Use consistent spacing. When content isn't consistently spaced, it's harder to scan and no longer looks like a grid.

Size partially hidden content symmetrically. To help direct attention to the fully visible content, keep partially hidden offscreen content the same width on each side of the screen.

Layout Templates

Apple TV templates deliver beautiful and consistent layouts that make content the center of attention. These templates are based on JavaScript and the Apple TV markup language (TVML). They are dynamically loaded and populated with content when your app is used. Templates give you flexibility to create content-rich apps with predefined layouts that look good on the TV screen and are ideal for streaming media.

  • Alert Template on Apple TV

    Alert Template

    The alert template displays a message onscreen and asks for permission to perform an action, such as confirming a purchase or a destructive action, such as a deletion.

    See also Alerts.

  • Catalog Template on Apple TV

    Catalog Template

    Use the catalog template to display groupings of related items, such as genres of movies or TV shows. View the list of groupings on the left, and focus on one to see its items on the right.

  • Compilation Template on Apple TV

    Compilation Template

    The compilation template displays elements contained by an item, such as songs in an album or tracks in a playlist. It’s most commonly used to display audio-related content.

  • Descriptive Alert Template on Apple TV

    Descriptive Alert Template

    The descriptive alert template shows a lengthy message on the screen and may ask the user to perform an action, such as agreeing to terms and conditions or a licensing agreement.

    Show, don’t tell. Whenever possible, avoid descriptive alert text. See if you can present the same information in a more digestible way, such as with images.

    Keep it short and avoid scrolling. Reading lots of text on a distant screen strains the eyes and isn’t much fun. Seriously consider how much text your app needs to display.

    If the message is scrollable, position buttons side by side. With this placement, scrolling up and down scrolls the text, while scrolling left and right switches focus between buttons.

    See also Alerts.

  • Form Template on Apple TV

    Form Template

    The form template displays a keyboard and one or more text fields where information can be entered, such as a name and an email address.

    See also Text and Search.

  • List Template on Apple TV

    List Template

    The list template shows a list of items on the right, such as movies or TV shows. Focus on one to see its related content on the left, such as its artwork or description.

  • Loading Template on Apple TV

    Loading Template

    The loading template temporarily displays a progress indicator and some descriptive text while your content is retrieved from the server. It lets people know something is happening, so your app doesn’t appear frozen.

    Keep loading text concise and informative. If loading is quick, people may not have time to read longer text before it disappears, making them feel like they’ve missed something.

    See also Progress Indicators.

  • Main Menu Template on Apple TV

    Main Menu Template

    The main menu template displays a full-screen image with a menu along the bottom. It’s commonly used for the home screen of a movie, with menu options for playing the movie and accessing chapters or extras.

  • Menu Bar Template on Apple TV

    Menu Bar Template

    The menu bar template is designed for top-level navigation, as an entry page to your content. It includes a menu of items across the top. Focus on an item to display related content below the menu.

    Keep the menu bar clutter-free. Each additional item you display adds more choices and increases the complexity of your app.

    Keep menu items onscreen. When the menu bar is in focus, all of its items should be visible. In general, include seven or fewer items with short labels, to avoid crowding content and causing items to scroll off the screen.

    See also Tab Bars.

  • Parade Template on Apple TV

    Parade Template

    The parade template shows rotating previews for a focused grouping of content, such as movies or albums in a particular genre. A list of groupings is shown on the right. Focus on one grouping to display noninteractive rotating previews of its elements on the left.

  • Product Template on Apple TV

    Product Template

    The product template promotes movies, TV shows, or other products. It typically includes a product image, background, and descriptive information. A shelf below the product content displays related products, and the user can scroll down to bring up more information, like cast and crew listings, ratings, and reviews.

    If you customize the background, make sure it doesn’t clash with your other content. Consider image and text colors carefully before customizing the background. By default, the background displays a blurred copy of your product image, producing a complementary visual effect.

  • Product Bundle Template on Apple TV

    Product Bundle Template

    The product bundle template promotes a series of related TV shows, movies, and other products. It typically includes an image, background, and descriptive information. A shelf below the content displays the products contained by the bundle, such as the episodes of a TV season. The user can scroll down to bring up more information, such as cast and crew listings, ratings, and reviews.

  • Rating Template on Apple TV

    Rating Template

    The rating template lets people adjust the rating of a particular item, such as a movie or a song.

  • Search Template on Apple TV

    Search Template

    The search template lets people search your content and view results. It includes a search field, a keyboard, and a list of results.

  • Stack Template on Apple TV

    Stack Template

    The stack template displays groups of products (such as different genres of movies) in rows. Each group of products is displayed directly underneath the previous group.

Customize templates tastefully. Layout templates are highly customizable; you have control over the background, tinting, size, layout, and more. As you design your app, defer to content whenever possible, avoiding customizations that appear distracting, jarring, or obtrusive.

Understand a template’s purpose before using it. If your customizations make the underlying template unrecognizable, consider using a different template or building a fully custom interface.

For detailed information about integrating templates into your app, see Apple TV Markup Language Reference.