Tạo ứng dụng Android đầu tiên của bạn

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

1. Trước khi bạn bắt đầu

Trong lớp học lập trình này, bạn sẽ tạo ứng dụng Android đầu tiên bằng mẫu dự án do Android Studio cung cấp. Bạn dùng Kotlin và Jetpack Compose để tùy chỉnh ứng dụng. Lưu ý rằng Android Studio sẽ được cập nhật và đôi khi có sự thay đổi về giao diện người dùng. Do đó, nếu giao diện Android Studio của bạn hơi khác so với ảnh chụp màn hình trong lớp học lập trình này thì cũng là điều bình thường.

Điều kiện tiên quyết

  • Kiến thức cơ bản về Kotlin.

Bạn cần có

  • Phiên bản mới nhất của Android Studio

Nội dung bạn sẽ tìm hiểu

  • Cách tạo ứng dụng Android bằng Android Studio
  • Cách chạy ứng dụng bằng Công cụ xem trước trong Android Studio
  • Cách cập nhật văn bản bằng Kotlin
  • Cách cập nhật Giao diện người dùng (UI) bằng Jetpack Compose
  • Cách xem trước ứng dụng bằng tính năng Xem trước trong Jetpack Compose

Sản phẩm bạn sẽ tạo ra

  • Một ứng dụng cho phép bạn tùy chỉnh phần giới thiệu của mình!

Đây là giao diện của ứng dụng khi bạn hoàn thành lớp học lập trình này (ngoại trừ việc ứng dụng sẽ được tùy chỉnh theo tên của bạn!):

Hình ảnh này hiển thị một bản xem trước mặc định có văn bản "Hi, my name is Meghan!" (Xin chào, tên tôi là Meghan!) có nền màu hồng đậm và khoảng đệm ở xung quanh.

Bạn cần có

  • Một máy tính đã cài đặt Android Studio.

2. Xem video tập lập trình (Không bắt buộc)

Nếu bạn muốn xem một trong những người hướng dẫn của khóa học hoàn thành lớp học lập trình, hãy phát video bên dưới.

Bạn nên mở rộng video ra toàn màn hình (có biểu tượng Biểu tượng này hiển thị 4 góc trên một hình vuông được làm nổi bật để biểu thị chế độ toàn màn hình. ở góc dưới bên phải của video). Nhờ đó, bạn có thể nhìn thấy Android Studio và mã rõ ràng hơn.

Bước này là bước không bắt buộc. Bạn cũng có thể bỏ qua video này và bắt đầu tham gia lớp học lập trình ngay.

3. Tạo một dự án bằng mẫu

Trong lớp học lập trình này, bạn sẽ tạo một ứng dụng Android bằng mẫu dự án Empty Compose Activity (Hoạt động trống trong Compose) do Android Studio cung cấp.

Cách tạo dự án trong Android Studio:

  1. Nhấp đúp vào biểu tượng Android Studio để chạy Android Studio.

Hình ảnh này hiển thị biểu trưng của Android Studio.

  1. Trong hộp thoại Welcome to Android Studio (Chào mừng bạn đến với Android Studio), hãy nhấp vào New Project (Dự án mới).

Hình ảnh này là trang mở đầu của Android Studio

Cửa sổ New Project (Dự án mới) sẽ mở ra một danh sách mẫu do Android Studio cung cấp.

Hình ảnh này hiển thị cửa sổ New project (Dự án mới), bao gồm các mẫu để tạo ứng dụng cho điện thoại và máy tính bảng, Wear OS, Android TV và Automotive.

Trong Android Studio, mẫu dự án là một dự án Android cung cấp bản thiết kế cho một loại ứng dụng nhất định. Các mẫu tạo ra cấu trúc của dự án và các tệp cần thiết để Android Studio tạo dự án của bạn. Dựa trên mẫu bạn chọn, mẫu sẽ cung cấp mã nguồn khởi tạo để giúp bạn bắt đầu nhanh hơn.

  1. Đảm bảo bạn đã chọn thẻ Phone and Tablet (Điện thoại và máy tính bảng).
  2. Nhấp vào mẫu Empty Compose Activity (Hoạt động trống trong Compose) để chọn mẫu đó cho dự án của bạn. Mẫu Empty Compose Activity (Hoạt động trống trong Compose) là mẫu dùng để tạo một dự án đơn giản mà bạn có thể dùng để tạo ứng dụng Compose. Mẫu này có một màn hình và hiển thị văn bản "Hello Android!".
  3. Nhấp vào Next (Tiếp theo). Hộp thoại New Project (Dự án mới) sẽ mở ra. Hộp thoại này có một số trường để định cấu hình dự án.
  4. Định cấu hình dự án như sau:

Trường Name (Tên) dùng để nhập tên dự án cho loại lớp học lập trình "Thiệp chúc mừng" này.

Giữ nguyên trường Package name (Tên gói). Đây là cách sắp xếp các tệp trong cấu trúc tệp. Trong trường hợp này, tên gói sẽ là com.example.greetingcard.

Giữ nguyên trường Save location (Vị trí lưu). Trường này chứa vị trí mà bạn lưu tất cả các tệp liên quan đến dự án. Ghi lại vị trí của tệp trên máy tính để bạn có thể tìm thấy các tệp của mình.

Kotlin đã được chọn trong trường Language (Ngôn ngữ). Trường Language (Ngôn ngữ) xác định ngôn ngữ lập trình bạn muốn dùng cho dự án của mình. Vì Compose chỉ tương thích với Kotlin nên bạn không thể thay đổi trường này.

Chọn API 21: Android 5.0 (Lollipop) từ trình đơn trong trường Minimum SDK (SDK tối thiểu). SDK tối thiểu cho biết phiên bản Android tối thiểu mà ứng dụng của bạn có thể chạy trên đó.

Bạn đã bỏ chọn hộp đánh dấu Use legacy android.support libraries (Dùng thư viện android.support cũ).

d22bfe6ae8de4147.png

  1. Nhấn vào Finish (Hoàn tất). Quá trình này có thể mất chút thời gian. Bạn có thể tranh thủ thưởng thức một tách trà trong lúc chờ đợi! Trong khi Android Studio đang thiết lập, thông báo và thanh tiến trình sẽ cho biết liệu Android Studio có vẫn đang thiết lập dự án của bạn hay không. Thông báo có thể như sau:

Hình ảnh này hiển thị một thanh tiến trình đang quay và văn bản "2 processes running…" (2 quá trình đang chạy…).

Một thông báo trông giống thông báo này cho bạn biết thời điểm thiết lập dự án.

Hình ảnh này hiển thị thông báo đồng bộ hóa Gradle có văn bản "Gradle sync finished in 44s 546 ms" (Quá trình đồng bộ hóa Gradle đã hoàn thành trong 44 giây 546 mili giây).

  1. Bạn có thể thấy ngăn What's New (Tính năng mới) chứa thông tin cập nhật về các tính năng mới trong Android Studio. Bây giờ, hãy đóng ngăn này.

Hình ảnh này hiển thị ngăn What's New (Tính năng mới), ngăn này cung cấp thông tin về các bản cập nhật trong Android Studio.

  1. Nhấp vào Split (Phân tách) ở trên cùng bên phải của Android Studio. Như vậy, bạn có thể xem cả mã và bản thiết kế. Bạn cũng có thể nhấp vào Code (Mã) để chỉ xem mã hoặc nhấp vào Design (Bản thiết kế) để chỉ xem bản thiết kế.

b19824b6bdd2eb0e.png

Sau khi nhấn vào Split (Phân tách), bạn sẽ thấy 3 khu vực:

1dd07c51c7fff62c.png

  • Chế độ xem Project (Dự án) (1) hiện các tệp và thư mục trong dự án của bạn
  • Chế độ xem (2) là nơi bạn chỉnh sửa mã
  • Chế độ xem Thiết kế (3) là nơi bạn xem trước giao diện ứng dụng của mình.

Ở chế độ xem Thiết kế, bạn sẽ thấy một ngăn trống có văn bản sau:

Ngăn này có văn bản "A successful build is needed before the preview can be displayed" (Cần phải có một bản dựng thành công để có thể hiện bản xem trước) trên một dòng và văn bản "Build and Refresh" (Tạo và làm mới) trên dòng bên dưới.

  1. Nhấp vào Build & Refresh (Tạo và làm mới). Quá trình tạo có thể mất một chút thời gian. Tuy nhiên, khi quá trình này hoàn tất, bản xem trước sẽ hiện hộp văn bản có nội dung "Hello Android!" (Xin chào Android!). Hoạt động trống trong Compose chứa tất cả các mã cần thiết để tạo ứng dụng này.

Hình ảnh này hiển thị một Bản xem trước mặc định có văn bản "Hello Android!" (Xin chào Android!).

4. Tìm tệp dự án

Trong phần này, bạn sẽ tiếp tục khám phá Android Studio bằng cách làm quen với cấu trúc tệp.

  1. Trong Android Studio, hãy xem thẻ Project (Dự án). Thẻ Project (Dự án) hiện các tệp và thư mục trong dự án của bạn. Khi bạn thiết lập dự án, tên gói là com.example.greetingcard. Bạn có thể xem gói đó ngay tại thẻ Project (Dự án). Về cơ bản, gói là một thư mục chứa mã. Android Studio sắp xếp dự án theo một cấu trúc thư mục gồm các gói.
  2. Nếu cần, hãy chọn Android từ trình đơn thả xuống trong thẻ Project (Dự án).

Hình ảnh này hiển thị thẻ Project (Dự án), trong đó trình đơn Android được chọn.

Đây là cách sắp xếp và chế độ xem chuẩn đối với các tệp mà bạn sử dụng. Những thông tin này sẽ hữu ích khi bạn viết mã cho dự án của mình vì bạn có thể dễ dàng truy cập vào các tệp mà bạn đang làm việc trong ứng dụng. Tuy nhiên, nếu bạn xem các tệp trong trình duyệt tệp, chẳng hạn như Finder hoặc Windows Explorer, thì thứ bậc tệp được sắp xếp rất khác.

  1. Chọn Project Source Files (Tệp nguồn dự án) từ trình đơn thả xuống. Giờ đây, bạn có thể duyệt qua các tệp theo cách tương tự như trong mọi trình duyệt tệp.

Hình ảnh này hiển thị thẻ Project (Dự án), trong đó trình đơn Project Source Files (Tệp nguồn dự án) được chọn.

  1. Chọn Android một lần nữa để quay lại chế độ xem trước. Bạn sử dụng chế độ xem Android cho khóa học này. Nếu cấu trúc tệp của bạn trông có vẻ lạ, hãy kiểm tra để đảm bảo bạn vẫn đang ở chế độ xem Android.

5. Cập nhật văn bản

Vậy là bạn đã làm quen với Android Studio. Đã đến lúc bắt đầu tạo thiệp chúc mừng!

Nhìn vào chế độ xem Code (Mã) của tệp MainActivity.kt. Lưu ý rằng có một số hàm được tạo tự động trong mã này, cụ thể là các hàm onCreate()setContent().

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   Greeting("Android")
               }
           }
       }
   }
}

Hàm onCreate() là điểm truy cập đến ứng dụng này và gọi các hàm khác để tạo giao diện người dùng. Trong các chương trình Kotlin, hàm main() là vị trí cụ thể trong mã của bạn, nơi trình biên dịch Kotlin bắt đầu. Trong các ứng dụng Android, hàm onCreate() sẽ thực hiện vai trò đó.

Hàm setContent() trong hàm onCreate() dùng để xác định bố cục của bạn thông qua các hàm có khả năng kết hợp. Tất cả các hàm được đánh dấu bằng chú thích @Composable có thể được gọi từ hàm setContent() hoặc từ các hàm khác có khả năng kết hợp. Chú thích này sẽ cho trình biên dịch Kotlin biết rằng hàm này được Jetpack Compose dùng để tạo giao diện người dùng.

Tiếp theo, hãy xem hàm Greeting(). Hàm Greeting() là một hàm có khả năng kết hợp. Hãy chú ý chú thích @Composable phía trên hàm đó. Hàm có khả năng kết hợp lấy một số thông tin đầu vào và tạo ra nội dung hiển thị trên màn hình.

@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

Bạn đã tìm hiểu về các hàm trước đây (nếu bạn cần ôn lại, hãy truy cập vào phần Tạo và sử dụng các hàm trong lớp học lập trình Kotlin). Tuy nhiên, các hàm này có một vài điểm khác biệt với những hàm có khả năng kết hợp.

67e3f969c53e7149.png

  • Tên hàm @Composable được viết hoa.
  • Bạn thêm chú thích @Composable trước hàm.
  • Các hàm @Composable không thể trả về bất kỳ giá trị nào.
@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

Hiện tại, hàm Greeting() lấy một tên và hiển thị Hello cho người đó.

  1. Cập nhật hàm Greeting() để tự giới thiệu bản thân thay vì nói "Xin chào":
@Composable
fun Greeting(name: String) {
   Text(text = "Hi, my name is $name!")
}
  1. Tạo lại DefaultPreview bằng cách nhấn vào nút 2c3d9b02e673771c.png ở trên cùng bên trái của ngăn thiết kế:

Hình ảnh này hiển thị một Bản xem trước mặc định có văn bản "Hi, my name is Android!" (Xin chào, tên tôi là Android!).

Tuyệt! Bạn đã thay đổi văn bản đó, nhưng văn bản đó giới thiệu bạn là Android. Có thể đây không phải là tên bạn. Tiếp theo, bạn sẽ tùy chỉnh văn bản này để giới thiệu tên mình!

Hàm DefaultPreview() là một tính năng thú vị cho phép bạn xem giao diện ứng dụng của mình mà không cần phải tạo toàn bộ ứng dụng. Để tạo hàm Xem trước, bạn cần thêm chú thích @Preview.

Như bạn có thể thấy, chú thích @Preview lấy một thông số có tên là showBackground. Nếu bạn đặt showBackground thành true, (đúng) thì chế độ này sẽ thêm nền vào bản xem trước ứng dụng của bạn.

Vì theo mặc định, Android Studio sử dụng giao diện sáng cho trình chỉnh sửa nên có thể khó nhận ra sự khác biệt giữa showBackground = true (đúng) và showBackground = false (sai). Tuy nhiên, đây là điểm khác biệt với giao diện tối. Hãy lưu ý nền trắng trên hình ảnh được đặt thành true (đúng).

Hình ảnh này hiển thị 2 văn bản "Hello Android" (Xin chào Android), văn bản bên trên có phông chữ màu đen trên nền trắng, văn bản bên dưới có phông chữ màu đen trên nền tối.

  1. Cập nhật tên của bạn cho hàm DefaultPreview(). Sau đó, tạo lại và xem thiệp chúc mừng dành riêng cho bạn!
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

Hình ảnh này hiển thị một Bản xem trước mặc định có văn bản "Hi, my name is Meghan!" (Xin chào, tên tôi là Meghan!).

6. Thay đổi màu nền văn bản

Bây giờ, bạn đã có văn bản giới thiệu, nhưng hình thức chưa cuốn hút lắm! Trong phần này, bạn sẽ tìm hiểu cách thay đổi màu nền.

Để đặt màu nền khác cho phần giới thiệu, bạn cần bao quanh văn bản bằng Surface. Surface là một vùng chứa đại diện cho một phần trên giao diện người dùng để bạn có thể thay đổi giao diện, chẳng hạn như màu nền hoặc đường viền.

  1. Để bao quanh văn bản bằng Surface, hãy đánh dấu văn bản đó, nhấn (Alt+Enter đối với Windows hoặc Option+Enter trên máy Mac), sau đó chọn Surround with widget (Bao quanh bằng tiện ích).

Hình ảnh này hiển thị thành phần Text (Văn bản) được làm nổi bật và tùy chọn "Surround with widget" (Bao quanh bằng tiện ích) được chọn trong trình đơn bên dưới.

  1. Chọn Bao quanh bằng vùng chứa.

78e713bc774d05b1.png

Vùng chứa mặc định cho sẵn là Box, nhưng bạn có thể thay đổi tùy chọn này thành một loại vùng chứa khác.

9fbdb58d26bd577a.png

  1. Xóa Box rồi nhập Surface().
@Composable
fun Greeting(name: String) {
   Surface() {
       Text(text = "Hi, my name is $name!")
   }
}
  1. Vùng chứa Surface có tham số color, hãy đặt tham số đó thành Color.
@Composable
fun Greeting(name: String) {
   Surface(color = Color) {
       Text(text = "Hi, my name is $name!")
   }
}
  1. Khi nhập Màu, bạn có thể nhận thấy màu đó có màu đỏ và được gạch dưới. Để giải quyết thao tác cuộn này lên đầu tệp, hãy nhấn vào nút nhập và biểu tượng ba nút.

Hình ảnh này hiển thị câu lệnh nhập ở đầu MainActivity.kt.

  1. Thêm câu lệnh này vào cuối danh sách nhập.
import androidx.compose.ui.graphics.Color

Danh sách đầy đủ các mục nhập sẽ có dạng như sau:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.GreetingCard
import androidx.compose.ui.graphics.Color
  1. Trong mã của bạn, phương pháp hay nhất là đảm bảo dữ liệu nhập được liệt kê theo thứ tự bảng chữ cái. Để thực hiện việc này, hãy nhấn vào mục Trợ giúp trên thanh công cụ trên cùng, nhập Tối ưu hóa lệnh nhập và nhấp vào Tối ưu hóa lệnh nhập.

Hình ảnh này hiển thị cách tìm các lệnh Nhập từ Optimize

Danh sách đầy đủ các lệnh nhập sẽ giống như sau:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.MyApplicationTheme
  1. Lưu ý là Màu sắc bạn nhập trong ngoặc đơn Surface đã chuyển từ màu đỏ và được gạch dưới thành màu đỏ. Để khắc phục vấn đề này, hãy thêm một dấu chấm sau nó. Bạn sẽ thấy một cửa sổ bật lên hiển thị các tùy chọn màu.

Đây là một trong những tính năng thú vị trong Android Studio. Tính năng này rất thông minh và sẽ giúp ích cho bạn. Trong trường hợp này, hệ thống biết rằng bạn muốn chỉ định một màu, do đó, sẽ đề xuất nhiều màu.

Hình ảnh mã này cho thấy Surface chấp nhận đối số Color (Màu). Bên cạnh Color (Màu) có một dấu chấm, bên dưới là trình đơn gồm tên của nhiều màu.

  1. Chọn một màu cho Surface. Lớp học lập trình sử dụng màu hồng đậm, nhưng bạn có thể chọn màu mình thích!
@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!")
   }
}
  1. Nhấp vào Build & Refresh (Tạo và làm mới). Vậy là văn bản có màu nền như màu bạn chọn!

Hình ảnh này hiển thị một Bản xem trước mặc định có văn bản "Hi, my name is Meghan!" (Xin chào, tên tôi là Meghan!) có nền màu hồng đậm.

7. Thêm khoảng đệm

Giờ đây, văn bản đã có màu nền. Tiếp theo, bạn sẽ thêm một số khoảng trống (khoảng đệm) xung quanh văn bản này.

Modifier được dùng để làm nổi bật hoặc trang trí cho một yếu tố có thể kết hợp. Một hệ số sửa đổi bạn có thể sử dụng là hệ số sửa đổi padding. Hệ số này áp dụng không gian xung quanh phần tử (trong trường hợp này là thêm không gian xung quanh văn bản). Bạn có thể thực hiện việc này bằng cách sử dụng hàm Modifier.padding().

  1. Thêm các lệnh nhập này vào phần câu lệnh nhập.

Hãy nhớ sử dụng chế độ Tối ưu hóa lệnh nhập để sắp xếp thứ tự các dữ liệu nhập mới.

import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding
  1. Thêm một hệ số sửa đổi khoảng đệm vào văn bản có kích thước 24.dp, nhấp vào Build & Refresh (Tạo và làm mới).
@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

Hình ảnh này hiển thị một Bản xem trước mặc định có văn bản "Hi, my name is Meghan!" (Xin chào, tên tôi là Meghan!) có nền màu hồng đậm và khoảng đệm ở xung quanh.

Xin chúc mừng! Bạn đã tạo ứng dụng Android đầu tiên của mình trong Compose! Đây là một thành tựu khá lớn. Hãy dành thời gian để thử nhiều màu và văn bản, tùy chỉnh theo cách riêng của bạn!

8. Xem lại mã giải pháp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.GreetingCardTheme

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container that uses the 'background' color from the theme
               Surface(color = MaterialTheme.colors.background) {
                   Greeting("Android")
               }
           }
       }
   }
}

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

9. Kết luận

Bạn đã tìm hiểu về Android Studio và tạo ứng dụng Android đầu tiên bằng Compose. Bạn làm tốt lắm!

Tóm tắt

  • Cách tạo một dự án mới: Mở Android Studio, nhấp vào New Project > Empty Compose Activity > Next (Dự án mới > Hoạt động trống trong Compose > Tiếp theo), nhập tên cho dự án rồi định cấu hình các chế độ cài đặt của dự án đó.
  • Để xem giao diện ứng dụng của bạn, hãy sử dụng ngăn Preview (Xem trước).
  • Hàm có khả năng kết hợp giống như hàm thông thường nhưng có một số điểm khác biệt: tên hàm được viết hoa, bạn thêm chú thích @Composable trước hàm, các hàm @Composable không thể trả về bất kỳ giá trị nào.
  • Modifier được dùng để làm nổi bật hoặc trang trí cho yếu tố có thể kết hợp.

Tìm hiểu thêm