Shifting dari XML ke Compose? Ubah Sudut Pandang Cara Bikin Pondasi UI Dulu Gan

Beranda
Komunitas
Tech
Android Developer
Shifting dari XML ke Compose? Ubah Sudut Pandang Cara Bikin Pondasi UI Dulu Gan

fizcode

18-11-2025 20:24

Shifting dari XML ke Compose? Ubah Sudut Pandang Cara Bikin Pondasi UI Dulu Gan

Waktu jaman ane masih UI slicing pakai XML dan pas mau belajar Jetpack Compose ane kebingungan cara bikin pondasi kayak constraint layout dan relative layout. Gimana cara bikin layout yang align ke top to bottom, start to end, dll. Kesalahan berpikir ane menyamakan apa yang ada di XML sampe-sampe cara membuat UI di XML itu mau diimplementasi juga di Compose.

Di Jetpack Compose, ada beberapa standard layout component. Seperti contoh Column, Row, Box. Kita akan fokus di tiga ini gan. Shifting dari XML ke Compose? Ubah Sudut Pandang Cara Bikin Pondasi UI Dulu Gan

Spoiler for Layout Component:

1. Column
Seperti pada namanya, Column untuk membuat konten align secara vertikalatau atas-bawah.

Spoiler for Column:

2. Row
Sebaliknya, Row untuk memuat konten align secara horizontalatau kiri-kanan.

Spoiler for Row:

3. Box

Untuk box, digunakan untuk konten yang saling tumpang tindih.

Spoiler for Box:

Real Use Case

Agan-agan mungkin udah mulai tercerahkan bagaimana cara bikin pondasi untuk layouting. Ane kasih lagi nih real case untuk penggunaan Column, Row dan Box.

Spoiler for Example:

Dari gambar di atas, yang mana yang Column, Row dan Box akan kita bedah satu satu. Kita kelompokin dulu biar gampang nentuinnya. Kira kira seperti ini:

Spoiler for UI Breakdown:

1. Biru: Pondasi awal itu pakai Rowuntuk memisahkan section image dan section teks.

2. Ijo: Kemudian di section image kita lihat ada rating yang overlap. Maka cocok di sini kita pakai Box.

3. Ungu: Di sebelah kanan lebih simpel. Agan harusnya udah bisa menduga kalo ini pakai Column.

Spoiler for Tree:

Row
├ Box
│ ├ Image (poster)
│ └ Badge rating (overlapped)
└ Column (text content)
├ Title (with index number)
├ Airing time (Wednesday, 23:00)
├ Genres (Action, Adventure, etc)
└ Description

Trus di antara Agan-agan semua pasti ada pertanyaan: Kenapa nggak pakai Box aja atau RelativeLayout?biar efisien, biar sekali render aja kayak di XML. Lanjut ke penjelasan terakhir kenapa Row/Column lebih ringan ketimbang Box.

Perbedaan mendasar Row/Column dengan Box

1. Row/Column

- Row: menyusun child horizontal
- Column: menyusun child vertical
- Kedua layout ini punya measuring rules yang sederhana dan linear
- Optimized heavily oleh Compose runtime

→ Dampaknya:

Measure lebih minimal

Layout lebih predictable

Nggak perlu align pass tambahan

Nggak perlu overlaping detection

2. Box

- Box: semua child di-measure seakan mereka bebas
- Jetpack Compose harus:
> Measure semua anak tanpa aturan (nggak tau urutan)
> Mengalkulasi alignment masing-masing anak
> Mengatur posisi manual dari setiap anak

→ Dampaknya:

Ada alignment calculation

Semua di-measure tanpa constraint unik

Potensi re-measure lebih sering

Sehingga kesimpulannya:

Column + Row lebih ringan

Box keliatan lebih laggy, terutama pas fling scroll

Trus bakal nested dong?

Nah, justru solusinya lebih gampang. Item bisa dibikin component aja. Peran component disini selain bisa mengurangi nested, juga mengurangi boilerplate.

Jadi kurang lebih begitu cara bikin pondasi layout di compose. Cukup beda approach ya gan. Menurut ane cukup mudah buat layouting tanpa ConstraintLayout. Cuma harus dibiasain aja pemetaan kapan harus Column, kapan harus Row, kapan harus Box.

Sekian aja dari ane gan. Mungkin nextnya ane bakal bahas Lifecycle di compose atau malah Recomposition kali ya. Jangan sungkan cendolnya gan kalau Agan ngerasa trit ini insightful. Terima kasih Shifting dari XML ke Compose? Ubah Sudut Pandang Cara Bikin Pondasi UI Dulu Gan

Sumur:

- https://developer.android.com/develo...layouts/basics

- ChatGPT

Diubah oleh fizcode 18-11-2025 20:32

Kutip

Balasan

Komentar yang asik ya

Urutan

Terbaru

Terlama

Komentar yang asik ya

Komunitas Pilihan