Mengenal Jetpack Compose di Android

Android 7 Jul 2021

Jetpack Compose merupakan 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.

Jetpack Compose UI System

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.

Android Studio Preview Beta

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

Empty Compose Activity

Konfigurasi Project Jetpack Compose

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.

jetpack-compose-project-hello

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.

build refresh compose

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.

surface jetpack compose

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.

theme-jetpack-compose

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.

detail surface jetpack compose

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.

theme color jetpack compose

Untuk melihat lebih detail apa saja warna default, kamu bisa check function darkColors dan lightColors.

light colors jetpack compose

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.

hello compose 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.

text function jetpack compose

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.

font size text jetpack compose

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. 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

Tag

Reza Maulana

Android Developer yang mulai suka nulis blog lagi. Di sini kalian dapat membaca tulisannya seputar tentang pemrograman dan apapun yang sedang dia pelajari.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.