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 great in a variety of screen sizes.
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.
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.
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.