TV App: dasar-dasar pengembangan untuk Apple TV dan Android TV

Apa itu TV App

TV App — aplikasi yang dirancang untuk berjalan di platform TV pintar: Apple TV (tvOS) dan Android TV (Google TV). Perbedaan utama dengan aplikasi mobile — cara interaksi. Pengguna tidak menyentuh layar, melainkan mengendalikan antarmuka dengan remote. Semua elemen harus dapat diakses melalui navigasi terarah (D-pad): atas, bawah, kiri, kanan dan tombol pilih.

Karakteristik pengembangan TV App: resolusi layar — dari Full HD (1920x1080) hingga 4K (3840x2160) dengan kerapatan xhdpi (Android) atau @3x (Apple). Zona aman 5% dari tepi untuk kompensasi over-scan (sebagian gambar mungkin terpotong oleh TV) adalah wajib. Tidak ada layar sentuh — semua interaksi melalui remote atau gamepad. Fokus selalu menyorot elemen aktif. Konsumsi daya tidak dibatasi baterai, tetapi aplikasi harus menangani transisi ke mode tidur dengan benar. Menurut Statista (2026), pasar smart TV global melebihi 80% TV baru, dengan Apple TV dan Android TV mencakup lebih dari 250 juta perangkat.

Kategori aplikasi TV: layanan video (Netflix, YouTube, Apple TV+), musik (Spotify, Apple Music), game (Apple Arcade, Google Play Games), kebugaran (Apple Fitness+, Peloton), pendidikan, berita, cuaca, foto. Kategori paling populer — streaming video, yang menempati 70% dari total waktu penggunaan smart TV.

Apple TV (tvOS): arsitektur

tvOS — sistem operasi Apple untuk perangkat Apple TV, berbasis iOS. Rilis pertama — 2015 bersama Apple TV generasi ke-4. tvOS berbagi dengan iOS kernel XNU, framework Foundation, UIKit (dalam versi yang diadaptasi) dan mekanisme keamanan App Sandbox. Pengembangan dilakukan dalam Swift menggunakan SwiftUI atau UIKit.

Komponen utama tvOS:

• Focus Engine — sistem manajemen fokus yang secara otomatis menentukan elemen antarmuka aktif
• UIKit untuk tvOS — UIFocusGuide, UIFocusEnvironment, UIFocusAnimationCoordinator untuk manajemen fokus
• SwiftUI — framework deklaratif dengan FocusState dan pengubah focusable()
• TVMLKit — framework untuk antarmuka JavaScript/TVML (jarang digunakan dalam proyek modern)
• StoreKit — pembelian dalam aplikasi dan langganan
• AVFoundation — pemutaran konten video dan audio dengan dukungan HDR dan Dolby Atmos

Siklus hidup aplikasi tvOS mirip dengan iOS: notRunning, foregroundActive, foregroundInactive, background. Karakteristik: aplikasi tidak boleh meminta izin latar belakang tanpa kebutuhan — sistem dapat memaksa menghentikan proses latar belakang. Topologi navigasi dibangun di sekitar UISplitViewController dan UITabBarController dengan tab "Beranda", "Cari", "Perpustakaan", "Pengaturan".

Android TV: arsitektur

Android TV — versi Android yang dioptimalkan untuk TV dan set-top box, pertama kali diperkenalkan pada tahun 2014. Sejak 2020 ada Google TV — lapisan di atas Android TV dengan antarmuka baru, tetapi pengembangan aplikasi dilakukan pada Android TV SDK, kompatibel dengan Google TV. Bahasa utama — Kotlin, framework UI — Leanback Library (klasik) dan Jetpack Compose for TV (eksperimental).

Komponen kunci Android TV:

• Leanback Library — BrowseFragment, DetailsFragment, PlaybackOverlayFragment, SearchFragment, Presenter
• Android TV Input Framework — membuat keyboard, remote dan gamepad
• MediaSession — manajemen pemutaran konten media
• Recommendations — saluran rekomendasi di layar utama melalui NotificationManager
• Leanback Preferences — layar pengaturan bergaya TV

Perbedaan Android TV dengan Android mobile: aplikasi wajib mendeklarasikan kategori LEANBACK_LAUNCHER di manifes; lebar minimum tata letak — 1920dp; interaksi sentuh digantikan dengan navigasi D-pad; disarankan menggunakan fragmen Leanback; akselerasi perangkat keras wajib. Build mencakup APK/AAB dengan dukungan arsitektur ARM64 dan x86. Untuk proyek modern mulai 2025, direkomendasikan Jetpack Compose for TV dengan komponen TvLazyColumn, TvButton, TvCard.

Focus Engine dan manajemen fokus

Focus Engine — komponen kunci setiap platform TV, bertanggung jawab atas elemen antarmuka mana yang aktif. Di tvOS, Focus Engine tertanam di UIKit dan bekerja secara otomatis. Saat tombol D-pad ditekan, sistem menganalisis posisi semua elemen focusable, menghitung kandidat terdekat dalam arah tekanan dan memindahkan fokus ke sana dengan animasi halus (UIFocusAnimationCoordinator).

Aturan Focus Engine: sistem mempertimbangkan jarak antara elemen di sepanjang sumbu gerakan, persimpangan proyeksi elemen (elemen dianggap kandidat jika proyeksinya memotong proyeksi fokus saat ini), prioritas elemen dengan jarak yang sama (yang terdekat dalam garis lurus dipilih). Pengembang dapat memengaruhi fokus dengan UIFocusGuide — persegi panjang pemandu tak terlihat yang mengarahkan fokus ke elemen tertentu saat menekan ke arah tertentu.

Di Android TV fokus diimplementasikan melalui sistem fokus standar Android dengan atribut focusable dan nextFocus* (nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight). Animasi dikonfigurasi melalui StateListAnimator. Google merekomendasikan untuk mengatur focusable pada semua elemen interaktif dan menggunakan nextFocus untuk kontrol navigasi yang presisi. Animasi fokus sangat penting untuk UX — saat transisi fokus, harus terjadi animasi penskalaan halus (1.0 → 1.05–1.2) dengan durasi 150–250 ms.

Contoh kode: Swift dan Kotlin

Contoh aplikasi TV sederhana di SwiftUI untuk Apple TV dengan menampilkan daftar film dan dukungan Focus Engine.

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("Film").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 }
    }
}

Poin kunci: @FocusState — melacak fokus saat ini; .focusable() — membuat elemen dapat diakses untuk fokus; .scaleEffect() — animasi pembesaran saat fokus, penting untuk umpan balik visual di TV.

Contoh serupa untuk Android TV dengan Leanback Library di 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) {}
}

Poin kunci: BrowseSupportFragment — fragmen utama Leanback dengan judul; Presenter — abstraksi untuk membuat ViewHolder, mirip dengan RecyclerView.Adapter; ImageCardView — kartu standar dengan gambar, judul dan subjudul; isFocusable = true — atribut wajib untuk elemen TV.