Bergabunglah bersama kami di ⁠#Android11: The Beta Launch Show pada tanggal 3 Juni!

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 Android dan Jetpack API. 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

Setelah menjalankan Android Studio versi terbaru, cara tercepat untuk bereksperimen dengan kemampuan Jetpack Compose adalah dengan mencoba aplikasi contoh "Jetnews" yang dihosting di GitHub. Untuk mengimpor project aplikasi contoh dari Android Studio, lakukan 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 "Jetnews".
  3. Pilih aplikasi contoh Jetnews 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 untuk melihat contoh animasi crossfade, komponen kustom, penggunaan tipografi, serta menampilkan warna terang dan gelap pada 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 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"
    }

    composeOptions {
        kotlinCompilerExtensionVersion "0.1.0-dev09"
    }
}

Menambahkan dependensi toolkit Jetpack Compose

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

dependencies {
    // You also need to include the following Compose toolkit dependencies.
    implementation 'androidx.ui:ui-framework:0.1.0-dev10'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev10'
    implementation 'androidx.ui:ui-layout:0.1.0-dev10'
    implementation 'androidx.ui:ui-material:0.1.0-dev10'
    ...
}

Menggunakan pratinjau langsung

Pratinjau langsung adalah fitur Android Studio yang memungkinkan Anda menguji dan membandingkan fungsi aplikasi yang dapat disusun pada berbagai orientasi, ukuran font, dan tema, tanpa harus men-deploy aplikasi.

Pratinjau langsung, masing-masing menggunakan lebar, tema, dan penskalaan font yang berbeda.

Gambar 1. Menggunakan dimensi, tema, dan penskalaan font yang berbeda untuk melihat pratinjau fungsi yang dapat disusun

Seperti pada gambar 1, Anda dapat melihat beberapa pratinjau fungsi tertentu yang dapat disusun, masing-masing dengan batasan lebar dan tinggi, penskalaan font, atau tema yang berbeda. Saat mengembangkan aplikasi, mengubah resource, atau warna, pratinjau langsung akan diupdate untuk membantu Anda meninjau perubahan. Selain itu, Anda juga dapat mengklik elemen dalam pratinjau untuk beralih dengan cepat ke fungsi yang dapat disusun bagi elemen tersebut dalam editor kode.

Membuat pratinjau langsung dasar

Di bawah ini adalah contoh fungsi yang dapat disusun, yang disebut TutorialPreviewTemplate().

@Composable
fun TutorialPreviewTemplate(
    colors: MaterialColors = lightThemeColors,
    typography: MaterialTypography = themeTypography
) {
    val context = +ambient(ContextAmbient)
    val previewPosts = getPostsWithImagesLoaded(posts.subList(1, 2), context.resources)
    val post = previewPosts[0]
    MaterialTheme(colors = colors, typography = typography) {
        Surface {
            PostCardTop(post)
        }
    }
}

Untuk membuat pratinjau langsung, buat fungsi baru yang dapat disusun, yang tidak menggunakan parameter dan menyertakan anotasi @Preview sebelum @Composable, seperti di bawah ini:

/// This is the original composable function.
@Composable
fun TutorialPreviewTemplate( ... ) { ... }

// A new composable function that applies the @Preview annotation and does not
// take any parameters.
@Preview
@Composable
fun TutorialPreview() {
    // Call the composable function that you would like to
    // create a live preview for.
    TutorialPreviewTemplate()
}

Saat membuat atau mengubah pratinjau langsung, Anda harus membuat ulang project untuk melihat perubahannya. Untuk membuat ulang project, klik Build pada banner di bagian atas editor, atau pilih Build > Make Project dari panel menu.

Pratinjau langsung dasar dari fungsi yang dapat disusun.

Gambar 2. Pratinjau langsung dasar dari fungsi yang dapat disusun di Android Studio

Anda dapat membuat beberapa pratinjau langsung, yang muncul secara berdampingan di jendela Pratinjau IDE, seperti yang ditunjukkan di bawah ini. Cara ini berguna untuk membandingkan perilaku fungsi yang dapat disusun ini, misalnya ketika fungsi tersebut diberi argumen yang berbeda.

/// This is the original composable function.
@Composable
fun TutorialPreviewTemplate( ... ) { ... }

@Preview
@Composable
fun TutorialPreview() { ... }

// This live preview uses the app's dark theme.
@Preview
@Composable
fun TutorialPreviewDark() {
    // Although you can't pass arguments to the live preview function itself,
    // you can pass arguments to the composable function that it calls.
    TutorialPreviewTemplate(colors = darkThemeColors)
}

Pratinjau langsung menggunakan tema yang berbeda.

Gambar 3. Dua pratinjau langsung dari fungsi yang dapat disusun, masing-masing menggunakan tema yang berbeda

Meneruskan argumen ke anotasi @Preview

Anotasi @Preview memberikan parameter tertentu yang dapat Anda gunakan untuk mengubah cara IDE merender fungsi yang dapat disusun dalam jendela Preview. Misalnya, seperti di bawah ini, Anda dapat memberi nama pratinjau langsung dengan meneruskan sebuah string, yang dapat membantu Anda mengidentifikasi pratinjau langsung secara lebih baik.

// Pass a name for the preview to easily identify it in the Preview window.
@Preview("Default colors")
@Composable
fun TutorialPreview() {
    TutorialPreviewTemplate()
}

@Preview("Dark colors")
@Composable
fun TutorialPreviewDark() {
    TutorialPreviewTemplate(colors = darkThemeColors)
}

Parameter @Preview tambahan yang dapat menjadi tujuan untuk meneruskan argumen adalah:

  • widthDp: Lebar maksimal, diukur dalam piksel kepadatan mandiri (dp), yang dapat digunakan oleh IDE saat merender pratinjau langsung. Ini berguna saat Anda ingin melihat pratinjau fungsi yang dapat disusun pada layar yang ukurannya terbatas.
  • heightDp: Tinggi maksimal, diukur dalam dp, yang dapat digunakan oleh IDE saat merender pratinjau langsung. Ini berguna saat Anda ingin melihat pratinjau fungsi yang dapat disusun pada layar yang ukurannya terbatas.
  • fontScale: Faktor penskalaan, relatif terhadap penskalaan kepadatan dasar (1f), untuk font. Ini berguna saat Anda ingin menguji fungsi yang dapat disusun terhadap berbagai preferensi ukuran font pengguna.

Contoh di bawah menunjukkan cara mengubah faktor penskalaan default dan tinggi maksimal untuk pratinjau langsung.

@Preview("Font scaling 1.5, height 300", fontScale = 1.5f, heightDp = 300)
@Composable
fun TutorialPreviewFontscale() {
    TutorialPreviewTemplate()
}

Pratinjau langsung yang menggunakan penskalaan font dan tinggi maksimal yang diubah.

Gambar 4. Pratinjau langsung yang menggunakan penskalaan font dan tinggi maksimal yang diubah