Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Menggunakan Android Studio dengan Jetpack Compose

Jetpack Compose adalah toolkit modern untuk membuat UI Android native. Toolkit ini didasarkan pada model pemrograman deklaratif sehingga Anda dapat mendeskripsikan tampilan UI yang diinginkan, dan Compose akan menangani proses selanjutnya. Saat status aplikasi berubah, UI Anda juga akan diupdate secara otomatis. Karena dibuat di Kotlin, toolkit ini dapat berfungsi sepenuhnya dengan bahasa pemrograman Java serta memiliki akses langsung ke semua API Android dan Jetpack. Toolkit ini kompatibel dengan toolkit UI yang sudah ada sehingga Anda dapat memadukan tampilan klasik dan baru, juga menggunakan desain Material serta animasi dari awal.

Untuk pengalaman terbaik saat melakukan pengembangan dengan Jetpack Compose, sebaiknya download versi canary terbaru Pratinjau Android Studio. Alasannya, jika menggunakan Android Studio untuk mengembangkan aplikasi dengan Jetpack Compose, Anda dapat memanfaatkan fitur editor cerdas, seperti template New Project dan kemampuan untuk langsung melihat pratinjau UI Compose Anda.

Dapatkan versi Canary Android Studio

Setelah menginstal Android Studio, ikuti petunjuk di bawah untuk mencoba aplikasi contoh Jetpack Compose, membuat project aplikasi Jetpack Compose baru, atau menambahkan dukungan untuk Jetpack Compose ke project aplikasi yang ada.

Mencoba aplikasi contoh Jetpack Compose

Setelah menjalankan Android Studio versi terbaru, cara tercepat untuk bereksperimen dengan kemampuan Jetpack Compose adalah dengan mencoba aplikasi contoh Jetpack Compose yang dihosting di GitHub. Untuk mengimpor project aplikasi contoh dari Android Studio, lakukan langkah-langkah berikut:

  1. Jika Anda baru memulai di jendela Welcome to Android Studio, pilih Import an Android code sample. Jika sudah membuka project Android Studio, pilih File > New > Import Sample dari panel menu.
  2. Dalam kotak penelusuran di dekat bagian atas wizard Browse Samples, ketik "compose".
  3. Pilih salah satu aplikasi contoh Jetpack Compose dari hasil penelusuran, lalu klik Next.
  4. Ubah Application name dan Project location atau biarkan nilai default seperti apa adanya.
  5. Klik Finish.

Android Studio akan mendownload aplikasi contoh ke jalur yang Anda tentukan dan membuka project tersebut. Anda kemudian dapat memeriksa MainActivity.kt di setiap contoh untuk melihat Jetpack Compose API seperti animasi crossfade, komponen kustom, penggunaan tipografi, serta menampilkan warna terang dan gelap dalam pratinjau dalam IDE.

Membuat aplikasi baru dengan dukungan untuk Jetpack Compose

Jika ingin memulai project baru yang menyertakan dukungan untuk Jetpack Compose secara default, Android Studio menyertakan template project baru yang dapat membantu Anda memulai. Untuk membuat project baru yang menyertakan Jetpack Compose, lakukan langkah berikut:

  1. Jika baru memulai di jendela Welcome to Android Studio, klik Start a new Android Studio project. Jika sudah membuka project Android Studio, pilih File > New > New Project dari panel menu.
  2. Di jendela Select a Project Template, pilih Empty Compose Activity lalu klik Next.
  3. Di jendela Configure your project, lakukan langkah berikut:
    1. Tetapkan Name, Package name, dan Save location seperti biasa.
    2. Perlu diperhatikan bahwa pada menu drop-down Language, Kotlin adalah satu-satunya opsi yang tersedia karena Jetpack Compose hanya dapat menangani class yang ditulis dalam Kotlin.
    3. Pada menu drop-down Minimum API level, pilih API level 21 atau yang lebih tinggi.
  4. Klik Finish.
  5. Pastikan file build.gradle project sudah dikonfigurasi dengan benar, seperti yang dijelaskan dalam Mengonfigurasi Gradle.

Sekarang, Anda pun siap memulai pengembangan aplikasi menggunakan Jetpack Compose. Untuk membantu Anda memulai dan mempelajari hal-hal yang dapat dilakukan dengan toolkit ini, silakan coba Tutorial Jetpack Compose.

Menambahkan Jetpack Compose ke project yang ada

Jika ingin menggunakan Jetpack Compose dalam project yang sudah ada, Anda harus mengonfigurasi project dengan setelan dan dependensi yang diperlukan.

Mengonfigurasi Kotlin

Pastikan Anda menggunakan Kotlin 1.4.0 atau yang lebih baru dalam project:

plugins {
  id 'org.jetbrains.kotlin.android' version '1.4.0'
}

Mengonfigurasi Gradle

Anda perlu menetapkan API level minimal aplikasi ke 21 atau yang lebih tinggi dan mengaktifkan Jetpack Compose dalam file build.gradle aplikasi, seperti pada contoh di bawah. Tetapkan juga versi untuk plugin compiler Kotlin.

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...

    // Set both the Java and Kotlin compilers to target Java 8.

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
        useIR = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion "1.0.0-alpha01"
    }
}

Menambahkan dependensi toolkit Jetpack Compose

Sertakan dependensi toolkit Jetpack Compose dalam file build.gradle aplikasi Anda, seperti pada contoh di bawah ini:

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0-alpha01'
    // Tooling support (Previews, etc.)
    implementation 'androidx.ui:ui-tooling:1.0.0-alpha01'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.0-alpha01'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.0-alpha01'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha01'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha01'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha01'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha01'

    // UI Tests
    androidTestImplementation 'androidx.ui:ui-test:1.0.0-alpha01'
}