Mulai cepat

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Untuk pengalaman terbaik dalam proses pengembangan dengan Compose, download dan instal Android Studio. Edisi ini mencakup banyak fitur editor cerdas, seperti template project baru serta kemampuan untuk langsung melihat pratinjau UI dan animasi Compose Anda.

Dapatkan Android Studio

Ikuti petunjuk berikut untuk membuat project aplikasi Compose baru, menyiapkan Compose untuk project aplikasi yang sudah ada, atau mengimpor aplikasi contoh yang ditulis di Compose.

Membuat aplikasi baru dengan dukungan untuk Compose

Jika ingin memulai project baru yang menyertakan dukungan untuk Compose secara default, Android Studio menyertakan berbagai template project yang dapat membantu Anda memulai. Untuk membuat project baru yang memiliki penyiapan Compose dengan benar, 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. 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.
    2. Pada menu dropdown Minimum API level, pilih API level 21 atau yang lebih tinggi.
  4. Klik Finish.

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

Menyiapkan Compose untuk aplikasi yang sudah ada

Untuk mulai menggunakan Compose, Anda harus menambahkan beberapa konfigurasi build ke project Anda terlebih dahulu. Tambahkan definisi berikut ke file build.gradle aplikasi Anda:

Groovy

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

Beberapa hal yang perlu diperhatikan:

  • Menyetel flag compose ke true dalam blok BuildFeatures Android akan mengaktifkan fungsi Compose.
  • Pembuatan versi ekstensi Compiler Kotlin yang ditentukan dalam blok ComposeOptions terikat dengan pembuatan versi Kotlin. Pastikan Anda membaca Peta kompatibilitas dan memilih versi library yang cocok dengan versi Kotlin project Anda.

Selain itu, tambahkan Compose BOM dan subset dependensi library Compose yang Anda perlukan ke dependensi dari blok di bawah:

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2022.10.00')
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation 'androidx.compose.material3:material3'
    // or Material Design 2
    implementation 'androidx.compose.material:material'
    // or skip Material Design and build directly on top of foundational components
    implementation 'androidx.compose.foundation:foundation'
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation 'androidx.compose.ui:ui'

    // Android Studio Preview support
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation 'androidx.compose.material:material-icons-core'
    // Optional - Add full set of material icons
    implementation 'androidx.compose.material:material-icons-extended'
    // Optional - Add window size utils
    implementation 'androidx.compose.material3:material3-window-size-class'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.5.1'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
    // Optional - Integration with LiveData
    implementation 'androidx.compose.runtime:runtime-livedata'
    // Optional - Integration with RxJava
    implementation 'androidx.compose.runtime:runtime-rxjava2'

}

Kotlin

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2022.10.00")
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    // or Material Design 2
    implementation("androidx.compose.material:material")
    // or skip Material Design and build directly on top of foundational components
    implementation("androidx.compose.foundation:foundation")
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation("androidx.compose.ui:ui")

    // Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-test-manifest")

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation("androidx.compose.material:material-icons-core")
    // Optional - Add full set of material icons
    implementation("androidx.compose.material:material-icons-extended")
    // Optional - Add window size utils
    implementation("androidx.compose.material3:material3-window-size-class")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.5.1")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")
    // Optional - Integration with RxJava
    implementation("androidx.compose.runtime:runtime-rxjava2")

}

Mencoba aplikasi contoh Jetpack Compose

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.

Jika ingin mengetahui cara menggunakan Jetpack Compose untuk Wear OS, lihat Menyiapkan Jetpack Compose di Wear OS.

Menggunakan Bill of Materials

Compose Bill of Material (BOM) memungkinkan Anda mengelola semua versi library Compose dengan hanya menentukan versi BOM. BOM memiliki link ke versi stabil library Compose yang berbeda, sedemikian rupa sehingga dapat digunakan bersama. Saat menggunakan BOM di aplikasi, Anda tidak perlu menambahkan versi apa pun ke dependensi library Compose itu sendiri. Saat Anda mengupdate versi BOM, semua library yang digunakan akan otomatis diupdate ke versi terbaru.

Untuk mengetahui versi library Compose mana yang dipetakan ke versi BOM tertentu, lihat Pemetaan BOM ke versi library.

Mengapa library Compose Compiler tidak disertakan dalam BOM?

Ekstensi compiler Kotlin Compose (androidx.compose.compiler) tidak ditautkan ke versi library Compose. Sebagai gantinya, ekstensi ini ditautkan ke versi plugin compiler Kotlin dan dirilis dalam ritme yang terpisah dari Compose lainnya, jadi pastikan untuk menggunakan versi yang kompatibel dengan versi Kotlin Anda. Anda dapat menemukan versi Kotlin yang dipetakan ke setiap versi plugin di Peta Kompatibilitas Compose ke Kotlin.

Bagaimana cara menggunakan versi library yang berbeda dari yang ditetapkan di BOM?

Di bagian dependensi build.gradle, pertahankan impor platform BOM. Pada impor dependensi library, tentukan versi yang diinginkan. Misalnya, berikut cara mendeklarasikan dependensi jika Anda ingin menggunakan versi alfa Material 3, apa pun versi yang ditetapkan di BOM:

dependencies {
    // Import the Compose BOM
    implementation platform('androidx.compose:compose-bom:2022.10.00')

    // Override Material Design 3 library version with a pre-release version
    implementation 'androidx.compose.material3:material3:1.1.0-alpha01'

    // Import other Compose libraries without version numbers
    // ..
    implementation 'androidx.compose.foundation:foundation'
}

Apakah BOM secara otomatis menambahkan semua library Compose ke aplikasi saya?

Tidak. Untuk menambahkan dan menggunakan library Compose di aplikasi, Anda harus mendeklarasikan setiap library sebagai baris dependensi terpisah dalam file Gradle modul (level aplikasi) (biasanya app/build.gradle).

Penggunaan BOM akan memastikan bahwa versi library Compose di aplikasi Anda kompatibel, tetapi BOM tidak benar-benar menambahkan library Compose tersebut ke aplikasi Anda.

Ke depannya, library Compose akan diberi versi secara independen, yang berarti nomor versi akan mulai bertambah seiring waktu. Rilis stabil terbaru dari setiap library diuji dan dijamin berfungsi dengan baik bersama-sama. Namun, menemukan versi stabil terbaru dari setiap library bisa jadi tidak mudah, dan BOM membantu Anda untuk menggunakan versi terbaru secara otomatis.

Apakah saya dipaksa menggunakan BOM?

Tidak. Anda masih dapat memilih untuk menambahkan setiap versi dependensi secara manual. Namun, sebaiknya gunakan BOM karena akan mempermudah penggunaan semua versi stabil terbaru secara bersamaan.

Apakah BOM dapat digunakan dengan katalog versi?

Ya. Anda dapat menyertakan BOM itu sendiri dalam katalog versi, dan menghapus versi library Compose lainnya:

[libraries]
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "androidxComposeBom" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation" }

Jangan lupa untuk mengimpor BOM dalam build.gradle modul Anda:

dependencies {
    val composeBom = platform(libs.androidx.compose.bom)
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // import Compose dependencies as usual
}

Bagaimana cara melaporkan masalah atau menawarkan masukan tentang BOM?

Anda dapat melaporkan masalah di issue tracker kami.

Pemetaan BOM ke versi library

Grup library Versi di 2022.10.00
androidx.compose.animation:animation 1.3.0
androidx.compose.animation:animation-core 1.3.0
androidx.compose.animation:animation-graphics 1.3.0
androidx.compose.foundation:foundation 1.3.0
androidx.compose.foundation:foundation-layout 1.3.0
androidx.compose.material:material 1.3.0
androidx.compose.material:material-icons-core 1.3.0
androidx.compose.material:material-icons-extended 1.3.0
androidx.compose.material:material-ripple 1.3.0
androidx.compose.material3:material3 1.0.0
androidx.compose.material3:material3-window-size-class 1.0.0
androidx.compose.runtime:runtime 1.3.0
androidx.compose.runtime:runtime-livedata 1.3.0
androidx.compose.runtime:runtime-rxjava2 1.3.0
androidx.compose.runtime:runtime-rxjava3 1.3.0
androidx.compose.runtime:runtime-saveable 1.3.0
androidx.compose.ui:ui 1.3.0
androidx.compose.ui:ui-geometry 1.3.0
androidx.compose.ui:ui-graphics 1.3.0
androidx.compose.ui:ui-test 1.3.0
androidx.compose.ui:ui-test-junit4 1.3.0
androidx.compose.ui:ui-test-manifest 1.3.0
androidx.compose.ui:ui-text 1.3.0
androidx.compose.ui:ui-text-google-fonts 1.3.0
androidx.compose.ui:ui-tooling 1.3.0
androidx.compose.ui:ui-tooling-data 1.3.0
androidx.compose.ui:ui-tooling-preview 1.3.0
androidx.compose.ui:ui-unit 1.3.0
androidx.compose.ui:ui-util 1.3.0
androidx.compose.ui:ui-viewbinding 1.3.0