Sử dụng Shape Drawables Android

Thứ Năm, 19/11/2020

Tram Ho

Tại sao nên sử dụng ShapeDrawable

Khi chúng ta sử dụng ảnh PNG hay JPEG trong ứng dụng, ta sẽ cần phải có nhiều bản sao của chúng tuỳ thuộc vào độ phân giải màn hình. Chính vì điều đó, nó sẽ làm tăng kích thước của ứng dụng lên. Tất nhiên với các trường hợp đặc biệt chúng ta phải cần sử dụng đến ảnh, nhưng với một số trường hợp, chúng ta nên sử dụng ShapeDrawable để thay thế, nó sẽ làm giảm khá là nhiều kích thước của ứng dụng đấy.

Ví dụ như với các button trong hình dưới, chúng ta có thể sử dụng ảnh để set nó làm background đó, tuy nhiên chúng ta nên sử dụng ShapeDrawable.

ShapeDrawable là gì?

ShapeDrawable là tổng hợp các lệnh giúp vẽ ra các hình dạng gì đó với kích thước, màu sắc tuỳ chỉnh mà không làm thay đổi chất lượng hình.

Tạo một ShapeDrawable trong XML

Đầu tiên chúng ta sẽ tạo một drawable resource file.

Chuột phải vào res/drawable > New > Drawable resource file > Nhập file name > sử dụng shape làm root element > Click Ok

Một file mẫu sẽ có format như thế này:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>shape</span> <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">android:</span>shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>rectangle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>corners</span>
        <span class="token attr-name"><span class="token namespace">android:</span>bottomRightRadius</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10dp<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>radius</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>40dp<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>gradient</span>
        <span class="token attr-name"><span class="token namespace">android:</span>angle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>45<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>centerX</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>float<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>centerY</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>float<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>endColor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#01f1fa<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>gradientRadius</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>integer<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>startColor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#0189ff<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>linear<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

    <span class="token comment">&lt;!--If your shape requires only one solid color--&gt;</span>
    <span class="token comment">&lt;!--&lt;solid
        android:color="#FFFFFF" /&gt;--&gt;</span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>size</span>
        <span class="token attr-name"><span class="token namespace">android:</span>width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>82dp<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>82dp<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

    <span class="token comment">&lt;!--Use android:dashWidth="2dp" and android:dashGap="2dp"
    to add dashes to your stroke--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>stroke</span>
        <span class="token attr-name"><span class="token namespace">android:</span>width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2dp<span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span>color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#FFFFFF<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

    <span class="token comment">&lt;!--If you want to add padding--&gt;</span>
    <span class="token comment">&lt;!-- &lt;padding
         android:left="10dp"
         android:top="20dp"
         android:right="40dp"
         android:bottom="8dp" /&gt;--&gt;</span>
    
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>shape</span><span class="token punctuation">&gt;</span></span>

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

android:shape="rectangle">

<corners

android:bottomRightRadius="10dp"

android:radius="40dp" />

<gradient

android:angle="45"

android:centerX="float"

android:centerY="float"

android:endColor="#01f1fa"

android:gradientRadius="integer"

android:startColor="#0189ff"

android:type="linear" />

<!--<solid

android:color="#FFFFFF" />-->

<size

android:width="82dp"

android:height="82dp" />

<!--Use android:dashWidth="2dp" and android:dashGap="2dp"

to add dashes to your stroke-->

<stroke

android:color="#FFFFFF" />

<!-- <padding

android:left="10dp"

android:top="20dp"

android:right="40dp"

android:bottom="8dp" />-->

</shape>

Kết quả:

Các attribute khi tạo một shape

1. Shape type

Định nghĩa loại shape sẽ được vẽ. Nếu ta không định nghĩa shape type thì mặc định nó sẽ là rectangle, ngoài ra nó còn cung cấp các loại shape khác như: oval, line và ring.

android:shape= “oval”

1 2	android:shape= “oval”

2. Rounded Coneres

Định nghĩa phần bo góc của hình chữ nhật, khi ta sử dụng shape type là rectangle.

android:radius=”21dp”

1 2	android:radius=”21dp”

Chúng ta cũng có thể bo theo từng góc của rectangle với các attribute: android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, android:bottomRightRadius

android:bottomLeftRadius=”10dp”

1 2	android:bottomLeftRadius=”10dp”

3. Gradient or Solid color

Định nghĩa màu background của shape, có thể là gradient hoặc solid
Nếu muốn sử dụng màu solid thì chúng ta thêm thẻ solid và thêm attribute color để định nghĩa

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>solid</span> <span class="token attr-name"><span class="token namespace">android:</span>color</span><span class="token attr-value"><span class="token punctuation">=</span>@color/your_color_name</span> <span class="token punctuation">/&gt;</span></span>

Nếu muốn sử dụng màu gradient, chúng ta sẽ thêm gradient tag và định nghĩa màu start, center, end

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>gradient</span>
    <span class="token attr-name"><span class="token namespace">android:</span>startColor</span><span class="token attr-value"><span class="token punctuation">=</span>@color/your_color_name</span>
    <span class="token attr-name"><span class="token namespace">android:</span>centerColor</span><span class="token attr-value"><span class="token punctuation">=</span>@color/your_color_name</span>
    <span class="token attr-name"><span class="token namespace">android:</span>endColor</span><span class="token attr-value"><span class="token punctuation">=</span>@color/your_color_name</span>
<span class="token punctuation">/&gt;</span></span>

<gradient

android:startColor=@color/your_color_name

android:centerColor=@color/your_color_name

android:endColor=@color/your_color_name

/>

Nếu không định nghĩa type của gradient thì nó sẽ để mặc định type là linear, ngoài ra còn có các type khác như radial, sweep

android:type=”radial”

1 2	android:type=”radial”

Nếu muốn thay đổi góc độ, hướng gradient thì chúng ta sẽ thay đổi angel attibute. Ví dụ mình cho gradient từ góc dưới trái đến góc trên phải thì chúng ta sẽ để angel với value là 45

android:angle="45"

1 2	android:angle="45"

4. Size

Định nghĩa kích thước của shape để sử dụng phù hợp với các trường hợp riêng

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>size</span>
    <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span>”40dp”</span>
    <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span>”10dp”</span>
<span class="token punctuation">/&gt;</span></span>

<size

android:layout_height=”40dp”

android:layout_width=”10dp”

/>

5. Stroke

Định nghĩa viền của shape với width và color, để định nghĩa khoảng cách của dash và độ rộng của dash thì ta dùng dashGap và dashWidth

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>stroke</span>
    <span class="token attr-name"><span class="token namespace">android:</span>width</span><span class="token attr-value"><span class="token punctuation">=</span>”2dp”</span>
    <span class="token attr-name"><span class="token namespace">android:</span>color</span><span class="token attr-value"><span class="token punctuation">=</span>@color/your_beautiful_color</span>
    <span class="token attr-name"><span class="token namespace">android:</span>dashGap</span><span class="token attr-value"><span class="token punctuation">=</span>”1dp”</span>
    <span class="token attr-name"><span class="token namespace">android:</span>dashWidth</span><span class="token attr-value"><span class="token punctuation">=</span>”4dp”</span>
<span class="token punctuation">/&gt;</span></span>

<stroke

android:width=”2dp”

android:color=@color/your_beautiful_color

android:dashGap=”1dp”

android:dashWidth=”4dp”

/>

Sử dụng shape trong View

Sau khi ta đã tạo file drawable thì ta sử dụng nó trong view như sau

&lt;ImageView
    xmlns:android=”http://schemas.android.com/apk/res/android"
    android:id=”@+id/my_image_view”
    android:layout_width=”wrap_content”
    android:layout_height=”wrap_content”
    android:background=”@drawable/my_custom_circle”
    android:text=”@string/hello_world”
/&gt;

<ImageView

xmlns:android=”http://schemas.android.com/apk/res/android"

android:id=”@+id/my_image_view”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:background=”@drawable/my_custom_circle”

android:text=”@string/hello_world”

Thay vì dùng android:background, ta có thể dùng:

android:src=”@drawable/my_custom_circle”

1 2	android:src=”@drawable/my_custom_circle”

Sử dụng trên Java:

ImageView myImageView = (ImageView) findViewById(R.id.my_image_view);
imageView.setImageResource(R.drawable.my_custom_circle);

ImageView myImageView = (ImageView) findViewById(R.id.my_image_view);

imageView.setImageResource(R.drawable.my_custom_circle);

Chỉnh sửa shape bằng Java

Chúng ta cũng có thể chỉnh sửa shape drawable với java

Drawable drawable = getDrawable(R.drawable.button_shape);
GradientDrawable gradientDrawable = (GradientDrawable) drawable;
gradientDrawable.setColor(ContextCompat.getColor(this, R.color.colorPrimary));
gradientDrawable.setShape(GradientDrawable.OVAL);
gradientDrawable.setStroke(12, Color.CYAN);

Drawable drawable = getDrawable(R.drawable.button_shape);

GradientDrawable gradientDrawable = (GradientDrawable) drawable;

gradientDrawable.setColor(ContextCompat.getColor(this, R.color.colorPrimary));

gradientDrawable.setShape(GradientDrawable.OVAL);

gradientDrawable.setStroke(12, Color.CYAN);

Kết luận

Cảm ơn các bạn đã đọc bài viết, hi vọng bài viết sẽ giúp ích cho bạn.

Tham khảo: https://android.jlelse.eu/android-shape-drawables-tutorial-17fbece6fef5

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo