Tại sao bạn nên sử dụng ?
Nếu muốn sử dụng hình ảnh có định dạng PNG hoặc JPEG trong ứng dụng, bạn phải cung cấp nhiều bản sao của cùng một hình ảnh theo độ phân giải màn hình. Điều này làm cho việc thiết kế ứng dụng trở nên phức tạp, kích thước của ứng dụng sau khi build lớn. Và đó là con đường chúng ta phải chọn vì chúng ta không thể sử dụng Drawables cho mọi trường hợp, nhưng chúng ta có thể giảm đáng kể kích thước ứng dụng của mình nếu chúng ta có thể sử dụng Drawables thay thế. ShapeDrawables là một chuỗi các lệnh cho biết cách vẽ một cái gì đó trên màn hình. Như vậy, chúng có thể được thay đổi kích thước và kéo dài bao nhiêu tùy thích, mà không làm mất chất lượng. Chúng ta có thể đổi màu và thao tác chúng ngay cả khi ứng dụng đang chạy và sử dụng cùng ShapeDrawable nhiều lần trong ứng dụng của chúng ta. Vì ShapeDrawables là một lớp con của lớp trừu tượng Drawable , chúng ta có thể sử dụng chúng trong các phương thức mà Drawable có .Các bạn có thể xem thêm tài liệu về nó ở đây.
Nó có điểm yếu nào không?
Chúng ta có thể sử dụng ShapeDrawable trong mọi trường hợp. Mình đã nói trước đó rằng lớp ShapeDrawable là một lớp con của lớp trừu tượng Drawable. Cũng có các lớp con khác và mỗi một trong số chúng có trường hợp sử dụng riêng. Bạn có thể nhấp vào đây để kiểm tra các loại Drawable khác và tìm ra loại nào phù hợp với trường hợp của bạn. Một vấn đề khác là nó mất nhiều thời gian hơn để vẽ so với Bitmap vì có rất nhiều nhiệm vụ (phân tích cú pháp và draw) được diễn ra ở phía sau bối cảnh đó. Nhưng đó không phải là vấn đề lớn nếu Drawables của bạn là một hình ảnh đơn giản. Ý kiến của tôi là bạn nên sử dụng Drawables (ShapeDrawables) bất cứ nơi nào bạn có thể, bởi vì chúng dễ sửa đổi và chúng không mất nhiều không gian.
Trước tiên, ta có một ví dụ đơn giản và sau đó chúng ta sẽ tạo lại một gradient như thế này:
Đây là code cho ví dụ trên:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:bottomRightRadius="10dp"
android:radius="40dp"/>
<gradient
android:angle=""
android:centerX="float"
android:centerY="float"
android:endColor="#01f1fa"
android:gradientRadius="integer"
android:startColor="#0189ff"
android:type="linear" />
<size
android:width="82dp"
android:height="82dp"/>
<stroke
android:width="2dp"
android:color="#FF0000"
android:dashGap="1dp"
android:dashWidth="4dp"/>
</shape>
Một số thuộc tính hữu ích mà bạn có thể sử dụng khi xác định hình dạng:
1. Kiểu hình (shape) Bạn có thể chỉ định loại hình dạng bằng thuộc tính android: shape XML trong thẻ hình dạng. Nếu bạn không chỉ định hình dạng, loại hình chữ nhật mặc định được chọn. Các hình dạng có sẵn khác là hình bầu dục, đường và vòng.
android:shape="oval"
2. Kiểu bo tròn góc (radius) Vì hình dạng của chúng ta là một hình chữ nhật, chúng ta có thể làm tròn các góc hình chữ nhật. Bạn có thể làm điều đó bên trong thẻ góc (corners). Bạn có thể chỉ định bán kính cho tất cả các góc bằng android: radius.
android:radius="21dp"
Tất nhiên, bạn có thể sử dụng giá trị từ dimens resource file. Nếu bạn muốn thử nhiều kiểu bo tròn hơn một chút, bạn có thể bo tròn theo mức độ khác nhau cho mỗi góc.Và chúng ta sẽ làm điều đó bằng cách sử dụng android: topLeftRadius, android: topRightRadius, android: bottomLeftRadius và android: bottomRightRadius.
android:bottomLeftRadius="10dp"
3. Gradient hoặc solid color Nếu bạn muốn sử dụng màu đơn sắc, bạn nên sử dụng thẻ solid và sau đó bên trong thẻ đó, bạn có thể chỉ định màu bằng android: color
android:color=@color/your_color_name
Tất cả các thuộc tính gradient phải nằm trong thẻ gradient. Bạn có thể chỉ định màu bắt đầu, trung tâm và màu kết thúc bằng android: startColor, android: centerColor và android: endColor.
android:startColor=@color/your_color_name android:centerColor=@color/your_color_name android:endColor=@color/your_color_name
Nếu bạn không chỉ định loại gradient, thuộc tính mặc định được chọn. Các loại khác là radial và sweep. Dưới đây là cách chỉ định loại gradient:
android:type="radial"
Bạn thậm chí có thể thay đổi góc của gradient. Ví dụ: nếu bạn muốn độ dốc của bạn đi từ dưới cùng bên trái sang trên cùng bên phải, bạn phải đặt góc của mình thành android: angle = "45" (lưu ý rằng góc phải là bội số của 45).
4. Chỉ định kích thước Bạn có thể chỉ định kích thước của hình. Hãy nhớ rằng bạn có thể thay đổi kích thước sau này, ví dụ như khi bạn sử dụng ShapeDrawable trong ImageView. Bạn có thể thay đổi kích thước bên trong thẻ kích thước. android: layoutheight và android: layoutwidth được sử dụng để làm điều đó. Bạn có thể biết hai rõ 2 thuộc tính này rồi chứ :
android:layout_height="40dp" android:layout_width="10dp"
5. Stroke (viền xung quanh hình) Đôi khi bạn muốn có một đường viền xung quanh hình của bạn và để làm điều đó bạn có thể sử dụng thẻ stroke. Bạn có thể chỉ định chiều rộng và màu của đường viền bằng android: width và android: color.
android:width="2dp" android:color=@color/your_beautiful_color
Bạn thậm chí có thể có dấu gạch ngang như một đường viền xung quanh hình của bạn. Để có được hiệu ứng đó, bạn phải sử dụng hai thuộc tính sau: android: dashGap, android: dashWidth.
android:dashGap="1dp" android:dashWidth="4dp"
Các bạn có thể tìm hiểu thêm và xem kỹ các thuộc tính tại đây
Sử dụng hình của bạn trong Chế độ xem của Android Studio
Sau khi bạn hài lòng với hình của mình, bạn có thể sử dụng nó trong Chế độ xem (View). Đây là cách bạn có thể sử dụng hình dạng vòng tròn trong ImageView bằng XML.
<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ì sử dụng thuộc tính android: background, bạn có thể sử dụng:
android:src="@drawable/my_custom_circle"
Đây là cách bạn có thể sử dụng bằng Java
ImageView myImageView = (ImageView) findViewById(R.id.my_image_view); imageView.setImageResource(R.drawable.my_custom_circle);
Cám ơn các bạn đã quan tâm đến bài viết này
Nguồn: https://android.jlelse.eu/android-shape-drawables-tutorial-17fbece6fef5
