Menambahkan Jetpack Compose ke aplikasi Anda

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

Menyiapkan lingkungan pengembangan

Menginstal versi Android Studio yang tepat

Untuk pengalaman terbaik dalam mengembangkan aplikasi dengan Jetpack Compose, Anda harus mendownload Android Studio, dan mengonfigurasi Plugin Android Gradle yang sesuai dengan versi Android Studio:

buildscript {
    ...
    dependencies {
        classpath "com.android.tools.build:gradle:7.0.0"
        ...
    }
}

Mengonfigurasi Kotlin

Pastikan Anda menggunakan Kotlin 1.6.10 dalam project:

plugins {
    id 'kotlin-android'
}

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 '1.1.1'
    }
}

Menambahkan dependensi toolkit Jetpack Compose

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

dependencies {
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.4.0'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.1.1'
    // Animations
    implementation 'androidx.compose.animation:animation:1.1.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.1.1'
}

Menggunakan kembali tema View di Compose

Jika baru saja menambahkan Compose ke project, Anda mungkin ingin Compose menggunakan kembali tema yang tersedia di sistem View, bukan menulis ulang tema Material Anda sendiri di Compose dari awal.

Jika menggunakan library MDC di aplikasi Android, libraryAdaptor Tema Compose MDC memungkinkan Anda mudah menggunakan kembali tema warna, tipografi, dan bentuk dari tema berbasis View yang ada dalam composable. Hal itu tercapai dengan menggunakan MdcTheme API.

Jika Anda menggunakan tema XML AppCompat, gunakan Adaptor Tema AppCompat Compose yang berisi AppCompatTheme API.

Sertakan dependensi yang Anda butuhkan dalam file build.gradle aplikasi, seperti yang ditunjukkan di bawah ini:

dependencies {
    // When using a MDC theme
    implementation "com.google.android.material:compose-theme-adapter:1.1.1"

    // When using a AppCompat theme
    implementation "com.google.accompanist:accompanist-appcompat-theme:0.16.0"
}

Memulai migrasi ke Compose

Bayangkan kita ingin memigrasikan teks salam pengguna ke Jetpack Compose dalam aplikasi kita. Konten berikut dapat dibuat dalam layout XML:

<...>
    <!-- Other content -->

    <TextView
        android:id="@+id/greeting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_small"
        android:layout_marginEnd="@dimen/margin_small"
        android:gravity="center_horizontal"
        android:text="@string/greeting"
        android:textAppearance="?attr/textAppearanceHeadline5"
        ... />
</...>

Untuk memigrasikannya ke Compose, kita dapat mengganti View dengan ComposeView, dengan mempertahankan parameter tata letak dan id yang sama:

<...>
    <!-- Other content -->

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/greeting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</...>

Kemudian, di Activity atau Fragment yang menggunakan tata letak XML tersebut, kita mendapatkan ComposeView dan memanggil metode setContent untuk menambahkan konten Compose ke dalamnya:

class MyActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // ...

        val greeting = findViewById<ComposeView>(R.id.greeting)
        greeting.setContent {
            MdcTheme { // or AppCompatTheme
                Greeting()
            }
        }
    }
}

@Composable
private fun Greeting() {
    Text(
        text = stringResource(R.string.greeting),
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = dimensionResource(R.dimen.margin_small))
            .wrapContentWidth(Alignment.CenterHorizontally)
    )
}

Untuk informasi ComposeView dan API interoperabilitas lainnya lebih lanjut, lihat panduan Interoperabilitas API. Untuk mempelajari lebih lanjut stringResource, dimensionResource, dan API resource lainnya di Compose, lihat panduan Resource di Compose.

Menguji UI hybrid

Setelah memigrasikan bagian aplikasi ke Compose, pengujian sangat penting dilakukan untuk memastikan Anda tidak merusak apa pun.

Saat aktivitas atau fragmen menggunakan Compose, daripada menggunakan ActivityScenarioRule, Anda harus menggunakan createAndroidComposeRule yang mengintegrasikan ActivityScenarioRule dengan ComposeTestRule yang memungkinkan Anda menguji kode Compose dan View secara bersamaan.

class MyActivityTest {
    @Rule
    @JvmField
    val composeTestRule = createAndroidComposeRule<MyActivity>()

    @Test
    fun testGreeting() {
        val greeting = InstrumentationRegistry.getInstrumentation()
            .targetContext.resources.getString(R.string.greeting)

        composeTestRule.onNodeWithText(greeting).assertIsDisplayed()
    }
}

Lihat panduan Menguji tata letak Compose Anda untuk mempelajari pengujian dan interoperabilitas dengan Espresso lebih lanjut.

Compose di arsitektur Anda

Compose mendukung sebagian besar arsitektur aplikasi dan menawarkan integrasi dengan banyak library populer lainnya. Oleh karena itu, Anda tidak perlu mengubah lapisan lain hierarki jika ingin mulai menggunakan Compose di aplikasi.

Cuplikan kode berikut menunjukkan cara kerja Compose dengan ViewModel Komponen Arsitektur menggunakan fungsi viewModel(), dan melakukan pengumpulan dari Flow Kotlin menggunakan collectAsState().

class MyActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyScreen()
        }
    }
}

@Composable
private fun MyScreen(
    viewModel: MyViewModel = viewModel()
) {
    val uiState by viewModel.uiState.collectAsState()
    when {
        uiState.isLoading -> { /* ... */ }
        uiState.isSuccess -> { /* ... */ }
        uiState.isError -> { /* ... */ }
    }
}

class MyViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(MyScreenState.Loading)
    val uiState: StateFlow<MyScreenState> = _uiState
}

Untuk integrasi lebih lanjut seperti pemuatan gambar, Paging, atau Hilt, lihat panduan Compose dan library lainnya.

Navigasi

Jika Anda menggunakan Komponen Navigation di aplikasi, lihat bagian Interoperabilitas panduan Menavigasi dengan Compose.

Langkah berikutnya

Informasi selengkapnya tentang Compose dapat ditemukan di indeks dokumentasi. Ada berbagai pendekatan untuk mengadopsi Compose di aplikasi, pelajari lebih lanjut di Panduan Mengadopsi Compose di aplikasi Anda yang juga terhubung ke panduan lain seperti Compose di arsitektur yang sudah ada dan Compose di UI yang sudah ada.