Cách vẽ hình ngôi sao (Star) bằng VectorDrawable trên Android

Giới thiệu

Bài viết hướng dẫn vẽ hình ngôi sao 5 cánh bằng VectorDrawable XML. Ngôi sao là hình phức tạp hơn tam giác/tròn, cần tính toán tọa độ các đỉnh.

VectorDrawable ngôi sao (res/drawable/ic_star.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">

    <path
        android:fillColor="#FFD700"
        android:pathData="M12,2 L15.09,8.26 L22,9.27 L17,14.14 L18.18,21.02 L12,17.77 L5.82,21.02 L7,14.14 L2,9.27 L8.91,8.26 Z" />

</vector>

Giải thích tọa độ (Viewport 24x24, tâm tại 12,12)

Ngôi sao 5 cánh đều có 10 đỉnh (5 đỉnh ngoài, 5 đỉnh trong xen kẽ). Tọa độ được tính toán từ hình học:

• Đỉnh trên: (12, 2)
• Đỉnh ngoài phải trên: (15.09, 8.26)
• Đỉnh ngoài phải: (22, 9.27)
• Đỉnh trong phải: (17, 14.14)
• Đỉnh ngoài dưới phải: (18.18, 21.02)
• Đỉnh dưới giữa: (12, 17.77)
• ... đối xứng qua trục dọc

Giao diện (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_star"
        android:contentDescription="Star icon" />

</LinearLayout>

Biến thể: Ngôi sao rỗng (Outline star)

<vector ... android:viewportWidth="24" android:viewportHeight="24">
    <path
        android:strokeColor="#FFD700"
        android:strokeWidth="2"
        android:fillColor="@android:color/transparent"
        android:pathData="M12,2 L15.09,8.26 L22,9.27 L17,14.14 L18.18,21.02 L12,17.77 L5.82,21.02 L7,14.14 L2,9.27 L8.91,8.26 Z" />
</vector>

Biến thể: Ngôi sao n cánh (tổng quát)

Để vẽ ngôi sao n cánh bất kỳ, tốt nhất dùng code Kotlin/Java tạo Path động:

fun createStarPath(cx: Float, cy: Float, outerRadius: Float, innerRadius: Float, points: Int = 5): Path {
    val path = Path()
    val angleStep = Math.PI / points
    var angle = -Math.PI / 2 // Bắt đầu từ đỉnh trên

    for (i in 0 until points * 2) {
        val radius = if (i % 2 == 0) outerRadius else innerRadius
        val x = cx + radius * Math.cos(angle)
        val y = cy + radius * Math.sin(angle)
        if (i == 0) path.moveTo(x, y) else path.lineTo(x, y)
        angle += angleStep
    }
    path.close()
    return path
}

// Dùng trong custom View hoặc tạo VectorDrawable động

Sử dụng Material Icons (Khuyên dùng)

Thay vì tự vẽ, hãy dùng icon có sẵn:

• ic_baseline_star_24 (đặc)
• ic_baseline_star_outline_24 (rỗng)
• ic_baseline_star_half_24 (nửa sao)

Download từ Google Fonts Icons hoặc thêm dependency Material Icons.

Lưu ý

• VectorDrawable scale tốt, không bị vỡ khi resize.
• PathData phức tạp khó maintain → ưu tiên dùng icon library chuẩn.
• Có thể animate fill/stroke với AnimatedVectorDrawable cho hiệu ứng rating star.