Berkenalan dengan Jetpack Compose

Jetpack Compose adalah android modern toolkit untuk membuat native UI. Jika biasanya kita membuat layout pada file xml, dengan tool ini nantinya kita akan membuat layout tersebut langsung di file kotlin. Tool ini memanfaatkan sifat UI declarative, jadi kita akan dipermudah dalam pembuatan UI, apalagi untuk UI custom yang effortnya cukup besar. Penulisan codenya memiliki kemiripan dengan Flutter, karena sama-sama memiliki sifat UI declarative.

Pada saat tulisan ini ditulis, jetpack compose masih dalam versi beta. Jadi untuk mencoba menggunakannya kita akan menggunakan Android Studio versi beta. Disini mimin menggunakan android studio versi “Arctic Fox (2020.3.1) Beta 3“.

1. Membuat project baru

Untuk membuat project baru, bisa dilakukan seperti biasa, dengan memilih Empty Compose Activity

Nama project yang digunakan nantinya akan menjadi nama function untuk thema yang digenerate otomatis oleh Android Studio. Nama ini tentu saja bisa direfactor ya. Disini mimin membuat project dengan nama Sample_JetpackCompose, nama functionnya jadi Sample_JetpackComposeTheme.

2. build.gradle (:app)

Dengan memilih template, file gradle akan otomatis memiliki jetpack compose yang telah aktif, beserta dependenciesnya.

plugins {
    ...
}

android {

    ...

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
        useIR = true
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
        kotlinCompilerVersion '1.4.32'
    }
}

dependencies {

    ...

    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling:$compose_version"
    implementation 'androidx.activity:activity-compose:1.3.0-alpha06'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
}

3. Penjelasan

Berikut merupakan file MainActivity.kt yang otomatis dibuat oleh android studio:

• Layout yang akan dijalankan pada MainActivity adalah layout yang berada di dalam setContent { … }
• Layout yang tampil pada sisi kanan adalah layout dari method DefaultPreview(). Jadi pastikan layout yang dijalankan pada device sesuai dengan layout yang di preview pada sisi kanan. Developer bisa saja kebingungan karena yang dipreview dan yang muncul di device adalah tampilan yang berbeda.
• @Composable digunakan untuk menentukan function berfungsi sebagai compose.
• @Preview digunakan untuk menampilkan layout pada function tersebut, pada bagian sisi kanan. Kita bisa saja menampilkan banyak layout dengan menggunakan ini.
• Surface( … ){ … } adalah layout yang berfungsi untuk ngegroup childnya sesuai dengan shapenya, sebagai elevasi, border dan juga background.
• Text( … ) adalah layout yang berfungsi untuk menampilkan text.

Berikut hasil dari code tersebut ketika dijalankan di real device:

4. Interactive mode

Interactive mode ini berfungsi agar developer bisa melakukan interaksi (Click, scroll, dll) langsung pada bagian preview android studio. Secara default mode ini belum aktif. Mode ini bisa diaktifkan melalui Menu preferences.

Nah sekian dulu tulisan kali ini. Pada tulisan berikutnya kita akan membahas lebih banyak layout. Ditunggu ya, dan semoga bermanfaat ya 😀

Oh iya di website ini ada tulisan menarik lainnya juga loh, seperti berikut:

• Membuat animasi dengan Motion Layout di Android (Part-1)
• Map di Android dengan menggunakan mapbox (Part 1)
• Memulai dengan Kotlin Multiplatform
• Penyimpanan data lokal pada Flutter (shared_preferences)
• Mengelompokkan Berbagai Widget dengan Column