Halo guys, kali ini kita akan membahas tentang Development Android UI dengan Jetpack Compose. Kalau pada artikel sebelum-sebelumnya, ketika membuat desain UI di android kita menggunakan XML. Pada masa sekarang ini, tidak perlu lagi bergantung pada XML karena Jetpack Compose telah menjadi standar utama dalam modern android development.
Jetpack Compose adalah Framework UI dari Google untuk menyederhanakan proses pengembangan UI di Android. Project baru saat ini banyak mengadopsi Compose sebagai fondasi utama karena menawarkan kode yang lebih ringkas, mudah dibaca, dan lebih mudah dirawat dibandingkan pendekatan berbasis XML.
XML vs Jetpack Compose
Berikut adalah perbedaan antara XML dan Jetpack Compose :
- UI & Logic
- XML : Didefinisikan langsung di dalam file XML. UI dan logic berada di dua tempat yang berbeda.
- Jetpack Compose : Didefinisikan langsung menggunakan Kotlin. UI dan logic dalam satu barisan code sehingga lebih ringkas dan mudah dipahami.
- Development Approach
- XML : XML menggunakan pendekatan Imperative, artinya developer memberi instruksi secara eksplisit mengenai apa yang harus diubah pada tampilan. Setiap perubahan harus memperbaharui komponen UI secara manual.
- Jetpack Compose : Jetpack Compose menggunakan pendekatan Declarative, artinya developer hanya mendefinisikan seperti apa UI seharusnya. Selebihkan framework akan menangani otomatis update UI dengan mengikuti perubahan state.
- Boilerplate Code
- XML : Lebih banyak karena harus menulis code tambahan seperti XML, View Binding, Fragment Transaction dan sinkronisasi antara XML dan Kotlin
- Jetpack Compose : Lebih sedikit karena menghilangkan sebagian besar boilerplate dari XML.
- Preview
- XML : Layout Preview terbatas dan harus build ulang aplikasi.
- Jetpack Compose : Live Preview dan hot reload tanpa rebuild aplikasi.
- Reusability
- XML : Include Layout / Custom View
- Jetpack Compose : Composable Function
Kesimpulannya, Jetpack Compose menawarkan pendekatan yang lebih modern dengan kode yang lebih ringkas, mudah dipahami, dan lebih sesuai dengan pengembangan Android saat ini.
Oke sekarang kita akan langsung praktekkan membuat aplikasi Android dengan Jetpack Compose.
Pertama-tama download dan install Android Studio dulu jika belum pernal terinstall. Bisa di download dan install di sini https://developer.android.com/studio.
Saya pakai Android Studio versi Quail 1. Untuk Kotlin menggunakan versi 2.4.0 dan AGP (Android Gradle Plugin) versi 9.2.1. Bisa dilihat di source code project yang akan saya share di akhir artikel.
1. Buat project baru di Android Studio, kemudian pilih Empty Activity.
2. Isikan nama project, package name, dll
3. Setelah selesai maka struktur projectnya akan seperti berikut.
4. Kita coba jalankan projectnya di emulator dan hasilnya sebagai berikut.
5. Kita akan coba menambahkan komponen lain seperti Column, Row, Text dan Button dengan Composable Function.
Composable Function adalah fungsi Kotlin yang digunakan untuk mendeskripsikan tampilan (UI). Fungsi ini ditandai dengan anotasi @Composable.
@Composable
fun Greeting(modifier: Modifier = Modifier) {
Column(
modifier = modifier
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
) {
Text(
text = "Name : ",
)
Text(
text = "Wim",
)
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
) {
Text(
text = "Email : ",
)
Text(
text = "wim.sonevel@yahoo.co.id",
)
}
Button(
onClick = {
println("Button pressed")
}
) {
Text("Click Me")
}
}
}
Di function yang kita buat terdapat komponen Modifier. Modifier digunakan untuk mengatur ukuran, warna, padding, margin, posisi, background, click listener dan berbagai properti lainnya.
6. Sekarang kita akan update perubahan UI dengan Live Edit tanpa harus rebuild ulang di emulator. Edit function berikut dengan ditandai dengan anotasi
@Preview.
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
AndroidComposeTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Greeting(modifier = Modifier.padding(innerPadding))
}
}
}
Untuk menjalankan Live Edit, klik icon refresh di pojok atas kanan emulator.
7. Berikut source code lengkap di MainActivity.
package com.example.android_compose
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.android_compose.ui.theme.AndroidComposeTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
AndroidComposeTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Greeting(modifier = Modifier.padding(innerPadding))
}
}
}
}
}
@Composable
fun Greeting(modifier: Modifier = Modifier) {
Column(
modifier = modifier
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
) {
Text(
text = "Name : ",
)
Text(
text = "Wim",
)
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
) {
Text(
text = "Email : ",
)
Text(
text = "wim.sonevel@yahoo.co.id",
)
}
Button(
onClick = {
println("Button pressed")
}
) {
Text("Click Me")
}
}
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
AndroidComposeTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Greeting(modifier = Modifier.padding(innerPadding))
}
}
}
Source code lengkapnya bisa dilihat di https://github.com/wimsonevel/Android-Compose
Oke sekian dulu artikel kali ini, next kita akan melanjutkan dengan membuat komponen lainnya dengan Jetpack Compose.
Semoga bermanfaat dan terima kasih sudah berkunjung. ^^
0 Komentar
Penulisan markup di komentar