Belajar Jetpack Compose - Interop & Migration

#Pendahuluan

Tidak semua aplikasi bisa ditulis ulang dalam semalam. Aplikasi yang sudah berjalan lama — dengan puluhan layar dan basis pengguna besar — butuh jalur adopsi yang mulus. Interop Compose menjawabnya: Compose dan view tradisional bisa hidup berdampingan.

Pendekatannya adalah migrasi bertahap: mulai dari satu layar, lalu menyebar. Selama transisi, aplikasi berjalan hybrid — sebagian Compose, sebagian XML — tanpa merusak fitur.

Episode 16 ini meliputi ComposeView, AndroidView, migrasi bertahap, dan pola arsitektur hybrid.

#Memakai ComposeView di Aplikasi XML

#Menyematkan Compose ke Layout XML

Cara paling cepat memulai: letakkan ComposeView di layout XML dan isi dengan composable:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compass_pembayaran"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
 
</LinearLayout>

ComposeView diperlakukan seperti view biasa di XML. Di kode, kalian meng-isi konten Compose-nya:

Mengisi ComposeView

findViewById<ComposeView>(R.id.compass_pembayaran).setContent {
    PembayaranScreen()
}

ComposeView.setContent { PembayaranScreen() } membuka konteks komposisi di dalam view. XML menangani kerangka layar, sementara bagian pembayaran ditulis di Compose.

#Composition di dalam Fragment

Untuk aplikasi berbasis Fragment, gunakan ComposeView di dalam onViewCreated:

ComposeView di fragment

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    view.findViewById<ComposeView>(R.id.komposisi_profil)
        .setContent {
            ProfilScreen()
        }
}

Pola ini membuat satu Fragment sekaligus dipindahkan ke Compose tanpa mengubah navigasi aplikasi secara keseluruhan.

#Memakai AndroidView untuk View Lama

#Menyematkan View ke Compose

Arah sebaliknya: view lama yang belum bisa dipindahkan bisa disematkan ke dalam composable dengan AndroidView:

AndroidView untuk view kustom

@Composable
fun PetaKustom() {
    AndroidView(
        factory = { context ->
            GoogleMapView(context)
        },
        modifier = Modifier.fillMaxSize()
    )
}

AndroidView(factory = { ... }) menciptakan view di dalam komposisi. update bisa ditambahkan untuk memperbarui view saat state berubah:

AndroidView dengan update

AndroidView(
    factory = { context -> WebView(context) },
    update = { webView ->
        webView.loadUrl(alamatSitus)
    }
)

update = { webView -> webView.loadUrl(alamatSitus) } menerapkan perubahan state ke view. Pola ini menangani library yang belum punya versi Compose — seperti map dan player.

#InteropState dan Lifecycle

Untuk view yang bergantung lifecycle, gunakan AndroidView dengan LocalLifecycleOwner atau library interop androidx. Detailnya penting saat view memiliki listener panjang — gabungkan dengan DisposableEffect dari episode 10 untuk membersihkannya.

#Migrasi Layar Bertahap

#Mulai dari Layar yang Paling Diuntungkan

Urutkan layar mana yang paling diuntungkan Compose: layar dengan state dinamis dan UI kompleks memberi pengembalian paling cepat. Layar statis sederhana bisa ditinggalkan lebih lama.

Prosesnya: buat layar baru di Compose, lalu ubah navigasi menunjuk ke layar Compose tersebut. Struktur aplikasi di luar layar itu tetap berjalan. Buat commit kecil per layar yang dipindahkan, misalnya git commit -m "feat: migrate layar pembayaran", agar rollback selalu mudah bila ada regresi.

#Mempertahankan Back Stack

Navigasi lama berbasis Fragment dan Activity. Selama transisi, dua sistem berjalan berdampingan: Fragment lama menampilkan ComposeView, dan layar Compose penuh hidup di dalamnya. Ini menjaga back stack dan state tetap utuh tanpa menulis ulang navigasi sekaligus.

#Pola Arsitektur Hybrid

#Interface Sebagai Batas

Kunci arsitektur hybrid adalah batas yang jelas antara Compose dan view lama. Bungkus akses ke view lama di belakang interface:

Batas interop

interface PetaProvider {
    @Composable
    fun Tampilkan()
}
 
class PetaLegacy : PetaProvider {
    @Composable
    override fun Tampilkan() {
        AndroidView(factory = { context -> MapView(context) })
    }
}

PetaLegacy menyembunyikan view lama di balik interface PetaProvider. Bagian lain aplikasi memakai interface tanpa peduli implementasinya — kelak view lama bisa diganti tanpa mengubah pemanggil.

#Target Akhir

Setelah semua layar pindah, hapus FragmentActivity lama dan jadikan arsitektur Single Activity (episode 8). Interface perantara tetap berguna sebagai titik uji dan isolasi.

#Penutup

Episode 16 menjembatani dua dunia: ComposeView untuk menyematkan Compose ke XML, AndroidView untuk menyematkan view lama ke Compose, strategi migrasi layar bertahap yang mengutamakan layar dinamis, serta interface sebagai batas arsitektur hybrid yang bersih.

Inti yang harus dibawa pulang:

• ComposeView memungkinkan Compose hidup di dalam layout XML.
• AndroidView menyematkan view lama ke dalam composable.
• Migrasi bertahap dimulai dari layar paling dinamis.
• Fragment lama bisa membungkus ComposeView tanpa merombak navigasi.
• Interface memisahkan Compose dari implementasi view lama.
• Target akhir migrasi adalah arsitektur Single Activity.

Di episode 17 selanjutnya kita akan membahas desktop, web, dan multiplatform — Compose Multiplatform, membangun dan men-deploy ke desktop dan web, berbagi komponen UI lintas target, serta batasan dan use case praktisnya.