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.