TV App: Development Basics for Apple TV and Android TV

What is a TV App

TV App — an application designed to run on smart TV platforms: Apple TV (tvOS) and Android TV (Google TV). The key difference from a mobile app is the interaction method. The user does not touch the screen but controls the interface using a remote control. All elements must be accessible through directional navigation (D-pad): up, down, left, right, and the select button.

TV App development features: screen resolution ranges from Full HD (1920x1080) to 4K (3840x2160) with xhdpi density (Android) or @3x (Apple). A 5% safe zone from the edges is mandatory to compensate for over-scan (part of the image may be cropped by the TV). There is no touch screen — all interactions are via remote or gamepad. The focus always highlights the active element. Power consumption is not limited by battery, but the app must properly handle transitioning to sleep mode. According to Statista (2026), the global smart TV market exceeds 80% of new TVs, with Apple TV and Android TV accounting for over 250 million devices.

Categories of TV applications: video services (Netflix, YouTube, Apple TV+), music (Spotify, Apple Music), games (Apple Arcade, Google Play Games), fitness (Apple Fitness+, Peloton), education, news, weather, photos. The most popular category is video streaming, which accounts for 70% of all smart TV usage time.

Apple TV (tvOS): Architecture

tvOS is Apple's operating system for the Apple TV set-top box, based on iOS. The first release was in 2015 alongside the 4th generation Apple TV. tvOS shares the XNU kernel, Foundation frameworks, UIKit (in an adapted version), and the App Sandbox security mechanism with iOS. Development is done in Swift using SwiftUI or UIKit.

Key components of tvOS:

• Focus Engine — a focus management system that automatically determines the active interface element
• UIKit for tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator for focus management
• SwiftUI — a declarative framework with FocusState and the focusable() modifier
• TVMLKit — a framework for JavaScript/TVML interfaces (rarely used in modern projects)
• StoreKit — in-app purchases and subscriptions
• AVFoundation — video and audio content playback with HDR and Dolby Atmos support

The lifecycle of a tvOS app is similar to iOS: notRunning, foregroundActive, foregroundInactive, background. A special note: the app should not request background permissions unnecessarily — the system may forcefully terminate a background process. The navigation topology is built around UISplitViewController and UITabBarController with tabs like "Home", "Search", "Library", "Settings".

Android TV: Architecture

Android TV is a version of Android optimized for TVs and set-top boxes, first introduced in 2014. Since 2020, Google TV has existed as an overlay on Android TV with a new interface, but app development is done using the Android TV SDK, compatible with Google TV. The primary language is Kotlin, UI frameworks are Leanback Library (classic) and Jetpack Compose for TV (experimental).

Key components of Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — creating keyboards, remotes, and gamepads
• MediaSession — media content playback management
• Recommendations — recommendation channel on the home screen via NotificationManager
• Leanback Preferences — TV-style settings screens

Differences between Android TV and mobile Android: the app must declare the LEANBACK_LAUNCHER category in the manifest; minimum layout width is 1920dp; touch interaction is replaced by D-pad navigation; using Leanback fragments is recommended; hardware acceleration is mandatory. The build includes APK/AAB with support for ARM64 and x86 architectures. For modern projects starting in 2025, Jetpack Compose for TV with components like TvLazyColumn, TvButton, TvCard is recommended.

Focus Engine and Focus Management

Focus Engine is a key component of any TV platform, responsible for determining which interface element is active. On tvOS, the Focus Engine is built into UIKit and works automatically. When a D-pad button is pressed, the system analyzes the position of all focusable elements, calculates the nearest candidate in the direction of the press, and smoothly moves the focus to it with animation (UIFocusAnimationCoordinator).

Focus Engine rules: the system considers the distance between elements along the movement axis, the intersection of element projections (an element is considered a candidate if its projection intersects the projection of the current focus), and priority for elements at the same distance (the closest one in a straight line is selected). The developer can influence focus using UIFocusGuide — an invisible guiding rectangle that redirects focus to a specific element when pressing in a given direction.

On Android TV, focus is implemented through the standard Android focus system with focusable and nextFocus* attributes (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). Animation is configured through StateListAnimator. Google recommends setting focusable on all interactive elements and using nextFocus for precise navigation control. Focus animation is critical for UX — when focus changes, a smooth scaling animation (1.0 → 1.05–1.2) should occur with a duration of 150–250 ms.

Code Examples: Swift and Kotlin

An example of a simple TV app in SwiftUI for Apple TV displaying a list of movies with Focus Engine support.

import SwiftUI

struct Movie: Identifiable {
    let id = UUID()
    let title: String
    let subtitle: String
}

struct ContentView: View {
    @FocusState private var focusedMovie: UUID?

    let movies: [Movie] = [
        Movie(title: "Inception", subtitle: "2010, Sci-Fi"),
        Movie(title: "Interstellar", subtitle: "2014, Sci-Fi"),
        Movie(title: "The Matrix", subtitle: "1999, Action"),
        Movie(title: "Blade Runner 2049", subtitle: "2017, Sci-Fi"),
    ]

    var body: some View {
        VStack(alignment: .leading, spacing: 40) {
            Text("Movies").font(.title).padding(.leading, 60)
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 40) {
                    ForEach(movies) { movie in
                        VStack {
                            Image(systemName: "film.fill")
                                .resizable()
                                .frame(width: 200, height: 300)
                                .cornerRadius(12)
                                .focusable()
                                .focused($focusedMovie, equals: movie.id)
                            Text(movie.title).font(.headline)
                            Text(movie.subtitle).font(.subheadline).foregroundColor(.secondary)
                        }
                        .scaleEffect(focusedMovie == movie.id ? 1.15 : 1.0)
                        .animation(.easeInOut(duration: 0.2), value: focusedMovie)
                    }
                }
                .padding(.horizontal, 60)
            }
        }
        .onAppear { focusedMovie = movies.first?.id }
    }
}

Key points: @FocusState — tracking the current focus; .focusable() — makes an element focusable; .scaleEffect() — a zoom animation on focus, important for visual feedback on TV.

A similar example for Android TV with Leanback Library in Kotlin:

// MainActivity.kt
class MainActivity : FragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

class MainFragment : BrowseSupportFragment() {
    private val moviePresenter = MoviePresenter()

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        title = getString(R.string.app_name)
        headersState = HEADERS_ENABLED
        setupAdapter()
    }

    private fun setupAdapter() {
        val rowsAdapter = ArrayObjectAdapter(ListRowPresenter())
        val listRowAdapter = ArrayObjectAdapter(moviePresenter)
        listRowAdapter.add(Movie("Inception", "2010", R.drawable.poster_1))
        listRowAdapter.add(Movie("Interstellar", "2014", R.drawable.poster_2))
        rowsAdapter.add(ListRow(HeaderItem(0, "Movies"), listRowAdapter))
        adapter = rowsAdapter
    }
}

data class Movie(val title: String, val subtitle: String, val imageResId: Int)

class MoviePresenter : Presenter() {
    override fun onCreateViewHolder(parent: ViewGroup): ViewHolder {
        val cardView = ImageCardView(parent.context).apply {
            isFocusable = true
            setMainImageDimensions(200, 300)
        }
        return ViewHolder(cardView)
    }

    override fun onBindViewHolder(viewHolder: ViewHolder, item: Any) {
        val movie = item as Movie
        (viewHolder.view as ImageCardView).apply {
            titleText = movie.title
            contentText = movie.subtitle
        }
    }

    override fun onUnbindViewHolder(viewHolder: ViewHolder) {}
}

Key points: BrowseSupportFragment — the main Leanback fragment with headers; Presenter — an abstraction for creating ViewHolder, similar to RecyclerView.Adapter; ImageCardView — a standard card with an image, title, and subtitle; isFocusable = true — a mandatory attribute for TV elements.