Trong bài viết trước, chúng ta đã cùng tạo ra ứng dụng Android đầu tiên trong môi trường Android Studio 3.X (tức là Android Studio 3.0 trở lên). Trong bài này, chúng ta sẽ tìm hiểu chi tiết hơn về các thành phần liên quan đến một ứng dụng Android trong môi trường Android Studio 3.X.

Các thành phần cơ bản trong môi trường Android Studio 3.6.1

Tạo một ứng dụng Android mới

Khi tạo một ứng dụng Android mới, chúng ta sẽ phải điền một số thông tin trong hộp thoại Create Android Project sau:

Các thông tin quan trọng gồm Application name – tên của ứng dụng, Project location – vị trí nơi chúng ta lưu ứng dụng. Package name dùng để xác định tính duy nhất của ứng dụng. Tên của Package name là sự kết hợp từ Company domain và Application name và hoàn toàn tự động nên chúng ta không cần quá bận tâm.

Các tùy chọn Include C++ support và Include Kotlin support cung cấp cho phép sử dụng các ngôn ngữ như C++ hay Kotlin.

Khi chúng ta nhấn Next, hộp thoại Target Android Devices sẽ xuất hiện và vì chúng ta muốn làm việc với ứng dụng Android trên điện thoại di động và máy tính bảng nên tùy chọn Phone and Tablet sẽ được chọn:

Trong danh sách các API, chúng ta chọn API thấp nhất (API 14: Android 4.0 (IceCreamSandwich)) vì nó cho phép chúng ta thực thi các ứng dụng Android trên hầu hết các thiết bị, để ý dòng thông tin bên dưới:

Nếu chúng ta chọn API cao hơn thì các thiết bị cho phép thực thi ứng dụng Android sẽ hạn chế, ví dụ về một số lựa chọn API cao hơn:

API 17: 96% thiết bị cho phép

API 23: là 36,3 %:

API cao nhất hiện tại (trong Android Studio tôi đang dùng) – API 28: < 1%

Nhấn Next sẽ đến hộp thoại Add an Activity to Mobile

Tạo một Activity

Một Activity là một mô-đun ứng dụng liên quan trực tiếp đến một giao diện người dùng và các thành phần của giao diện này như layout, controls, v.v.

Mặc định, Android Studio 3.X cung cấp một số các Activity mẫu cho phép chúng ta phát triển các ứng dụng Android khác nhau. Chúng ta có thể lựa chọn các mẫu Activity trong hộp thoại Add an Activity to Mobile:

Với mục đích của chúng ta, có thể chọn Empty Activity – là một Activity đơn giản nhất. Nhấn Next. Nhập một số thông tin trong hộp Configure Activity:

Activity Name là tên của Activity hiện tại của chúng ta. Lưu ý rằng, một ứng dụng Android có thể có rất nhiều Activity và điều này sẽ được tìm hiểu trong các bài sau. Layout Name là tên của tập tin tạo layout cho giao diện người dùng của Activity hiện tại. Có thể thay đổi tên tùy ý, trong trường hợp này chúng ta giữ nguyên các tên mặc định. Nhận Finish. Giao diện Android Studio lúc này trông như sau:

Các tập tin liên quan đến ứng dụng của chúng ta được thể hiện trong cửa sổ Project bên trái màn hình Android studio:

Nếu cửa sồ này không xuất hiện, chúng ta có thể vào View > Tool Windows > Project

Mặc định cửa sổ này xuất hiện trong chế độ Android:

Chúng ta có thể xem nhiều chế độ khác bằng cách nhấn vào mũi tên hướng xuống bên phải của cửa sổ:

Các chế độ khác chúng ta sẽ tìm hiểu trong các bài sau. Trong ứng dụng của bài này chúng ta giữ nguyên chế độ mặc định Android.

Thay đổi giao diện người dùng

Nội dung thiết kế giao diện người của ứng dụng chúng ta chứa trong tập tin activity_main.xml. Có thể tìm thấy tập tin này trong cửa sô Project bằng cách vào app > res > layout:

Nếu chúng ta nhấp đôi vào tập tin này, một tab của tập tin sẽ xuất hiện trong cửa sổ kế tiếp:

Như đã từng đề cập qua trong bài trước, tập tin activity_main.xml có hai chế độ là Design:

Và chế độ Text – gồm các dòng mã XML:

Điều này ngụ ý rằng, chúng ta có thể thay đổi giao diện người dùng của ứng dụng bằng hai cách: kéo thả trong chế độ Design và viết mã XML trong chế độ Text. Còn một cách khác nhưng ít dùng là viết mã Java.

Giao diện người dùng thông thường chứa các điều khiển (control) như Plain Text, TextView, Button, v.v. Trong chế độ Design chúng ta có thể xem các điều khiển này trong cửa sổ Palette:

Các điều khiển để có thể hiển thị đến người dùng thì cần phải được đặt trong các layouts – cách thức hiển thị các điều khiển của giao diện người dùng. Danh sách các layouts được hỗ trợ bởi Android Studio 3.X (từ 3.0 trở lên) có thể được tìm thấy trong cửa sổ Palette:

Giao diện mặc định của ứng dụng chúng ta gồm một TextView với dòng chữ Hello World và TextView này được đặt trong layout mặc định là ConstraintLayout. Có thể xem cách tổ chức các điều khiển và layout tương ứng trong cửa sổ Component Tree kề dưới cửa sổ Palette:

Trong giao diện thiết kế, TextView mặc định như sau:

Chúng ta có thể di chuyển TextView này đến các vị trí khác nhau trên layout bằng cách chọn TextView và rê chuột trái đến vị trí tương ứng. Bên cạnh đó, chúng ta có thể thay đổi các thuộc tính như màu chữ, màu nền, kích cỡ chữ, v.v. của TextView trong cửa sổ Attributes bên phải màn hình và lưu ý rằng lúc này chúng ta phải đang chọn TextView như sau:

Cửa sổ Attributes của TextView:

Mặc định, đây là danh sách thu gọn các thuộc tính. Chúng ta có thể xem toàn bộ thuộc tính trong Attributes bằng cách nhấp chuột vào dòng liên kết View all attributes tại cuối cửa sổ Attributes:

Bây giờ, chúng ta xóa TextView mặc định bằng cách chọn TextView và nhấn phím Delete. Trong cửa sổ Palette chọn Text (bên trái) và chọn TextView (bên phải):

Kéo TextView và thả vào vùng thiết kế:

Lúc này sẽ xuất hiện một lỗi và một cảnh báo ở hộp thoại bên dưới:

Nếu cửa sổ hiển thị lỗi và thông báo này không xuất hiện, chúng ta có thể nhấp chuột vào biểu tượng chấm than trong vòng tròn đỏ tại vị trí gần các nút (+) hay (-) để tăng hay giảm giao diện thiết kế:

Chúng ta cũng có thể thấy biểu tượng này trong Componet Tree:

Khi chúng ta kéo và thả TextView vào màn hình thiết kế, mặc định sẽ như sau:

Các dấu chấm tròn màu trắng vì chúng ta chưa thiết lập ràng buộc (constraints) cho TextView trong layout mặc định ConstraintLayout. Để khắc phục lỗi này, chúng ta chọn từng dấu chấm tròn và kéo về các hướng các cạnh màn hình thiết kế để ràng buộc TextView này với cạnh tương ứng:

Lúc này chỉ còn cảnh báo Hardcoded Text:

Cảnh báo này nhắc nhở chúng ta rằng khi phát triển ứng dụng Android, các thuộc tính và giá trị như chuỗi văn bản sẽ được lưu trữ trong hình thức resources và khi cần thay đổi giao diện ứng dụng chúng ta chỉ thay đổi nội dung trong các tập tin resource thay vì thay đổi trong mã ứng dụng. Điều này hữu ích trong trường hợp chuyển các chuỗi văn bản trên giao diện sang các ngôn ngữ khác nhau. Trong cửa sổ hiển thị lỗi và cảnh báo, chọn cảnh báo để mở rộng (hay thu gọn) và cuộn xuống cuối cùng sẽ bắt gặp mục Suggested fix gồm nút Fix và dòng thông điệp Extract string resource:

Nhấn vào nút Fix và nhập các thông tin trong hộp Extract Resource:

Nhấp OK để chấp nhận lưu trữ giá trị chuỗi trong tại app > res > values > strings.xml:

TextView lúc này trong Component Tree như sau:

Như đã đề cập ở trên, chúng ta có thể thay đổi giá trị các thuộc tính của một điều khiển bằng cách thay đổi trong cửa sổ Attributes tại chế độ Design. Tuy nhiên, nhiều lúc chúng ta dùng mã XML trong chế độ Text sẽ nhanh chóng hơn. Chúng ta cùng xem mã XML trong hai tập tin activity_main.xml:

và strings.xml:

Bây giờ chúng ta sẽ thay đổi màu chữ và kích cỡ chữ cho TextView bằng cách viết vài dòng mã XML trong tập tin activity_main.xml như sau:


android:textColor="#ff4d4d"
android:textSize="20dp"

Vị trí các dòng mã như sau:

Lúc này chúng ta có thể chạy thử ứng dụng bằng các máy ảo AVD tích hợp sẵn trong Android Studio. Các máy ảo này thường khá chậm nên một giải pháp tốt hơn là dùng máy ảo Genymotion (đã đề cập bài trước). Kết quả ứng dụng:

Trong bài này chúng ta đã tìm hiểu các thành phần quan trọng của một ứng dụng trong Android Studio. Trong bài tiếp theo chúng ta sẽ tìm hiểu các thành phần quan trọng khác trong môi trường Android Studio 3.X.

Source code cho các tập tin trong bài viết có thể tìm thấy tại GitHub.