Dengan senang hati kami mengumumkan pencapaian penting dalam menyatukan komputasi seluler dan desktop di Android: dukungan layar terhubung telah mencapai ketersediaan umum dengan rilis Android 16 QPR3.

Seperti yang ditunjukkan di Google I/O 2025, layar terhubung memungkinkan pengguna menghubungkan perangkat Android mereka ke monitor eksternal dan langsung mengakses lingkungan penyesuaian jendela desktop. Aplikasi dapat digunakan di jendela bentuk bebas atau yang dimaksimalkan dan pengguna dapat melakukan banyak tugas seperti yang mereka lakukan di OS desktop.

Google dan Samsung telah berkolaborasi untuk menghadirkan pengalaman jendela desktop yang lancar dan canggih ke perangkat di seluruh ekosistem Android yang menjalankan Android 16 saat terhubung ke layar eksternal. 
Fitur ini kini tersedia secara umum di perangkat yang didukung* bagi pengguna yang dapat menghubungkan ponsel Pixel dan Samsung yang didukung ke monitor eksternal, sehingga memungkinkan peluang baru untuk membangun pengalaman aplikasi yang lebih menarik dan lebih produktif yang beradaptasi di berbagai faktor bentuk.

Bagaimana cara kerjanya?

Saat ponsel atau perangkat foldable Android yang didukung terhubung ke layar eksternal, sesi desktop baru akan dimulai di layar yang terhubung.

Pengalaman di layar yang terhubung mirip dengan pengalaman di desktop, termasuk panel tugas yang menampilkan aplikasi aktif dan memungkinkan pengguna menyematkan aplikasi untuk akses cepat. Pengguna dapat menjalankan beberapa aplikasi secara berdampingan secara bersamaan di jendela yang dapat diubah ukurannya secara bebas pada layar yang terhubung.

Ponsel terhubung ke layar eksternal dengan sesi desktop di layar saat ponsel mempertahankan statusnya sendiri.

Saat perangkat yang mendukung jendela desktop (seperti tablet Samsung Galaxy Tab S11) terhubung ke layar eksternal, sesi desktop akan diperluas ke kedua layar, sehingga membuka ruang kerja yang lebih luas. Kedua layar tersebut kemudian berfungsi sebagai satu sistem berkelanjutan, sehingga jendela aplikasi, konten, dan kursor dapat bergerak bebas di antara kedua layar.

Tablet terhubung ke layar eksternal, memperluas sesi desktop di kedua layar.

Mengapa hal ini penting?

Dalam rilis Android 16 QPR3, kami menyelesaikan perilaku jendela, interaksi panel tugas, dan kompatibilitas input (mouse dan keyboard) yang menentukan pengalaman layar terhubung. Kami juga menyertakan penanganan kompatibilitas untuk menskalakan jendela dan menghindari mulai ulang aplikasi saat beralih tampilan.

Jika aplikasi Anda dibuat dengan prinsip desain adaptif, aplikasi akan otomatis memiliki tampilan dan nuansa desktop, dan pengguna akan merasa nyaman. Jika aplikasi dikunci ke mode potret atau mengasumsikan antarmuka khusus sentuh, sekaranglah saatnya untuk memodernisasi.

Secara khusus, perhatikan praktik terbaik utama berikut untuk pengalaman aplikasi yang optimal di layar yang terhubung:

• Jangan mengasumsikan objek Display konstan: Objek Display yang terkait dengan konteks aplikasi Anda dapat berubah saat jendela aplikasi dipindahkan ke layar eksternal atau jika konfigurasi layar berubah. Aplikasi Anda harus menangani peristiwa perubahan konfigurasi dengan baik dan mengkueri metrik tampilan secara dinamis, bukan melakukan caching.
• Perhatikan perubahan konfigurasi kepadatan: Layar eksternal dapat memiliki kepadatan piksel yang sangat berbeda dengan layar perangkat utama. Pastikan tata letak dan resource Anda beradaptasi dengan benar terhadap perubahan ini untuk mempertahankan kejelasan dan kegunaan UI. Gunakan piksel kepadatan mandiri (dp) untuk tata letak, sediakan resource khusus kepadatan, dan pastikan UI Anda diskalakan dengan tepat.
• Mendukung periferal eksternal dengan benar : Saat pengguna terhubung ke monitor eksternal, mereka sering kali membuat lingkungan yang lebih mirip desktop. Hal ini sering kali melibatkan penggunaan keyboard eksternal, mouse, trackpad, webcam, mikrofon, dan speaker. Meningkatkan dukungan untuk interaksi keyboard dan mouse.

Membangun masa depan desktop dengan alat modern

Kami menyediakan beberapa alat untuk membantu Anda membangun pengalaman desktop. Mari kita rangkum update terbaru pada library adaptif inti kami.

Class ukuran jendela baru: Besar dan Sangat besar

Update terbesar di Jetpack WindowManager 1.5.0 adalah penambahan dua class ukuran jendela lebar baru: Besar dan Sangat besar.

Class ukuran jendela adalah kumpulan titik henti sementara area pandang resmi kami yang tidak berubah yang membantu Anda mendesain dan mengembangkan tata letak adaptif. Dengan 1.5.0, kami memperluas panduan ini untuk layar yang melampaui ukuran tablet umum.

Berikut adalah titik henti sementara lebar baru:

• Besar: Untuk lebar antara 1200dp dan 1600dp
• Ekstra besar: Untuk lebar ≥1600dp

Berbagai class ukuran jendela berdasarkan lebar tampilan.

Di perangkat yang sangat besar, hanya menskalakan tata letak Diperluas tablet tidak selalu memberikan pengalaman pengguna terbaik. Misalnya, program email dapat menampilkan dua panel (kotak surat dan pesan) dengan nyaman dalam class ukuran jendela Diperluas. Namun, di monitor desktop Ekstra besar, program email dapat menampilkan tiga atau bahkan empat panel dengan elegan, mungkin kotak surat, daftar pesan, konten pesan lengkap, dan panel kalender/tugas, semuanya sekaligus.

Untuk menyertakan class ukuran jendela baru dalam project Anda, cukup panggil fungsi dari set WindowSizeClass.BREAKPOINTS_V2 daripada WindowSizeClass.BREAKPOINTS_V1:

  val currentWindowMetrics =
    WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(LocalContext.current)

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Kemudian, terapkan tata letak yang benar jika Anda yakin aplikasi Anda memiliki ruang setidaknya sebesar itu:

  if(sizeClass.isWidthAtLeastBreakpoint(
    WindowSizeClass.WIDTH_DP_LARGE_LOWER_BOUND)){
    ...
	// Window is at least 1200 dp wide.
}

Membangun tata letak adaptif dengan Jetpack Navigation 3

Navigation 3 adalah tambahan terbaru dalam koleksi Jetpack. Navigation 3, yang baru saja mencapai rilis stabil pertamanya, adalah library navigasi canggih yang dirancang untuk bekerja dengan Compose.

Navigation 3 juga merupakan alat yang sangat baik untuk membangun tata letak adaptif dengan memungkinkan beberapa tujuan ditampilkan secara bersamaan dan memungkinkan peralihan yang lancar di antara tata letak tersebut.

Sistem untuk mengelola alur UI aplikasi Anda ini didasarkan pada Adegan. Adegan adalah tata letak yang menampilkan satu atau beberapa tujuan secara bersamaan. SceneStrategy menentukan apakah Scene dapat dibuat. Dengan menggabungkan instance SceneStrategy, Anda dapat membuat dan menampilkan adegan yang berbeda untuk berbagai ukuran layar dan konfigurasi perangkat.

Untuk tata letak kanonis siap pakai, seperti list-detail dan panel pendukung, Anda dapat menggunakan Adegan dari library Adaptif Material 3 Compose (tersedia di versi 1.3 dan yang lebih baru).

Anda juga dapat dengan mudah membuat Adegan kustom sendiri dengan mengubah resep Adegan atau memulai dari awal. Misalnya, pertimbangkan Scene yang menampilkan tiga panel secara berdampingan:

  class ThreePaneScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val firstEntry: NavEntry<T>,
    val secondEntry: NavEntry<T>,
    val thirdEntry: NavEntry<T>
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(firstEntry, secondEntry, thirdEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(1f)) {
                firstEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                secondEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                thirdEntry.Content()
            }
        }
    }

Dalam skenario ini, Anda dapat menentukan SceneStrategy untuk menampilkan tiga panel jika lebar jendela cukup lebar dan entri dari stack kembali Anda telah menyatakan bahwa entri tersebut mendukung ditampilkan dalam adegan tiga panel.

  class ThreePaneSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {
        if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_LARGE_LOWER_BOUND)) {
            val lastThree = entries.takeLast(3)
            if (lastThree.size == 3 && lastThree.all { it.metadata.containsKey(MULTI_PANE_KEY) }) {
                val firstEntry = lastThree[0]
                val secondEntry = lastThree[1]
                val thirdEntry = lastThree[2]


                return ThreePaneScene(
                    key = Triple(firstEntry.contentKey, secondEntry.contentKey, thirdEntry.contentKey),
                    previousEntries = entries.dropLast(3),
                    firstEntry = firstEntry,
                    secondEntry = secondEntry,
                    thirdEntry = thirdEntry
                )
            }
        }
        return null
    }
}

Anda dapat menggunakan ThreePaneSceneStrategy dengan strategi lain saat membuat NavDisplay. Misalnya, kita juga dapat menambahkan TwoPaneStrategy untuk menampilkan dua panel secara berdampingan jika tidak ada cukup ruang untuk menampilkan tiga panel.

  val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

NavDisplay(..., 
  sceneStrategy = strategy,
  entryProvider = entryProvider { 
    entry<MyScreen>(metadata = mapOf(MULTI_PANE_KEY to true))) { ... }
    ... other entries...
  }
)

Jika tidak ada cukup ruang untuk menampilkan tiga atau dua panel—kedua strategi adegan kustom kita menampilkan null. Dalam hal ini, NavDisplay kembali menampilkan entri terakhir dalam tumpukan kembali di satu panel menggunakan SinglePaneScene. 

Dengan menggunakan adegan dan strategi, Anda dapat menambahkan tata letak satu, dua, dan tiga panel ke aplikasi Anda.

Aplikasi adaptif yang menampilkan navigasi tiga panel di layar lebar.

Lihat dokumentasi untuk mempelajari lebih lanjut cara membuat tata letak kustom menggunakan Scene di Navigation 3.

Tata letak adaptif mandiri

Jika Anda memerlukan tata letak mandiri, library Adaptif Material 3 Compose membantu Anda membuat UI adaptif seperti tata letak panel pendukung dan detail daftar yang menyesuaikan diri dengan konfigurasi jendela secara otomatis berdasarkan class ukuran jendela atau postur perangkat. 

Kabar baiknya, library ini sudah diupdate dengan titik henti sementara baru. Mulai dari versi 1.2, fungsi direktif scaffold panel default mendukung class ukuran jendela lebar Besar dan Sangat besar.

Anda hanya perlu memilih ikut serta dengan menyatakan dalam file build Gradle bahwa Anda ingin menggunakan titik henti sementara baru:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Memulai

Jelajahi fitur layar terhubung di rilis Android terbaru. Dapatkan Android 16 QPR3 di perangkat yang didukung, lalu hubungkan ke monitor eksternal untuk mulai menguji aplikasi Anda hari ini. 

Pelajari dokumentasi terbaru tentang dukungan multi-layar dan pengelolaan jendela untuk mempelajari lebih lanjut cara menerapkan praktik terbaik ini.

Masukan

Masukan Anda sangat penting saat kami terus menyempurnakan pengalaman desktop layar terhubung. Sampaikan pendapat Anda dan laporkan masalah melalui saluran masukan resmi kami.

Kami berkomitmen untuk menjadikan Android sebagai platform serbaguna yang beradaptasi dengan berbagai cara yang diinginkan pengguna untuk berinteraksi dengan aplikasi dan perangkat mereka. Peningkatan pada dukungan layar terhubung adalah langkah lain ke arah tersebut, dan kami yakin pengguna Anda akan menyukai pengalaman desktop yang akan Anda buat.

*Catatan: Pada saat artikel ini ditulis, layar yang terhubung didukung di seri Pixel 8, 9, 10 dan di berbagai perangkat Samsung, termasuk S26, Fold7, Flip7, dan Tab S11.