Tài nguyên Drawable (1) - Sử dụng shape xml trong Android

Tài nguyên Drawable

Tài nguyên Drawable là một khái niệm chung ám chỉ đối tượng đồ họa nào đó có thể được vẽ ra trên màn hình. Trong dự án ứng dụng Android với Android Studio thường các tài nguyên đồ họa này đặt trong thư mục res/drawable, sau đó nó được sử dụng bằng cách lấy ra từ trong code bằng các hàm API như ContextCompat.getDrawable, ResourcesCompat.getDrawable hay gán vào thuộc tính phù hợp trong XML như android:drawable, android:icon, android:button ...
Lớp cơ sở biểu diễn Drawable là lớp Drawable (android.graphics.drawable.Drawable), từ lớp này mà có các kiểu Drawable khác nhau như:

Loại Drawable	Thông tin
`ShapeDrawable`	Là một Drawable bằng phần tử `shape` trong XML, nó cho phép vẽ một số hình cơ bản.
`GradientDrawable`	Tạo Gradient bên trong `shape`.
`VectorDrawable`	Là một Drawable bằng phần tử `vector` trong XML, nó cho phép vẽ ảnh vector như SVG
`BitmapDrawable`	android.graphics.drawable.BitmapDrawable Biểu diễn ảnh Bitmap, hỗ trợ các định dạng png, jpg, gif, các tài nguyên ảnh png, jpg đặt trong drawable tự động được phân tích thành BitmapDrawable
`NinePatchDrawable`	Các ảnh png với phần tên có dạng `.9.png` sẽ tự động phân tích thành dạng Nine-Patch, loại Drawable cho phép thu phóng phần nội dung
`LayerDrawable`	Một loại Drawable, chứa nhiều Drawable bên trong, các Drawable bên trong được vẽ theo thứ tự.
`StateListDrawable`	Một Drawable có chứa nhiều Drawable bên trong để cho đối tượng sử dụng tùy trạng thái mà vẽ Drawable trong nó.
`LevelListDrawable`	Một Drawable có chứa nhiều Drawable bên trong, mỗi Drawable được giá trị Level (min và max). Sau đó đối tượng sử dụng tùy giá trị Level mà sẽ sử dụng Drawable nào bên trong để vẽ.
`TransitionDrawable`	Một Drawable có chứa 2 Drawable bên trong, nó cung cấp khả năng chuyển đổi qua lại giữa 2 Drawable (hiệu ứng fade).
`InsetDrawable`	Một Drawable tạo ra từ cách chèn một Drawable khác vào và chỉ ra khoảng cách các mép.
`ClipDrawable`	Một Drawable dựa trên Level, nó cho phép thiết lập cắt chiều rộng / cao dưa trên giá trị level.
`ScaleDrawable`	Là một Drawable tạo ra từ Drawable khác bằng cách điều chỉnh tỷ lệ thu phóng

Truy cập Drawable

Truy cập đến Drawable trong XML

Các đối tượng đồ hòa Drawable như các ảnh .jpg, .png đặt trong thư mục res/drawable với tên đầy đủ như: res/drawable/filename.png, hoặc là các định dạng .xml với tên đầy đủ res/drawable/filename.xml
Trong các triển khai XML ví dụ như layout, truy cập đến Drawable với dạng: "@drawable/filename", ví dụ:

android:background="@drawable/example"

Truy cập đến Drawable trong code

1 Lấy Drawable bằng ContextCompat

Drawable drawable  = ContextCompat.getDrawable(context,id)

context Là một đối tượng Context như Activity hoặc lấy từ các view: getContext()
id là ID trỏ đến Drawable, sử dụng lớp R để truy cập như R.drawable.example

2 Lấy Drawable bằng ResourcesCompat

Drawable drawable  = ResourcesCompat.getDrawable(res, id, null)

res là đối tượng Resources, lấy được bằng phương thức getResources() của View hay Activity
id là ID trỏ đến Drawable, sử dụng lớp R để truy cập như R.drawable.example

Sau khi có Drawable trong code tùy ý sử dụng theo mục đích, ví dụ thiết lập vào nền cho View setBackground(drawable)

Vẽ ShapeDrawable, GradientDrawable trong XML

Tạo XML với phần tử gốc là <shape> với tham số android:shape là loại hình muốn vẽ, chấp nhận các loại hình sau:

rectangle : Để vẽ hình chữ nhật
ring: Hình khuyên
oval: Hình oval (elip)
line: Đường thẳng

Ví dụ khai báo là vẽ hình oval:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
</shape>

Tùy theo loại hình muốn vẽ mà bên trong <shape> có các phần tử con là dữ liệu để vẽ hình như sau:

Thiết lập nét vẽ với stroke

<stroke
    android:width="10dp"
    android:color="#de461b"
    android:dashGap="2dp"
    android:dashWidth="10dp" />

android:width chiều rộng nét vẽ; android:color màu nét vẽ; android:dashGap độ dài khoảng trống để tạo nét đứt; android:dashWidth độ dài nét đứt

Ví dụ sau tạo ra một hình Oval với nét đứt

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="5dp"
        android:color="#de461b"
        android:dashGap="2dp"
        android:dashWidth="10dp" />
</shape>

Thiết lập màu tô với solid hoặc gradient
Phần tử solid thêm vào để gán một màu tô vào theo cú pháp (ví dụ tô bằng màu vàng):
```
<solid
    android:color="#f9d849" />
```
Phần tử gradient để tạo màu tô theo Gradient
Gradient sinh ra bằng cách biến đổi liên tục qua ba màu, ba màu thiết lập bằng thuộc tính: startColor, centerColor, endColor, thiết lập kiểu biến đổi bằng thuộc tính type với kiểu linear hoặc circle, góc biến đổi màu thiết lập bằng thuộc tính angle
Ví dụ tô bằng gradient kiểu linear góc tố 45 độ
```
<gradient
    android:angle="45"
    android:endColor="#87CEEB"
    android:centerColor="#768087"
    android:startColor="#000"
    android:type="linear" />
```
Ví dụ tô bằng gradient kiểu linear góc tố 45 độ
```
 <gradient
        android:angle="45"
        android:endColor="#D38312"
        android:startColor="#FF6B6B"
        android:type="linear" />
```
Khi sử dụng loại tô theo hình trong radial thì cần thiết lập bán kính của vùng tô bằng thuộc tính android:gradientRadius, có thể gán bằng giá trị cụ thể như 100dp hoặc bằng ký hiệu %p ví dụ "10%p" bán kính bằng 10% cạnh nhỏ, "100%p" bán kính bằng cạnh nhỏ. Vùng tô có hiệu lực là một hình tròn bán kính android:gradientRadius, tâm ở giữa hình hoặc thiết lập bằng thuộc tính centerX và centerY nhận giá trị từ 0 đến 1, ví dụ bằng 0.5 là ở giữa
```
<gradient
    android:centerColor="#136d94"
    android:endColor="#05ec19"
    android:gradientRadius="50%p"
    android:startColor="#b9ad08"
    android:type="radial" />
```
Ví dụ điều chỉnh tâm cách góc trên/trái theo chiều X là 10%, chiều Y một khoảng 20%
```
<gradient
    android:centerColor="#136d94"
    android:endColor="#05ec19"
    android:gradientRadius="100%"
    android:startColor="#b9ad08"
    android:centerX="0.1"
    android:centerY="0.2"
    android:type="radial" />
```
Thiết lập kích thước vùng vẽ bằng <size> Nếu muốn thiết lập chính xác kích thước của Drawable này thì thêm vào phần tử size
```
<size android:height="20dp"
    android:width="100dp" />
```

Thiết lập padding vùng vẽ <padding> Nếu muốn thiết lập các padding cho vùng vẽ

<padding
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp" />

Thiết lập bo tròn các góc <corners> Với 4 góc của hình chữ nhật, có thể thiết lập bán kính bo tròn bằng phần tử corners, với các thuộc tính android:radius thiết lập bán kính bo tròn cả 4 góc như nhau, và với android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, android:bottomRightRadius để thiết lập bán kính cho từng góc

Ví dụ bo tròn cả 4 góc

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="45"
        android:endColor="#D38312"
        android:startColor="#FF6B6B"
        android:type="linear" />
    <size android:height="20dp"
        android:width="100dp" />

    <corners android:radius="10dp"/>

</shape>

Một số ví dụ với shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="100dp"
        android:bottomRightRadius="20dp" />
    <gradient
        android:type="linear"
        android:startColor="#0083ff"
        android:centerColor="#00d4ff"
        android:endColor="#00fff6"
        android:angle="135"/>
    <size
        android:width="100dp"
        android:height="100dp" />

    <stroke
        android:width="2.3dp"
        android:color="#FFFFFF" />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="4dp" />
    <stroke android:width="4dp" android:color="#C1E1A6" />
    <solid android:color="#118C4E"/>
    <padding android:left="20dp" android:top="20dp"
        android:right="20dp" android:bottom="20dp" />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"   android:shape="oval" >
    <solid
        android:color="#FFEECC" />
    <size
        android:width="100dp"
        android:height="100dp" />

    <stroke android:width="5dp" android:color="#444444" />
</shape>