Android

Drawable trong Android

Giới thiệu

Trong Android, drawable được sử dụng khá nhiều ví dụ như background của view, src của ImageView, state (press, normal..) của view và nhiều chức năng các nữa. Nhưng thực sự khi mới bắt đầu không phải ai cũng hiểu được drawable là cái gì. Nhận thấy điều đó hôm nay tôi viết một bài từ cơ bản đến nâng cao về kiến thức drawable trong Android.

Drawable trong Android

Khái niệm drawable

Drawable là khái niệm chung về graphics để chỉ những gì mà bạn có thể vẽ. Đơn giản là hình ảnh (Drawable hình ảnh trong android gọi là BitmapDrawable).

Drawable định nghĩa shape, color, gradient, border… mà bạn có thể sử dụng nó apply vào view trong Activity.

Các loại drawable trong Android

Trong Android có khá nhiều loại drawable. Sử dụng nhiều nhất là BitmapDrawable (sử dụng để set src cho ImageView). Và dưới đây là một số drawable trong Android.

  • BimapDrawable
  • ColorDrawable
  • GradientDrawable
  • ShapeDrawable
  • RippleDrawable (Android 5.0)
  • VectorDrawable
  • AnimatedDrawable (Android 5.0)
  • StateListDrawable
  • 9 Paths Drawables

Ngoài những Drawable trên thì bạn cũng có thể tạo Drawable khác kế thừa từ các Drawable trên (Lớp cha của tất cả drawable là lớp Drawable).

Dưới đây chúng ta sẽ cùng đi qua 1 số Drawable được sử dụng phổ biến trong Android.

Sử dụng Drawable cho View

Trong Android bạn có thể truy cập Drawable từ thư mục drawable của project như sau:

Trong file xml

Sử dụng @drawable/drawable_name

Trong java

Sử dụng R.drawable.drawable_name

Ví dụ sử dụng drawable để làm src cho ImageView trong xml

Sử dụng trong java

Hoặc có thể tạo tạo Drawable Object trong Java và sử dụng các phương thức support set drawable như sau:

Tuy nhiên method setBackground yêu cầu Android API 16. Nên mình khuyên các bạn sử dụng các phương thức setDrawable thông qua resource id ví dụ như phương thức setImageResouce (int resId) của ImageView.

Một số Drawable sử dụng phổ biến

BitmapDrawable

Thực chất Bitmap drawable là một bitmap nhưng drawable bạn có thể set nhiều thuộc tính trước khi vẽ hơn cho drawable như giá trị alpha, set kích thước width height trước khi vẽ.

Để sử dụng BitmapDrawable chúng ta dùng như sau:

Trong xml

Thêm hình ảnh vào thư mục drawable

drawable-android-0

Sau đó sử dụng @drawable/drawable_name để gán drawable cho view

Ví dụ

Trong java

ShapeDrawable

ShapeDrawable cho phép vẽ các hình học cơ bản trong android

Chuột phải vào thư mục drawable để tạo drawable resource

drawable-android-1

 

Nhập tên drawable để hoàn thành

drawable-android-2

Tôi tạo file có tên là circle_drawable với nội dung file như dưới đây.

Và sử dụng trong xml

Bây giờ tôi tạo một  tiếp drawable có hình dạng như một row chat của messenger facebook như sau:

facebook_chat_drawable.xml

Set Drawable là background cho TextView

Trong java bạn có thể làm như sau:

Kết quả

drawable-android-3

Thử sửa lại một số thông tin trong file facebook_chat_drawable.xml run và chạy xem lại kết quả

drawable-android-4

Đến đây chắc bạn đã cảm nhận được sức mạnh của drawable là như thế nào rồi nhỉ. Drawable bạn có thể làm cho view trở đẹp mắt hơn nhiều. Tiếp theo, chúng ta hãy cùng nhau tìm hiểu những drawable còn lại để khám phá những sức mạnh của drawable trong Android nào.

StateListDrawable

Đọc qua tên thì chúng ta cũng hình dung ra rằng Drawable này dùng để mô tả những state (normal, focus, press, disable…) của view. Đúng vậy, drawable này dùng để vẽ những state trên. Và thường xuyên sử dụng cho button, và các item trên ListView hay RecyclerView.

Hình ảnh dưới đây mô tả những state của Button.

drawable-android-5

Để tạo StateListDrawable cũng hoàn toàn tương tự như ShapeDrawable. Tôi tiến hành tạo drawable trong thư mục drawable có tên là button_selector.xml với nội dung như sau:

Sử dụng drawable cho button

Các bạn hãy làm thử và xem kết quả.

Bây tôi muốn làm một button như dưới đây:

drawable_android-6

Tôi sẽ có các file như sau:

button_state_normal.xml định nghĩa trạng trái normal của button

button_state_pressed.xml định nghĩa trạng thái khi button được nhấn.

và file button_selector_save_change.xml định nghĩa selector của button gồm 2 state đó là normal và pressed.

Button sử dụng selector

Sau đó các bạn thử chạy và run chương trình xem kết quả có sự khác biệt gì không.

Ngoài hai state normal và pressed trong android còn có nhiều state khác nữa.

drawable-android-6

Đa số các view trong Android đều có thể những state này. StateListDrawale khá nhiều nên tôi chỉ giới thiệu từng này. Chi tiết hơn các bạn có thể tìm kiếm ở ĐÂY.

VectorDrawable

VectorDrawable được giới thiệu ở Android 5.0 (API 21). VectorDrawable có nhiều lợi thế đó là kích thước của file nhỏ (so với việc chúng ta copy 1 hình ảnh vào project). Tự động scale theo tỉ lệ màn hình trên từng thiết bị.

Trước tiên cần enable supportVecDrawable trong file build.gradle như sau:

Tiếp theo để tạo VectorDrawable chúng ta right click vào thư mục drawable > New -> chọn Vector Asset

drawable-android-7

Hội thoại Vector Asset Studio hiện lên, nhấn choose để chọn icon mà bạn muốn xuất ra vector drawable. Sau đó nhấn ok để Android Studo tạo file drawable cho chúng ta.

drawable-android-8

File vector được generate có nội dung như sau:

Để gán vector drawale cho View trong xml chúng ta sử dụng thuộc tính srcCompat.

Các bạn làm lại và chạy thử để xem kết quả.

CustomDrawable

Trên trên tôi đã giới thiệu những Drawable được giới thiệu trong Android SDK. Tiếp theo mình sẽ tạo drawable cho riêng mình để giúp các bạn hiểu sâu hơn Drawable trong Android.

Drawable mà tôi sẽ hướng dẫn đó là vẽ Arc như trong ví dụ bài Canvas trong Android (Phần 1)

Tôi tạo class ArcDrawable kế thừa từ Drawable như sau:

Và sử dụng Drawable này như sau:

Kết quả ta thấy như sau:

drawable-android-9

Và dưới đây là hình ảnh của drawale đã sử dụng trong bài viết từ đầu tới cuối

drawable-android-10

Link Project DrawableDemo trên github.

Kết luận

Trên đây tôi đã giới thiệu cho các bạn về một kiến thức được sử dụng khá nhiều trong Android đó là drawable. Hy vọng với những kiến thức mà tôi truyền đạt trong bài viết này giúp bạn có thể thiết kế UI cho ứng dụng một các đẹp đẽ hơn. Và sâu hơn nữa có thể tạo ra những Drawable của chính bạn để có thể sử dụng. Nếu có bất kì thắc mắc bào vui lòng để lại bình luận ở phía dưới. Tôi sẽ sẵng sàng giải đáp thắc mắc của các bạn.

8 thoughts on “Drawable trong Android”

  1. Hi bạn,
    Cho mình hỏi là mình có 1 tập dữ liệu khoảng 400 tấm hình PNG (tổng dung lượng hiện tại chưa giảm độ phân giải xuống là khoảng 23MB, hình vẫn còn có thể giảm xuống được). Mình không show hết 400 tấm một lần, mà tùy vào chức năng app sẽ chỉ show vài chục tấm. Vậy mình nên đặt 400 tấm này chỗ nào Drawable, assets hay Sqlite để chạy app được tốt.
    P/S: app mình chạy offline, dữ liệu không thay đổi theo thời gian.
    Cảm ơn bạn.

  2. A oi co cach nao them xdpi cho ung nay khong a..man hinh dt e la full hd nhug phan men lai khong ho tro.. Minh them duoc khong a…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.