Thêm hình ảnh vào ứng dụng Android

1. Giới thiệu

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách thêm hình ảnh vào ứng dụng bằng cách sử dụng ImageView.

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

• Nắm được cách tạo và chạy một ứng dụng mới trong Android Studio.
• Nắm được cách thêm, xóa và thiết lập thuộc tính trên TextViews bằng cách sử dụng Layout Editor.

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

• Cách thêm ảnh hoặc hình ảnh vào ứng dụng Android.
• Cách hiện hình ảnh trong ứng dụng bằng cách sử dụng ImageView.
• Cách trích xuất văn bản thành tài nguyên chuỗi để dễ dàng dịch ứng dụng và sử dụng lại chuỗi.
• Cách giúp ứng dụng trở nên hữu dụng với nhiều người nhất.

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

• Mở rộng ứng dụng Happy Birthday (Chúc mừng sinh nhật) để thêm hình ảnh.

Bạn cần có

• Một máy tính đã cài đặt Android Studio.
• Ứng dụng đã tạo trong lớp học lập trình Create a Birthday Card (Tạo thiệp sinh nhật).

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

1. Mở dự án bạn đã tạo ở lớp học lập trình trước trong Android Studio. Bạn có thể sử dụng mã giải pháp hoặc mã bạn đã tạo. Khi khởi chạy, ứng dụng sẽ có dạng như sau.

Thêm hình ảnh vào dự án

Trong nhiệm vụ này, bạn sẽ tải một hình ảnh xuống qua Internet, sau đó thêm hình ảnh này vào ứng dụng Happy Birthday (Chúc mừng sinh nhật).

1. Nhấp vào đây để truy cập hình ảnh thiệp sinh nhật trên GitHub.
2. Nhấp vào nút Download (Tải xuống) ở bên phải. Thao tác này sẽ cho thấy hình ảnh đó.

3. Nhấp chuột phải vào hình ảnh này rồi lưu tệp vào máy tính dưới dạng androidparty.png. Ghi lại vị trí bạn đã lưu tệp hình ảnh (ví dụ: thư mục Downloads (Tệp đã tải xuống)).
4. Trong Android Studio, hãy nhấp vào View (Xem) > Tool Windows (Cửa sổ công cụ) > Resource Manager (Trình quản lý tài nguyên) trong trình đơn hoặc nhấp vào thẻ Resource Manager (Trình quản lý tài nguyên) ở bên trái cửa sổ Project (Dự án).
5. Nhấp vào biểu tượng dấu + bên dưới Resource Manager (Trình quản lý tài nguyên), chọn Import Drawables (Nhập đối tượng có thể vẽ). Thao tác này sẽ mở ra một trình duyệt tệp.

6. Trong trình duyệt tệp này, hãy tìm tệp hình ảnh bạn đã tải xuống rồi nhấp vào Open (Mở).
7. Nhấp vào Next (Tiếp theo). Android Studio sẽ cho thấy bản xem trước của tệp hình ảnh đã tải xuống.
8. Nhấp vào Nhập.
9. Nếu hình ảnh được nhập thành công, Android Studio sẽ thêm hình ảnh đó vào danh sách Drawable (Đối tượng có thể vẽ) của bạn. Danh sách này bao gồm tất cả hình ảnh và biểu tượng cho ứng dụng. Giờ đây bạn có thể sử dụng hình ảnh này trong ứng dụng của mình.

10. Chuyển trở lại chế độ xem dự án bằng cách nhấp vào View (Xem) > Tool Windows (Cửa sổ công cụ) > Project (Dự án) trong trình đơn hoặc thẻ Project (Dự án) ở ngoài cùng bên trái.
11. Xác nhận xem hình ảnh này đã nằm trong thư mục drawable (đối tượng có thể vẽ) của ứng dụng hay chưa bằng cách mở rộng cây thư mục app > res > drawable.

3. Thêm ImageView

Để hình ảnh hiện trong ứng dụng, bạn cần xác định vị trí hiện hình ảnh. Tương tự khi sử dụng TextView để hiện văn bản, bạn có thể sử dụng ImageView để hiện hình ảnh.

Trong nhiệm vụ này, bạn sẽ thêm ImageView vào ứng dụng và thiết lập hình ảnh cho ImageView thành hình ảnh chiếc bánh bạn mới tải xuống. Sau đó, bạn sẽ xác định vị trí và điều chỉnh kích thước sao cho hình ảnh có thể lấp đầy màn hình.

Thêm và thiết lập hình ảnh cho ImageView

1. Trong cửa sổ Project (Dự án), hãy mở tệp activity_main.xml ( app > res > layout > activity_main.xml).

2. Trong Layout Editor (Trình chỉnh sửa bố cục), hãy di chuyển đến Palette (Bảng chế độ xem) rồi kéo ImageView vào ứng dụng của bạn. Thả ImageView này gần chính giữa và không chồng lên văn bản nào

Hộp thoại Pick a Resource (Chọn một tài nguyên) sẽ mở ra. Hộp thoại này liệt kê tất cả tài nguyên hình ảnh có sẵn cho ứng dụng của bạn. Hãy lưu ý rằng hình ảnh thiệp sinh nhật được liệt kê trong thẻ Drawable (Đối tượng có thể vẽ). Tài nguyên có thể vẽ là một khái niệm chung dành cho đồ hoạ để chỉ một hình ảnh có thể vẽ được trên màn hình. Tài nguyên có thể vẽ có thể là hình ảnh, bitmap, biểu tượng hay nhiều loại tài nguyên được vẽ khác.

3. Trong hộp thoại Pick a Resource (Chọn một tài nguyên), hãy tìm hình ảnh chiếc bánh trong danh sách Drawable (Đối tượng có thể vẽ).
4. Nhấp vào hình ảnh đó rồi nhấp OK.

Thao tác này sẽ thêm hình ảnh vào ứng dụng của bạn, nhưng có thể hình ảnh này chưa ở đúng vị trí và chưa lấp đầy màn hình. Bạn sẽ khắc phục tình trạng này trong bước tiếp theo.

Xác định vị trí và kích thước cho ImageView

1. Nhấp và kéo ImageView xung quanh Layout Editor (Trình chỉnh sửa bố cục). Hãy lưu ý rằng khi bạn kéo, một hình chữ nhật màu hồng sẽ xuất hiện xung quanh màn hình ứng dụng ở chế độ xem Design (Thiết kế). Hình chữ nhật màu hồng này cho biết ranh giới màn hình để định vị ImageView.
2. Thả ImageView sao cho các cạnh trái và phải khớp với hình chữ nhật màu hồng. Android Studio sẽ "bắt lấy" hình ảnh này và gắn vào các cạnh trái và phải khi bạn nhả chuột. (Chút nữa bạn sẽ xử lý phần trên và dưới.)

Views trong ConstraintLayout cần có các điều kiện ràng buộc (constraint) về chiều ngang và chiều dọc để cho ConstraintLayout biết cách định vị. Tiếp theo, bạn sẽ bổ sung những điều kiện ràng buộc này.

3. Giữ con trỏ lên trên vòng tròn ở đỉnh đường viền ImageView, một vòng tròn khác sẽ xuất hiện và được tô đậm.
4. Kéo vòng tròn này về phía trên cùng của màn hình ứng dụng, bạn sẽ thấy một mũi tên nối phần vòng tròn với con trỏ trong lúc kéo. Tiếp tục kéo cho đến khi đường viền bám vào phần đỉnh của màn hình. Như vậy, bạn đã thêm một điều kiện ràng buộc giữa đỉnh của ImageView và đỉnh của ConstraintLayout.

5. Thêm một điều kiện ràng buộc giữa đáy của ImageView và đáy của ConstraintLayout. Khoảng cách giữa đường viền và cạnh đáy có thể quá gần để bạn có thể kéo và thả như đã thực hiện cho phần đỉnh. Trong trường hợp này, hãy nhấp vào dấu + ở phía dưới cùng trong Constraint Widget (Tiện ích điều kiện ràng buộc) ở cửa sổ Attributes (Thuộc tính) để thêm điều kiện ràng buộc. Đảm bảo khoảng cách lề (margin) bằng 0.

6. Trong ngăn Attributes (Thuộc tính), hãy sử dụng Constraint Widget (Tiện ích điều kiện ràng buộc) để thêm khoảng cách bằng 0 với lề trái và phải. Thao tác này sẽ tự động tạo một điều kiện ràng buộc theo hướng đó.

Bây giờ hình ảnh đã được căn giữa nhưng chưa chiếm toàn bộ màn hình. Bạn sẽ khắc phục tình trạng này trong các bước tiếp theo:

7. Bên dưới Constraint Widget (Tiện ích điều kiện ràng buộc) trong mục Constraints (Điều kiện ràng buộc), hãy thiết lập layout_width bằng 0dp (match constraint) (0pd (điều kiện ràng buộc trùng khớp)). 0dp là ký hiệu viết tắt để yêu cầu Android Studio sử dụng điều kiện ràng buộc trùng khớp cho chiều rộng của ImageView. Theo những điều kiện ràng buộc bạn vừa thêm vào, chiều rộng của ImageView sẽ bằng chiều rộng của ConstraintLayout trừ đi mọi khoảng cách lề (margin).

8. Thiết lập layout_height bằng 0dp (match constraint) (0pd (điều kiện ràng buộc trùng khớp)). Theo những ràng buộc bạn đã thêm vào, chiều cao của ImageView sẽ bằng chiều cao của ConstraintLayout trừ đi mọi khoảng cách lề (margin).

9. ImageView có chiều rộng và chiều cao bằng màn hình ứng dụng nhưng hình ảnh thêm vào sẽ được căn giữa bên trong ImageView, đồng thời sẽ có những khoảng trắng ở bên trên và bên dưới hình ảnh. Cách trình bày này không được hấp dẫn lắm, bạn cần điều chỉnh scaleType của ImageView để xác định kích thước và căn chỉnh hình ảnh cho phù hợp. Tìm hiểu thêm về ScaleType trong tài liệu tham khảo dành cho nhà phát triển. Bây giờ, ứng dụng của bạn sẽ có dạng như dưới đây.

10. Tìm thuộc tính scaleType. Bạn cần cuộn xuống để tìm kiếm thuộc tính này. Hãy thử chọn nhiều giá trị cho scaleType để xem tác dụng tương ứng.

11. Sau khi hoàn tất, hãy thiết lập scaleType thành centerCrop, tính năng này sẽ giúp hình ảnh được lấp đầy màn hình mà không làm méo hình.

Hình ảnh chiếc bánh bây giờ sẽ lấp đầy toàn bộ màn hình như hình minh hoạ dưới đây.

Tuy nhiên, hiện tại bạn vẫn chưa thấy chữ ký và lời chúc mừng sinh nhật. Bạn sẽ khắc phục tình trạng này trong bước tiếp theo.

Di chuyển ImageView nằm phía sau văn bản

Sau khi ImageView lấp đầy màn hình, bạn sẽ không nhìn thấy phần văn bản nữa. Nguyên nhân là do hình ảnh chiếc bánh đang phủ lên toàn bộ phần văn bản. Có thể thấy rằng thứ tự thành phần trên giao diện người dùng có ý nghĩa rất quan trọng. Bạn thêm TextViews trước, sau đó thêm ImageView, có nghĩa là thành phần giao diện này sẽ nằm trên cùng. Khi bạn thêm các khung nhìn vào một bố cục, những khung nhìn này sẽ được thêm ở cuối danh sách và sẽ được hiện ra theo thứ tự xuất hiện trong danh sách. ImageView được thêm vào cuối danh sách Views trong ConstraintLayout, có nghĩa là ImageView sẽ xuất hiện sau cùng và chồng lên TextViews. Để khắc phục tình trạng này, bạn sẽ thay đổi thứ tự của các khung nhìn và di chuyển ImageView lên đầu danh sách để đối tượng này xuất hiện đầu tiên.

Trong Component Tree (Cây thành phần), hãy nhấp vào ImageView rồi kéo lên trên TextViews, ngay bên dưới ConstraintLayout. Một đường màu xanh dương có gắn hình tam giác sẽ xuất hiện, cho biết nơi ImageView sẽ được chuyển đến. Hãy thả ImageView ngay bên dưới ConstraintLayout.

ImageView bây giờ sẽ nằm ở đầu danh sách, bên dưới ConstraintLayout, tiếp đó là TextViews. Bây giờ, cả dòng văn bản "Happy Birthday, Sam!" và "From Emma." đều xuất hiện. (Hiện tại, hãy bỏ qua cảnh báo về nội dung mô tả bị thiếu.)

Xin chúc mừng! Bạn đã thêm một hình ảnh vào ứng dụng Android!

4. Áp dụng các phương pháp lập trình hay

Khi bạn thêm TextViews trong lớp học lập trình trước, Android Studio đã gắn cờ các đối tượng này bằng các tam giác cảnh báo. Trong bước này, bạn sẽ xử lý những cảnh báo này, đồng thời khắc phục cảnh báo trên ImageView.

Dịch thuật

Khi viết ứng dụng, có một điều quan trọng mà bạn cần nhớ là có thể sau này ứng dụng sẽ được dịch sang một ngôn ngữ khác. Như đã tìm hiểu trong lớp học lập trình trước đó, chuỗi (string) là một trình tự các ký tự như "Happy Birthday, Sam!".

Chuỗi mã hoá cứng (hardcoded string) là một chuỗi được viết trực tiếp trong mã của ứng dụng. Chuỗi mã hoá cứng sẽ gây khó khăn cho việc dịch ứng dụng sang ngôn ngữ khác cũng như việc sử dụng lại một chuỗi cho nhiều vị trí trong ứng dụng. Bạn có thể giải quyết những vấn đề này bằng cách "trích xuất chuỗi vào một tệp tài nguyên". Tức là thay vì mã hoá cứng chuỗi trong mã, bạn đưa các chuỗi này vào một tệp, đặt tên rồi truy cập theo tên chuỗi mỗi khi muốn sử dụng các chuỗi đó. Tên chuỗi sẽ được giữ nguyên, ngay cả khi bạn thay đổi nội dung chuỗi hoặc dịch sang ngôn ngữ khác.

1. Nhấp vào hình tam giác màu cam bên cạnh TextView đầu tiên của chuỗi "Happy Birthday, Sam!" Android Studio sẽ mở ra một cửa sổ chứa thêm nhiều thông tin kèm theo và cách khắc phục đề xuất. Bạn có thể kéo xuống để xem Suggested Fix (Cách khắc phục đề xuất).

2. Nhấp vào nút Fix (Khắc phục). Android Studio sẽ mở hộp thoại Extract Resource (Trích xuất tài nguyên). Trong hộp thoại này, bạn có thể tùy chỉnh tên của tài nguyên chuỗi cũng như chi tiết về cách lưu trữ tài nguyên đó. Resource name (Tên tài nguyên) là tên gọi của chuỗi. Resource value (Giá trị tài nguyên) chính là giá trị thật sự của chuỗi văn bản.
3. Trong hộp thoại Extract Resource (Trích xuất tài nguyên), hãy thay đổi Resource name (Tên tài nguyên) thành happy_birthday_text. Tên tài nguyên chuỗi phải viết bằng ký tự thường và các từ phải tách biệt nhau bằng dấu gạch dưới. Giữ nguyên các chế độ cài đặt khác theo mặc định.

4. Nhấp vào nút OK.
5. Trong ngăn Attributes (Thuộc tính), hãy tìm thuộc tính text (văn bản), bạn có thể thấy Android Studio đã tự động đặt giá trị thuộc tính này thành @string/happy_birthday_text cho bạn.

6. Mở strings.xml (app > res > values > strings.xml). Có thể thấy Android Studio đã tạo một tài nguyên chuỗi có tên happy_birthday_text.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

Tệp strings.xml có một danh sách chuỗi văn bản mà người dùng sẽ nhìn thấy trong ứng dụng của bạn. Hãy lưu ý rằng tên ứng dụng của bạn cũng là một tài nguyên chuỗi. Việc đưa tất cả chuỗi vào cùng một vị trí sẽ giúp bạn dễ dàng dịch tất cả văn bản trong ứng dụng, đồng thời dễ dàng sử dụng lại các chuỗi trong các phần khác của ứng dụng.

7. Hãy thực hiện các bước tương tự để trích xuất văn bản cho phần TextView chứa chữ ký và đặt tên cho tài nguyên chuỗi này là signature_text.

Sau khi hoàn tất, tệp của bạn sẽ có dạng như sau.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>

Kiểm tra khả năng hỗ trợ tiếp cận của ứng dụng

Bằng việc làm theo các phương pháp lập trình hay về khả năng hỗ trợ tiếp cận cho ứng dụng, bạn có thể giúp tất cả người dùng (kể cả người dùng khuyết tật) thao tác và tương tác với ứng dụng của bạn dễ dàng hơn.

Android Studio đưa ra các gợi ý và cảnh báo, giúp bạn xây dựng ứng dụng sao cho người dùng có thể tiếp cận dễ dàng hơn.

1. Trong Component Tree (Cây thành phần), hãy chú ý hình tam giác màu cam bên cạnh ImageView bạn đã thêm vào trước đó. Nếu di chuột lên hình tam giác này, bạn sẽ thấy xuất hiện chú giải công cụ cảnh báo tình trạng thiếu thuộc tính "contentDescription" trên hình ảnh. Phần mô tả nội dung có thể giúp ứng dụng của bạn tăng khả năng hữu dụng nhờ TalkBack, thông qua việc xác định mục đích của thành phần giao diện người dùng.

Tuy nhiên, hình ảnh sử dụng trong ứng dụng này chỉ dùng cho mục đích trang trí. Thay vì viết phần mô tả nội dung thông báo cho người dùng, bạn chỉ cần yêu cầu TalkBack bỏ qua ImageView bằng cách thiết lập thuộc tính importantForAccessibility thành no.

2. Trong Component Tree (Cây thành phần), hãy chọn ImageView.
3. Trong cửa sổ Attributes (Thuộc tính), trong mục All Attributes (Tất cả thuộc tính), hãy tìm importantForAccessibility rồi đặt giá trị thành no.

Hình tam giác màu cam bên cạnh ImageView sẽ biến mất.

4. Chạy lại ứng dụng của bạn để đảm bảo ứng dụng vẫn hoạt động tốt.

Xin chúc mừng! Bạn đã thêm một hình ảnh vào ứng dụng Happy Birthday, làm theo các nguyên tắc về khả năng hỗ trợ tiếp cận cũng như làm cho việc dịch nội dung trở nên dễ dàng hơn!

5. Mã giải pháp

Mã giải pháp cho ứng dụng Happy Birthday đã được tải lên GitHub. Bạn có thể truy cập nếu muốn tham khảo mã hoàn thiện của chúng tôi.

GitHub là một dịch vụ cho phép nhà phát triển quản lý mã cho dự án phần mềm của mình. GitHub sử dụng Git, một hệ thống kiểm soát phiên bản giúp theo dõi các thay đổi đã thực hiện trên từng phiên bản mã. Nếu đã từng xem nhật ký phiên bản của Google Doc, bạn có thể thấy thời điểm cũng như những nội dung từng được chỉnh sửa trên tài liệu. Tương tự như vậy, bạn có thể theo dõi nhật ký phiên bản mã của một dự án. Điều này rất hữu ích khi bạn làm việc trong một dự án cả với tư cách cá nhân hoặc nhóm.

GitHub cũng có một trang web cho phép bạn xem và quản lý dự án. Đường liên kết GitHub này cho phép bạn duyệt xem các tệp trực tuyến của dự án Happy Birthday hoặc tải các tệp này xuống máy tính.

Để lấy mã cho lớp học lập trình này và mở trong Android Studio, hãy thực hiện các bước sau.

Lấy mã

1. Nhấp vào URL được cung cấp. Thao tác này sẽ mở ra trang GitHub của dự án trong trình duyệt.
2. Trên trang GitHub của dự án, hãy nhấp vào nút Code (Mã), một hộp thoại sẽ xuất hiện.

3. Trong hộp thoại này, hãy 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.
4. Xác định vị trí của tệp trên máy tính (có thể trong thư mục Tải xuống (Tệp đã tải xuống)).
5. 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 an existing Android Studio project (Mở một dự án hiện có trong Android Studio).

Lưu ý: Nếu Android Studio đã mở sẵn thì thay vào đó, hãy chọn tùy chọn sau đây trong trình đơn File (Tệp) > New (Mới) > Import Project (Nhập dự án).

3. Trong hộp thoại Import Project (Nhập dự án), hãy chuyển đến nơi chứa thư mục dự án đã giải nén (có thể trong thư mục Downloads (Tệp đã tải xuống)).
4. Trong thư mục dự án, hãy chọn thư mục Chúc mừng sinh nhật.
5. Nhấp vào Open (Mở).
6. Chờ Android Studio mở dự án.
7. Nhấp vào nút Run (Chạy) để tạo và chạy ứng dụng. Đảm bảo ứng dụng được xây dựng như dự kiến.
8. Duyệt qua các tệp dự án trong cửa sổ công cụ Project (Dự án) để xem cách thiết lập ứng dụng.

6. Tóm tắt

• Resource Manager (Trình quản lý tài nguyên) trong Android Studio sẽ giúp bạn bổ sung và sắp xếp hình ảnh cũng như các tài nguyên khác.
• ImageView là một thành phần giao diện người dùng, giúp hình ảnh xuất hiện trong ứng dụng của bạn.
• ImageViews cần có phần mô tả nội dung để giúp ứng dụng của bạn dễ tiếp cận hơn.
• Văn bản mà người dùng nhìn thấy (chẳng hạn như lời chúc sinh nhật) nên được trích xuất vào tệp tài nguyên chuỗi, giúp dễ dàng dịch ứng dụng của bạn sang ngôn ngữ khác.

7. Tìm hiểu thêm

• Từ điển cho khóa học Kotlin cơ bản cho Android
• Resource Manager (Trình quản lý tài nguyên) trong Android Studio
• Lớp (class) ImageView
• Hỗ trợ tiếp cận
• Hỗ trợ đa ngôn ngữ
• Làm quen với GitHub

8. Tự thực hành

Thực hiện những việc sau:

1. Tạo ứng dụng thiệp sinh nhật theo thiết kế của riêng bạn.
2. Bắt đầu bằng cách suy nghĩ về những Views bạn sẽ cần đến.
3. Trình tự nào là dễ nhất để thêm các đối tượng này?
4. Bạn cần thêm hình ảnh nào vào thư mục drawable (đối tượng có thể vẽ)?

Có hai loại hình ảnh bitmap thường được sử dụng cho ứng dụng Android, đó là tệp JPEG và tệp PNG. Tệp PNG có thể chứa các vùng trong suốt (trống). Tìm hiểu thêm về các định dạng hình ảnh trong tài liệu tham khảo dành cho nhà phát triển.

5. Trước hết, hãy nhớ định vị Views theo các điều kiện ràng buộc và khoảng cách lề, sau đó tạo kiểu cho đối tượng.
6. Để văn bản xuất hiện nổi bật hơn trên hình ảnh, hãy thử các thuộc tính như shadowColor, shadowDx, shadowDy và shadowRadius.

Kiểm tra thành phẩm của bạn:

Sau khi hoàn thiện, ứng dụng của bạn phải không gặp lỗi nào khi chạy và cho thấy thiệp sinh nhật mà bạn đã thiết kế.

Xin chúc mừng, bạn đã hoàn thành việc tạo ứng dụng Thiệp sinh nhật của chính mình! Hãy chia sẻ thành phẩm của bạn lên mạng xã hội và dùng hashtag #LearningKotlin để chúng tôi xem được!