Dengan senang hati kami mengumumkan pencapaian besar 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 dalam jendela bentuk bebas atau dimaksimalkan dan pengguna dapat melakukan multitasking seperti yang mereka lakukan di OS desktop.

Google dan Samsung telah berkolaborasi untuk menghadirkan pengalaman penyesuaian 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* untuk 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 dapat 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 terhubung.

Pengalaman di layar terhubung mirip dengan pengalaman di desktop, termasuk taskbar 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 di layar terhubung.

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

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

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

Mengapa hal tersebut penting?

Dalam rilis Android 16 QPR3, kami menyelesaikan perilaku penyesuaian jendela, interaksi taskbar, dan kompatibilitas input (mouse dan keyboard) yang menentukan pengalaman layar terhubung. Kami juga menyertakan perlakuan kompatibilitas untuk menskalakan jendela dan menghindari aplikasi dimulai ulang saat beralih layar.

Jika aplikasi Anda dibuat dengan prinsip desain adaptif, aplikasi tersebut 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 memodernisasinya.

Secara khusus, perhatikan praktik terbaik utama berikut untuk pengalaman aplikasi yang optimal di layar 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 layar 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, mouse, trackpad, webcam, mikrofon, dan speaker eksternal. Tingkatkan 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 untuk 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 dan tak berubah yang membantu Anda mendesain dan mengembangkan tata letak adaptif. Dengan 1.5.0, kami memperluas panduan ini untuk layar yang lebih besar dari ukuran tablet umum.

Berikut adalah titik henti sementara lebar baru:

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

Berbagai class ukuran jendela berdasarkan lebar layar.

Di layar yang sangat besar, menskalakan tata letak Diperluas tablet saja tidak selalu memberikan pengalaman pengguna terbaik. Misalnya, klien email mungkin dapat menampilkan dua panel (kotak masuk dan pesan) dengan nyaman di class ukuran jendela Diperluas. Namun, di monitor desktop Sangat besar, klien email dapat menampilkan tiga atau bahkan empat panel dengan elegan, mungkin kotak masuk, 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, bukan WindowSizeClass.BREAKPOINTS_V1:

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

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Kemudian, terapkan tata letak yang benar saat Anda yakin aplikasi Anda memiliki ruang yang cukup:

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

Mem-build tata letak adaptif dengan Jetpack Navigation 3

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

Navigation 3 juga merupakan alat yang bagus untuk mem-build tata letak adaptif dengan memungkinkan beberapa tujuan ditampilkan secara bersamaan dan memungkinkan peralihan yang lancar di antara tata letak tersebut.

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

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

Anda juga dapat dengan mudah mem-build Scene kustom sendiri dengan mengubah resep Scene atau memulai dari awal. Misalnya, mari kita 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 tumpukan sebelumnya telah mendeklarasikan bahwa mereka mendukung tampilan dalam scene 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 scene kustom kami akan menampilkan null. Dalam hal ini, NavDisplay akan kembali menampilkan entri terakhir dalam tumpukan sebelumnya dalam satu panel menggunakan SinglePaneScene.

Dengan menggunakan scene 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 Compose Material 3 akan membantu Anda membuat UI adaptif seperti tata letak daftar-detail dan panel pendukung yang otomatis menyesuaikan diri dengan konfigurasi jendela berdasarkan class ukuran jendela atau postur perangkat. 

Kabar baiknya adalah library ini sudah diperbarui 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 ikut serta dengan mendeklarasikan 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 yang diperbarui tentang dukungan multi-layar dan pengelolaan jendela untuk mempelajari lebih lanjut cara menerapkan praktik terbaik ini.

Masukan

Masukan Anda sangat penting karena 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 pengguna ingin berinteraksi dengan aplikasi dan perangkat mereka. Peningkatan dukungan layar terhubung adalah langkah lain ke arah tersebut, dan kami yakin pengguna akan menyukai pengalaman desktop yang akan Anda buat.

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