Mulai cepat

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

Pertama, konfigurasikan compiler Compose menggunakan plugin Gradle Compose Compiler.

Kemudian, tambahkan definisi berikut ke file build.gradle aplikasi Anda:

Groovy

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

Menyetel flag compose ke true dalam blok BuildFeatures Android akan mengaktifkan fungsi Compose di Android Studio.

Terakhir, tambahkan Compose BOM dan subset dependensi library Compose yang Anda perlukan ke dependensi dari blok berikut:

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.10.01')
    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.adaptive:adaptive'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.9.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
    // 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:2024.10.01")
    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.adaptive:adaptive")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
    // 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.