Tạo ứng dụng Birthday Card

1. Giới thiệu

Trong lớp học lập trình này, bạn sẽ tạo một ứng dụng Android đơn giản có khả năng hiển thị văn bản. Bạn có thể định vị văn bản trên màn hình bằng cách hiểu thêm về thành phần Giao diện người dùng (UI) trong Android.

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

• Cách tạo ứng dụng mới trong Android Studio.
• Cách chạy ứng dụng trong trình mô phỏng hoặc trên thiết bị Android.

Kiến thức bạn sẽ học được

• Ví dụ về phần tử giao diện người dùng: Views và ViewGroups.
• Cách hiển thị văn bản trong TextView trong một ứng dụng.
• Cách đặt thuộc tính, chẳng hạn như văn bản, phông chữ và lề trên TextView.

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

• Ứng dụng Android hiển thị lời chào sinh nhật ở định dạng văn bản.

Đây là giao diện của ứng dụng khi bạn hoàn tất.

Bạn cần có

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

2. Thiết lập ứng dụng Happy Birthday

Tạo dự án Hoạt động trống (Empty Activity)

1. Để bắt đầu, hãy tạo một dự án Kotlin mới trong Android Studio bằng mẫu Empty Activity (Hoạt động trống).
2. Đặt tên ứng dụng là "Happy Birthday" (Chúc mừng sinh nhật) với cấp độ API tối thiểu là 19 (KitKat).

Quan trọng: Nếu bạn chưa quen tạo dự án mới trong Android Studio, vui lòng xem phần Tạo và chạy ứng dụng Android đầu tiên để biết thông tin chi tiết.

3. Chạy ứng dụng. Ứng dụng sẽ giống như ảnh chụp màn hình dưới đây.

Khi bạn tạo ứng dụng Happy Birthday (Chúc mừng sinh nhật) này bằng mẫu Empty Activity (Hoạt động trống), Android Studio đã thiết lập tài nguyên cho ứng dụng Android cơ bản, bao gồm cả thông báo "Hello World!" ở giữa màn hình. Trong lớp học lập trình này, bạn sẽ tìm hiểu cách thông điệp này có mặt ở đó, cách thay đổi nội dung thông điệp để trở thành lời chào mừng sinh nhật, cũng như cách thêm và định dạng các thông điệp bổ sung.

Giới thiệu giao diện người dùng

Giao diện người dùng (UI) của một ứng dụng là những gì bạn thấy trên màn hình: văn bản, hình ảnh, nút lệnh và nhiều loại thành phần khác. Đó là cách ứng dụng hiển thị nội dung cho người dùng và cách người dùng tương tác với ứng dụng.

Mỗi phần tử trong số này được gọi là View. Hầu hết nội dung bạn thấy trên màn hình ứng dụng là một View. Views có thể mang tính tương tác, chẳng hạn như nút có thể nhấp hoặc trường nhập có thể chỉnh sửa.

Trong lớp học lập trình này, bạn sẽ làm việc với một loại View dùng để hiển thị văn bản và được gọi là TextView.

Views trong ứng dụng Android không chỉ tự nổi trên màn hình. Views có mối liên hệ với nhau. Ví dụ: hình ảnh có thể nằm cạnh văn bản và các nút có thể tạo thành một hàng. Để sắp xếp Views, hãy đưa chúng vào một vùng chứa. ViewGroup là một vùng chứa của các đối tượng View và chịu trách nhiệm sắp xếp Views bên trong đó. Cách sắp xếp hay còn gọi là bố cục có thể thay đổi tuỳ vào kích thước và tỷ lệ khung hình của màn hình thiết bị Android mà ứng dụng đang chạy và bố cục có thể điều chỉnh để thích hợp với thiết bị ở chế độ dọc hoặc ngang.

Một loại ViewGroup là ConstraintLayout, giúp bạn sắp xếp Views bên trong chúng theo cách linh hoạt.

Giới thiệu Layout Editor

Việc tạo giao diện người dùng bằng cách sắp xếp Views và ViewGroups là một phần quan trọng trong quá trình tạo Ứng dụng Android. Android Studio cung cấp một công cụ giúp bạn thực hiện việc này, được gọi là Layout Editor. Bạn sẽ sử dụng Layout Editor để thay đổi văn bản "Hello World!" thành "Happy Birthday" sau đó tạo kiểu cho văn bản.

Khi Layout Editor mở ra, nó sẽ có nhiều phần. Bạn sẽ tìm hiểu cách sử dụng hầu hết những thành phần đó trong lớp học lập trình này. Sử dụng ảnh chụp màn hình có chú thích bên dưới để giúp nhận dạng lại các cửa sổ trong Layout Editor. Bạn sẽ tìm hiểu thêm về từng phần trong quá trình thay đổi ứng dụng.

• Ở bên trái (1) là cửa sổ Project (Dự án) mà bạn đã thấy trước đó. Cửa sổ này liệt kê tất cả các tệp tạo nên dự án của bạn.
• Ở chính giữa, bạn có thể thấy 2 bản vẽ (4) và (5) thể hiện bố cục màn hình cho ứng dụng của bạn. Bản vẽ (4) ở bên trái là bố cục gần đúng của giao diện màn hình khi ứng dụng chạy. Nó được gọi là chế độ xem Design (Thiết kế).
• Bản vẽ bên phải (5) là chế độ xem Blueprint (Bản vẽ thiết kế), có thể hữu ích cho các thao tác cụ thể.
• Palette (Bảng khung hiển thị) (2) chứa các danh sách gồm các loại Views mà bạn có thể thêm vào ứng dụng.
• Component Tree (Cây thành phần) (3) là một cách trình bày khác về chế độ xem của màn hình. Component Tree liệt kê tất cả các chế độ xem của màn hình.
• Ở ngoài cùng bên phải (6) là các Attributes (Thuộc tính). Bảng này cho biết các thuộc tính của View và cho phép bạn thay đổi các thuộc tính đó.

Hãy đọc thêm về Layout Editor và cách định cấu hình Layout Editor trong hướng dẫn tham khảo dành cho nhà phát triển.

Ảnh chụp màn hình có chú thích của toàn bộ Layout Editor:

Hãy thực hiện một số thay đổi trong Layout Editor để làm cho ứng dụng của bạn giống với thiệp sinh nhật hơn!

Thay đổi tin nhắn Hello World

1. Trong Android Studio, hãy tìm cửa sổ Project (Dự án) ở bên trái.
2. Ghi lại những thư mục và tệp này: Thư mục app (ứng dụng) có hầu hết các tệp dành cho ứng dụng mà bạn sẽ thay đổi. Thư mục res là dành cho tài nguyên, chẳng hạn như hình ảnh hoặc bố cục màn hình. Thư mục layout (bố cục) là dành cho các bố cục màn hình. Tệp activity_main.xml chứa nội dung mô tả bố cục màn hình.
3. Mở rộng thư mục app, sau đó là thư mục res sau đó mở thư mục layout.
4. Nhấp đúp vào activity_main.xml. Thao tác này sẽ mở activity_main.xml trong Layout Editor và hiển thị bố cục mà nó mô tả trong chế độ xem Design.

5. Xem danh sách chế độ xem trong Component Tree (Cây thành phần). Lưu ý có ConstraintLayout và TextView bên dưới đó. Các mã này đại diện cho giao diện người dùng của ứng dụng. TextView thụt vào lề phải vì nó nằm trong ConstraintLayout. Khi bạn thêm Views vào ConstraintLayout, chúng sẽ được thêm vào danh sách này.
6. Lưu ý rằng TextView có dòng chữ "Hello World!" nằm kế bên. Đây là văn bản mà bạn sẽ thấy khi chạy ứng dụng.

7. Trong Component Tree (Cây thành phần), hãy nhấp vào TextView.
8. Tìm Attributes (Thuộc tính) ở bên phải.
9. Tìm mục Declared Attributes (Thuộc tính đã khai báo).
10. Lưu ý thuộc tính text (văn bản) trong phần Declared Attributes (Thuộc tính đã khai báo) chứa thông điệp Hello World!.

Thuộc tính text sẽ hiển thị văn bản được bên trong một TextView.

11. Nhấp vào thuộc tính text nơi có văn bản Hello World!.
12. Hãy thay đổi văn bản này để nói Hello Birthday! (Chúc mừng sinh nhật!), sau đó nhấn phím Enter. Nếu thấy cảnh báo về một chuỗi được cố định giá trị trong mã, thì bạn cũng đừng lo lắng về việc này. Bạn sẽ tìm hiểu cách loại bỏ cảnh báo đó trong lớp học lập trình tiếp theo.
13. Lưu ý rằng văn bản đã thay đổi trong Design View (Chế độ xem thiết kế).....(điều này thật tuyệt, bạn có thể thấy ngay những thay đổi mình đã thực hiện!)
14. Chạy ứng dụng. Giờ đây, ứng dụng sẽ hiển thị Happy Birthday! (Chúc mừng sinh nhật!)

Làm tốt lắm! Bạn đã thực hiện những thay đổi đầu tiên đối với một ứng dụng Android.

3. Thêm TextView vào bố cục

Thiệp sinh nhật bạn đang tạo trông khác so với thiệp hiện có trong ứng dụng. Thay vì thông điệp nhỏ ở giữa, bạn cần hai thông điệp lớn hơn, một ở góc trên bên trái và một ở góc dưới bên phải. Trong tác vụ này, bạn sẽ xoá TextView hiện có và thêm hai TextViews mới, đồng thời tìm hiểu cách đặt chúng trong ConstraintLayout.

Xoá TextView hiện tại

1. Trong Layout Editor, hãy nhấp để chọn TextView ở giữa bố cục.

2. Nhấn phím Delete. Android Studio sẽ xoá TextView và ứng dụng của bạn hiện chỉ hiển thị một ConstraintLayout trong Layout Editor và Component Tree (Cây thành phần).

Thêm Chế độ xem văn bản

Trong bước này, bạn sẽ thêm TextView vào phía trên bên trái của ứng dụng để yêu cầu lưu giữ lời chào sinh nhật.

Palette (Bảng chế độ xem) ở phía trên bên trái Layout Editor có chứa danh sách các loại Views khác nhau được sắp xếp theo danh mục và bạn có thể thêm vào ứng dụng của mình.

1. Tìm TextView. Nó hiển thị ở cả trong danh mục Common (Phổ biến) và danh mục Text (Văn bản).

2. Kéo TextView từ Palette (Bảng chế độ xem) lên bên trái phía trên của bề mặt thiết kế trong Layout Editor rồi thả nó. Bạn không cần chính xác, chỉ cần thả gần góc trên bên trái.

3. Lưu ý bạn đã thêm TextView và thấy một dấu chấm than đỏ trong Component Tree (Cây thành phần).
4. Di con trỏ qua dấu chấm than, bạn sẽ thấy một cảnh báo rằng khung hiển thị không bị ràng buộc và sẽ chuyển sang một vị trí khác khi bạn chạy ứng dụng. Bạn sẽ khắc phục lỗi đó trong bước tiếp theo.

Định vị Chế độ xem văn bản

Đối với thẻ sinh nhật, TextView cần phải ở gần góc trên bên trái và có một chút khoảng trống xung quanh. Để khắc phục cảnh báo, bạn sẽ thêm một số ràng buộc vào TextView, mã này chỉ dẫn ứng dụng của bạn cách định vị thông báo. Ràng buộc chỉ đường đi và giới hạn đối với vị trí của View trong bố cục.

Các ràng buộc bạn thêm vào trên và bên trái sẽ có lề. Lề xác định khoảng cách từ View đến cạnh của vùng chứa.

1. Trong Attributes (Thuộc tính) ở bên phải, hãy tìm Constraint Widget (Tiện ích ràng buộc) trong mục Layout (Bố cục). Hình vuông biểu thị chế độ xem của bạn.

2. Nhấp vào dấu + ở đầu hình vuông. Thao tác này dành cho ràng buộc giữa phần đầu của chế độ xem văn bản và cạnh trên của bố cục ràng buộc.
3. Một trường có số xuất hiện để đặt lề trên. Lề là khoảng cách từ TextView đến cạnh của vùng chứa ConstraintLayout. Số bạn thấy sẽ khác, tuỳ thuộc vào nơi bạn thả TextView. Khi đặt lề trên, Android Studio cũng sẽ tự động thêm một ràng buộc từ đầu chế độ xem văn bản lên đầu ConstraintLayout.

4. Thay đổi lề trên cùng thành 16.

5. Làm tương tự với lề trái.

6. Đặt text (văn bản) để chúc mừng sinh nhật người bạn của bạn, ví dụ "Happy Birthday, Sam!" (Chúc mừng sinh nhật, Sam!) sau đó nhấn phím Enter.

7. Lưu ý chế độ xem Design (Thiết kế) sẽ cập nhật để hiển thị giao diện của ứng dụng.

Thêm và định vị một Chế độ xem văn bản khác

Thẻ sinh nhật của bạn cần dòng văn bản thứ hai ở gần góc dưới cùng bên phải. Bạn sẽ thêm dòng này ở bước này theo cách tương tự như trong tác vụ trước đó. Bạn nghĩ lề của TextView này nên như thế nào?

1. KéoTextView mới từPalette (Bảng chế độ xem) và thả nó vào gần phía dưới cùng bên phải của chế độ xem ứng dụng trong Layout Editor.

2. Đặt lề phải là 16.
3. Đặt lề dưới là 16.

4. Trong Attributes (Thuộc tính), hãy đặt thuộc tính text (văn bản) để ký thiệp của bạn, ví dụ: "From Emma" (Từ Emma).
5. Chạy ứng dụng. Bạn sẽ thấy ngày sinh của mình ở phía trên bên trái và chữ ký của bạn ở phía dưới bên phải.

Xin chúc mừng! Bạn đã thêm và định vị một số thành phần giao diện người dùng trong ứng dụng của mình.

4. Thêm kiểu cho văn bản

Bạn đã thêm văn bản vào giao diện người dùng, nhưng văn bản này có vẻ chưa giống hoàn toàn với ứng dụng cuối cùng. Trong nhiệm vụ này, bạn sẽ tìm hiểu cách thay đổi kích thước, màu văn bản và các thuộc tính khác có ảnh hưởng đến giao diện của TextView. Bạn cũng có thể thử nghiệm các phông chữ khác nhau.

1. Nhấp vào TextView đầu tiên trong Component Tree (Cây thành phần) và tìm phần Common Attributes (Thuộc tính chung) của cửa sổ Attributes (Thuộc tính). Bạn có thể phải kéo xuống mới thấy tuỳ chọn này.
2. Lưu ý các thuộc tính khác nhau, bao gồm fontFamily, textSize và textColor.

3. Tìm textAppearance.
4. Nếu textAppearance không được mở rộng, hãy nhấp vào hình tam giác hướng xuống.
5. Trong textSize, hãy đặt textSize thành 36sp.

6. Hãy lưu ý sự thay đổi trong Layout Editor.

7. Thay đổi fontFamily thành casual.
8. Hãy thử một số phông chữ khác để xem hình thức hiển thị của chúng. Bạn có thể tìm thấy nhiều lựa chọn hơn về phông chữ ở cuối danh sách, trong mục More Fonts… (Thêm phông chữ…)
9. Khi bạn thử xong các phông chữ khác, hãy đặt fontFamily thành sans-serif-light.
10. Nhấp vào hộp chỉnh sửa của thuộc tính textColor và bắt đầu nhập black (đen). Lưu ý khi nhập, Android Studio sẽ hiển thị một danh sách các màu có chứa văn bản mà bạn đã nhập.

11. Chọn @android:color/black từ danh sách các màu và nhấn phím Enter.
12. Trong TextView có chữ ký của bạn, hãy thay đổi các thuộc tính textSize, textColor và fontFamily sao cho khớp.
13. Hãy chạy chương trình của bạn và xem kết quả.

Xin chúc mừng! Bạn đã thực hiện các bước đầu tiên để tạo ứng dụng Birthday Card!

5. Giải pháp

1. Chuyển đến trang kho lưu trữ GitHub được cung cấp cho dự án.
2. Xác minh rằng tên nhánh khớp với tên nhánh được chỉ định trong lớp học lập trình. Ví dụ: trong ảnh chụp màn hình sau đây, tên nhánh là main.

3. Trên trang GitHub cho dự án này, nhấp vào nút Code (Mã). Thao tác này sẽ khiến một cửa sổ bật lên.

4. Trong cửa sổ bật lên, nhấp vào nút Download ZIP (Tải tệp ZIP xuống) để lưu dự án vào máy tính. Chờ quá trình tải xuống hoàn tất.
5. Xác định vị trí của tệp trên máy tính (thường nằm trong thư mục Downloads (Tệp đã tải xuống)).
6. Nhấp đúp vào tệp ZIP để giải nén. Thao tác này sẽ tạo một thư mục mới chứa các tệp dự án.

Mở dự án trong Android Studio

1. Khởi động Android Studio.
2. Trong cửa sổ Welcome to Android Studio (Chào mừng bạn đến với Android Studio), hãy nhấp vào Open (Mở).

Lưu ý: Nếu Android Studio đã mở thì chuyển sang chọn tuỳ chọn File (Tệp) > Open (Mở) trong trình đơn.

3. Trong trình duyệt tệp, hãy chuyển đến vị trí của thư mục dự án chưa giải nén (thường nằm trong thư mục Downloads (Tệp đã tải xuống)).
4. Nhấp đúp vào thư mục dự án đó.
5. Chờ Android Studio mở dự án.
6. Nhấp vào nút Run (Chạy) để tạo bản dựng và chạy ứng dụng. Đảm bảo ứng dụng được xây dựng như mong đợi.

6. Tóm tắt

• Layout Editor giúp bạn tạo giao diện người dùng cho ứng dụng Android.
• Hầu hết nội dung bạn thấy trên màn hình ứng dụng là một View.
• TextView là một thành phần trên giao diện người dùng để hiển thị văn bản trong ứng dụng.
• ConstraintLayout là vùng chứa cho các phần tử giao diện người dùng khác.
• Views cần được giới hạn theo chiều ngang và chiều dọc trong ConstraintLayout.
• Một cách để định vị View là sử dụng lề.
• Lề cho biết khoảng cách từ View là từ cạnh của vùng chứa mà nó nằm trong.
• Bạn có thể đặt thuộc tính trên TextView như phông chữ, kích thước văn bản và màu sắc.

7. Tìm hiểu thêm

• Từ vựng cho khoá học Khái niệm cơ bản về Kotlin trên Android
• View
• TextView
• ConstraintLayout
• dp so với sp
• Layout Editor trong Android Studio