Giới thiệu
Bài viết hướng dẫn vẽ icon dấu tích (checkmark/tick) bên trong hình tròn bằng VectorDrawable. Icon này thường dùng cho trạng thái "hoàn thành", "đã chọn", "verified".
VectorDrawable hoàn chỉnh (res/drawable/ic_check_circle.xml)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<!-- Hình tròn nền xanh lá -->
<path
android:fillColor="#4CAF50"
android:pathData="M12,0C5.37,0 0,5.37 0,12s5.37,12 12,12 12,-5.37 12,-12S18.63,0 12,0z" />
<!-- Dấu tích trắng -->
<path
android:fillColor="#FFFFFF"
android:pathData="M12,16.5L6.5,11L5.5,12 12,18.5 18.5,5.5 17.5,4.5Z" />
</vector>
Giải thích pathData
- Hình tròn:
M12,0C5.37,0 0,5.37 0,12s5.37,12 12,12 12,-5.37 12,-12S18.63,0 12,0z- Trung tâm (12,12), bán kính 12 (viewport 24x24).
- Dùng bezier curve (C, S) để vẽ tròn trơn.
- Dấu tích:
M12,16.5L6.5,11L5.5,12 12,18.5 18.5,5.5 17.5,4.5Z- Vẽ polygon khép kín hình dạng dấu ✓.
- Điểm bắt đầu (12,16.5) → góc dưới trái (6.5,11) → điều chỉnh (5.5,12) → đỉnh (12,18.5) → góc dưới phải (18.5,5.5) → điều chỉnh (17.5,4.5) → close.
Giao diện hiển thị (res/layout/activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:padding="30dp">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/ic_check_circle"
android:contentDescription="Check mark in circle" />
</LinearLayout>
Các biến thể phổ biến
1. Chỉ viền tròn + tích (Outline style)
<vector ... android:viewportWidth="24" android:viewportHeight="24">
<!-- Viền tròn -->
<path
android:strokeColor="#4CAF50"
android:strokeWidth="2"
android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z" />
<!-- Tích -->
<path
android:fillColor="#4CAF50"
android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41-1.41L9,16.17z" />
</vector>
2. Material Design Check Circle (chuẩn Material Icons)
Có sẵn trong Material Icons: @drawable/ic_baseline_check_circle_24 hoặc download từ Google Fonts Icons.
3. Đổi màu động trong code
val drawable = ContextCompat.getDrawable(this, R.drawable.ic_check_circle)?.mutate() // Đổi màu nền tròn drawable?.setTintList(ColorStateList.valueOf(ContextCompat.getColor(this, R.color.success_green))) // Hoặc đổi màu riêng cho từng path (cần LayerDrawable hoặc AnimatedVectorDrawable) imageView.setImageDrawable(drawable)
Lưu ý
- Viewport 24x24 là chuẩn Material Design.
- Dùng
android:strokeWidthcho viền,android:fillColorcho fill. - Có thể animate chuyển đổi từ tròn trống → tích tròn với
AnimatedVectorDrawable. - Nên dùng
mutate()khi đổi màu để không ảnh hưởng drawable cache chung.