Bắt đầu nhanh

Để có trải nghiệm tốt nhất khi phát triển bằng Compose, hãy tải Android Studio xuống và cài đặt. Android Studio có nhiều tính năng trình chỉnh sửa thông minh, chẳng hạn như mẫu dự án mới và tính năng xem trước ngay giao diện người dùng cũng như ảnh động của Compose.

Tải Android Studio

Hãy làm theo hướng dẫn dưới đây để tạo dự án về ứng dụng Compose mới, thiết lập Compose cho một dự án ứng dụng hiện có, hoặc nhập một ứng dụng mẫu được viết bằng Compose.

Tạo ứng dụng mới có hỗ trợ Compose

Nếu bạn muốn bắt đầu một dự án mới có hỗ trợ Compose theo mặc định, thì Android Studio sẽ cung cấp các mẫu dự án mới để giúp bạn bắt đầu. Để tạo một dự án mới có thiết lập Compose chính xác, hãy tiến hành như sau:

1. Nếu bạn đang ở cửa sổ Chào mừng bạn đến với Android Studio (Welcome to Android Studio), vui lòng nhấp vào nút Bắt đầu dự án Android Studio mới (Start a new Android Studio project). Nếu bạn đã mở một dự án Android Studio, hãy chọn Tệp > Mới > Dự án mới (File > New > New Project) trong thanh trình đơn.
2. Trong cửa sổ Select a Project Template (Chọn mẫu dự án), hãy chọn Empty Compose Activity (Hoạt động trống trong Compose) rồi nhấp vào Next (Tiếp theo).
3. Trong cửa sổ Configure your project (Định cấu hình dự án của bạn), hãy làm như sau:
   1. Đặt Name, Package name (Tên, Tên gói) và Save location (Vị trí lưu) như bình thường. Lưu ý rằng trong trình đơn thả xuống Language (Ngôn ngữ), Kotlin là tuỳ chọn duy nhất được cung cấp vì Jetpack Compose chỉ hoạt động với các lớp được viết bằng Kotlin.
   2. Trong trình đơn thả xuống Minimum API level (Cấp độ API tối thiểu), hãy chọn API cấp 21 trở lên.
4. Nhấp vào Finish (Hoàn tất).

Giờ đây, bạn đã sẵn sàng bắt đầu phát triển một ứng dụng bằng Jetpack Compose. Để giúp bạn bắt đầu và tìm hiểu những việc bạn có thể làm với bộ công cụ này, hãy xem bài viết Hướng dẫn về Jetpack Compose.

Thiết lập Compose cho ứng dụng hiện có

Để bắt đầu sử dụng Compose, trước tiên, bạn cần thêm một số cấu hình bản dựng vào dự án. Thêm phần khai báo sau vào tệp build.gradle của ứng dụng:

Groovy

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.4.2"
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.4.2"
    }
}

Một số điều cần lưu ý:

• Việc thiết lậpp cờ compose thành true bên trong khối BuildFeatures của Android sẽ bật chức năng Compose.
• Phiên bản tiện ích Trình biên dịch Kotlin được xác định trong khối ComposeOptions sẽ được liên kết với phiên bản Kotlin tương ứng. Hãy nhớ tham khảo Bản đồ về khả năng tương thích và chọn một phiên bản thư viện phù hợp với phiên bản Kotlin của dự án.

Ngoài ra, hãy thêm Bảng kê khai thành phần của Compose và tập hợp con gồm các phần phụ thuộc của thư viện Compose mà bạn cần vào các phần phụ thuộc trong khối bên dưới:

Groovy

dependencies {

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

}

Lưu ý: Jetpack Compose được chuyển bằng Bảng kê khai thành phần (BOM) nhằm đồng bộ hoá các phiên bản của tất cả nhóm thư viện. Hãy đọc thêm về vấn đề này trong trang Bảng kê khai thành phần.

Dùng thử các ứng dụng mẫu trong Jetpack Compose

Cách nhanh nhất để thử nghiệm các khả năng của Jetpack Compose là dùng thử các ứng dụng mẫu trong Jetpack Compose được lưu trữ trên GitHub. Để nhập dự án ứng dụng mẫu từ Android Studio, hãy tiến hành như sau:

1. Nếu bạn đang ở cửa sổ Chào mừng bạn đến với Android Studio (Welcome to Android Studio), hãy chọn Nhập mã mẫu Android (Import an Android code sample). Nếu bạn đã mở một dự án Android Studio, hãy chọn File > New > Import Sample (Tệp > Mới > Nhập mẫu) trong thanh trình đơn.
2. Trong thanh tìm kiếm gần phía trên cùng của trình hướng dẫn Browse Samples (Duyệt qua mẫu), hãy nhập "Compose".
3. Chọn một trong những ứng dụng mẫu Jetpack Compose từ kết quả tìm kiếm và nhấp vào Tiếp theo (Next).
4. Thay đổi Application name (Tên ứng dụng) và Project location (Vị trí dự án) hoặc giữ nguyên giá trị mặc định.
5. Nhấp vào Finish (Hoàn tất).

Android Studio tải ứng dụng mẫu xuống đường dẫn mà bạn chỉ định rồi mở dự án. Sau đó, bạn có thể kiểm tra MainActivity.kt thuộc mỗi ví dụ để xem các API của Jetpack Compose, chẳng hạn như ảnh động chuyển đổi, các thành phần tuỳ chỉnh, bằng cách sử dụng kiểu chữ và hiển thị màu sáng cũng như tối ở chế độ xem trước trong IDE.

Để dùng Jetpack Compose cho Wear OS, hãy xem phần Thiết lập Jetpack Compose trên Wear OS.