Mengenal Jetpack Compose di Android
Jetpack Compose adalah modern toolkit untuk membangun Native Android UI. Dengan Jetpack Compose kita dapat menulis UI dengan cara baru menggunakan satu bahasa yaitu kotlin. Kamu bisa melihat beberapa contoh UI yang di hasilkan dengan Jetpack Compose pada link berikut https://github.com/android/compose-samples.
Jetpack Compose menggunakan pendekatan deklaratif yang tidak sama dengan pendekatan imperatif seperti pembuatan UI dengan XML. Konsep sistem UI pada Jetpack Compose adalah composable atau komposisi, artinya setiap komponen UI dapat ditumpuk menjadi parent dan child di dalamnya. Untuk lebih jelasnya mengenai konsep composable dapat melihat gambar di bawah.
Pada gambar di atas kita melihat bawah Komponen UI dapat di tumpuk satu sama lainnya. Composable di atas merepresentasikan setiap function yang memiliki anotasi @Composable, kemudian dalam function tersebut dapat memanggil function @Composable lain di dalamnya.
Untuk lebih memahami cara kerja Jetpack Compose, Kita akan membuat project dengan menggunakan dua composable yaitu Surface dan Text. Pada saat tutorial ini ditulis Jetpack Compose berada di versi 1.0.0-beta09. Untuk membuat projectnya perlu menggunakan Android Studio Preview Beta Build. Kamu dapat mendownload pada link berikut https://developer.android.com/studio/preview dan cara menginstall sama seperti Android Studio biasanya.
Buka Android Studio Preview dan buat Project baru → pilih Empty Compose Activity dan masukkan konfigurasi seperti berikut :
- Name : HelloCompose
- Package Name : com.teknorial.hellocompose
- Biarkan opsi lain sebagaimana adanya
Setelah project berhasil build dan kita dapat melihat MainActivity langsung menjadi pertama yang terlihat. Tetapi pada saat tutorial ini ditulis, preview layout tidak dapat berkerja semestinya dengan versi library yang digenerate oleh Android Studio.
Kita akan mengubah versi Jetpack Compose menjadi 1.0.0-beta09 pada project, buka build.gradle (Project: HelloCompose) dan modifikasi seperti kode di bawah.
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
compose_version = '1.0.0-beta09'
}
repositories {
google()
mavenCentral()
}
dependencies {
classpath "com.android.tools.build:gradle:7.0.0-beta05"
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.10"
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
Terakhir buka build.gradle(Module: HelloCompose.app) dan hapus kotlinCompilerVersion dalam composeOptions{} karena deprecated.
Buka kembali MainActivity.kt dan tekan tombol Build Refresh (Ctrl+Shift+S) untuk melihat layout sementara seperti pada gambar di bawah.
Dalam Jetpack Compose kita dapat membuat layout dengan menggunakan kode Kotlin tanpa perlu menggunakan XML seperti pengembangan Android sebelumnya. Kita dapat melihat beberapa function memiliki @Composable yang artinya dapat dikomposisikan pada tampilan layout. Mari kita buat tampilan baru, pertama kita akan menghapus dulu layout bawaan dan MainActivity.kt akan menjadi seperti berikut.
package com.teknorial.hellocompose
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.teknorial.hellocompose.ui.theme.HelloComposeTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HelloComposeTheme {
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
HelloComposeTheme {
}
}
Sekarang kita akan membuat function composable baru yang akan digunakan sebagai background dari layar. Tambahkan function MainScreen ke dalam MainActivity.kt dan panggil function tersebut ke dalam HelloComposeTheme{} di setContent{} dan DefaultPreview() . Selalu ingat dalam penulisan function composable sebaiknya menggunakan awalan huruf besar seperti MainScreen.
package com.teknorial.hellocompose
...
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HelloComposeTheme {
MainScreen() //*
}
}
}
}
@Composable
fun MainScreen() {
//Membuat surface sebagai background layar utama
//fillMaxSize() membuat surface akan mengisi keseluruhan layar
Surface(
color = MaterialTheme.colors.background,
modifier = Modifier.fillMaxSize()
) {
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
HelloComposeTheme {
MainScreen() //*
}
}
Build Refresh (Ctrl + Shift + 5) dan tampilan layout akan membentuk halaman kosong putih seperti gambar di bawah.
Kita memanggil function MainScreen() di dua tempat yaitu setContent{} dan DefaultPreview(). Pada setContent{} akan tampil pada emulator atau perangkat Android dan pada DefaultPreview akan tampil sebagai preview yang berada sebelah kanan. Jadi penting untuk memanggil function MainScreen di DefaultPreview.
Dalam setContent kita hanya dapat memanggil function composable saja. Salah satunya adalah HelloComposeTheme{}. Ctrl + Click atau Ctrl + b pada tulisan HelloComposeTheme dan kita akan menemukan bahwa HelloComposeTheme merupakan function composable yang mengatur tema seperti warna, typography dan shape. Kita akan mempelajari nanti bagaimana cara memodifikasi tampilan di postingan selanjutnya.
Pada MainActivity.kt kita memanggil funtion MainScreen ke dalam tanda kurung kurawal ({ }) dari HelloComposeTheme karena paramater content yang dimilikinya merupakan function lambda. Jika lamda berada di akhir parameter, kita dapat menggunakan paramater tersebut di luar tanda kurung. Contohnya pada HelloComposeTheme memiki parameter yaitu
1. darkTheme: Boolean = isSystemInDarkTheme()
2. content: @Composable() () -> Unit
Parameter pertama merupakan variable Boolean yang memiliki nilai default yaitu isSystemInDarkTheme(). Parameter kedua adalah content yang merupakan composable function yang dipanggil di dalam function HelloComposeTheme. Sudah dipastikan kita dapat memanggil function lain di dalam HelloComposeTheme karena parameter tersebut merupakan function. Penjelasan lengkap tentang konsep lamda pada kotlin akan saya buatkan di postingan terpisah nanti.
Kembali ke MainActivity.kt. Dalam function MainScreen() terdapat function Surface() yang juga merupakan composable function. Kamu bisa Ctrl + b pada tulisan Surface untuk melihat detail dari function Surface.
Sama hal dengan HelloComposeTheme sebelumnya, Surface juga memiliki parameter content yang merupakan function lamda. Kembali ke MainActivity dan lihat kembali function Surface beserta paramaternya.
@Composable
fun MainScreen() {
Surface(color = MaterialTheme.colors.background,
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()) {
Greeting(name = "Android")
}
}
Dalam penggunaan penulisan parameter function di Jetpack Compose, sangat disarankan kita menggunakan named argument atau menulis nama parameter kembali seperti pada color = MaterialTheme.colors.background. Dengan menggunakan named argument dapat lebih jelas dalam memasukan nilai parameter tanpa harus sesuai posisi parameter dari function tersebut.
Dalam Surface, kita membuat color bernilai MaterialTheme.colors.background yang berarti warna tersebut secara default akan mengikuti pengaturan warna dari Smartphone kita. Background akan berwarna gelap jika Smartphone mengaktifkan dark mode dan sebaliknya warna putih. Kamu bisa mengubah nilai default pada warna tersebut di Theme.kt.
Untuk melihat lebih detail apa saja warna default, kamu bisa check function darkColors dan lightColors.
Kembali lagi ke MainActivity.kt. Pada Surface kita juga membuat argument Modifier.fillMaxSize() yang berarti tinggi dan lebarnya akan mengikuti ukuran layar. Sekarang kita akan memasukkan content yaitu function Greeting ke dalam Surface. Modifikasi function MainScreen seperti kode di bawah.
@Composable
fun MainScreen() {
//Membuat surface sebagai background layar utama
//fillMaxSize() membuat surface akan mengisi keseluruhan layar
Surface(
color = MaterialTheme.colors.background,
modifier = Modifier.fillMaxSize()
) {
Greeting(name = "Compose")
}
}
Build Refresh (Ctrl + Shift + 5) dan tulisan Hello Compose! akan muncul di preview.
Di dalam function Greeting, Text merupakan function composable untuk menampilkan tulisan seperti TextView pada layout dengan XML. Kita akan melihat isi dalam dari function Text, Ctrl + b atau Ctrl + Click pada tulisan Text.
Terdapat banyak parameter di sini dan untuk melihat apa saja fungsi dari parameter tersebut kamu dapat membaca tulisan komentar yang berwarna hijau di atas functionnya.
Kita akan mencoba menggunakan parameter fontSize untuk mengubah Text Hello Compose! menjadi lebih besar.
Kembali ke MainActivity dan tambahkan argument fontSize ke dalam function Text yang dipanggil seperti berikut.
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!",
fontSize = 48.sp)
}
Build Refresh (Ctrl + Shift + 5) dan tulisan Hello Compose! menjadi lebih besar karena kita membuat ukuran font menjadi 48 sp.
Kita telah berhasil menggunakan Jetpack Compose dan mempelajari cara kerjanya. Masih banyak hal yang perlu kita pelajari lagi tentang Jetpack Compose. Demikian tutorial Mengenal Jetpack Compose di Android, semoga dapat membantu kamu memahami dasar dari Jetpack Compose. Selanjutnya kamu bisa belajar tutorial Mengenal Row & Column pada Jetpack Compose. Jika ada pertanyaan, jangan ragu untuk bertanya di kolom komentar. Join grup telegram teknorial untuk mendapat informasi lanjut dari tutorial ini https://t.me/teknorialcom. Terima kasih.
Source Code : https://github.com/rflash95/HelloCompose
