[Khóa học lập trình Android] Bài 05 Thiết kế giao diện ứng dụng Android

Đây là khóa học lập trình Android miễn phí với nội dung các bài học mạch lạc và dễ hiểu với những bài hướng dẫn lập trình ứng dụng Android cơ bản nhất. Nội dung phần hướng dẫn này trình bày thiết kế giao diện ứng dụng Android của ứng dụng Tra Cứu Thị Trường.

Nội dung phần hướng dẫn này trình bày thiết kế giao diện ứng dụng Android của ứng dụng Tra Cứu Thị Trường.

Phần thiết kế giao diện ứng dụng Android này chúng ta sẽ thiết kế giao diện chính của ứng dụng, nhưng trước hết bạn hãy xem qua mẫu thiết kế giao diện ứng dụng Android tra cứu thị trường.

[Ứng dụng tra cứu thị trường] Bài 3 Thiết kế giao diện ứng dụng Android

Sau đây sẽ là phần mô tả chi tiết phần hướng dẫn thiết kế giao diện ứng dụng Android tra cứu thị trường tương tự như hình ảnh ví dụ trên.

Bước 1: Bạn mở tập tin build.gradle (Module:app) và thêm đoạn mã sau vào và nhấn vào Sync Now ở góc phải bên trên màn hình:

Trong phần ứng dụng tra cứu thị trường bạn thấy mình chia bố cục thành các khung, mỗi khung là một CardView.

[Ứng dụng tra cứu thị trường] Bài 3 Thiết kế giao diện ứng dụng Android

Nội dung toàn bộ tập tin build.gradle (Module:app) như sau:

Để tạo một CardView bạn sẽ sử dụng đoạn mã tương tự như sau:

Bước 2: Tiếp theo, chúng ta sẽ thiết kế giao diện màn hình chính của chương trình với giao diện bao gồm các ô vuông tương ứng với mỗi ô là một danh mục cần tra cứu như hình ảnh ví dụ ở đầu bài viết.

Trong tập tin activity_main.xml bạn chỉnh sửa lại như sau:

Trong tập tin content_main.xml bạn chỉnh sửa lại như sau:

ScrollView sử dụng cuộn trang giúp hiển thị vượt quá giới hạn màn hình cần hiển thị. ImageView sử dụng để hiển thị hình ảnh và TextView giúp hiển thị nội dung cần hiển thị.

Bước 3: Bây giờ bạn mở tập tin style.xml nằm trong thư mục value và thêm đoạn mã sau vào, đây là đoạn mã giúp trình bày kích thước, màu sắc, kiểu chữ… hiển thị.

Mẫu giao diện bố cục trang giao diện sau khi thiết kế như sau:

[Ứng dụng tra cứu thị trường] Bài 3 Thiết kế giao diện ứng dụng Android

Bạn vào lớp MainActivity.java xử lý như sau để bắt sự kiện khi nhấn vào CardView:

Xem nội dung chi tiết hướng dẫn trên Youtube:

Lời kết: Như vậy khóa học lập trình Android miễn phí được chia sẻ bởi Team Việt Dev hy vọng giúp bạn có thêm nhiều kiến thức cơ bản để tự xây dựng cho riêng mình một ứng dụng Android.

(Tác giả: Team Việt Dev)

Bình luận