Cách vẽ hình tam giác (Triangle) bằng VectorDrawable trên Android

Giới thiệu

Bài viết hướng dẫn vẽ hình tam giác đơn giản bằng VectorDrawable (XML) và hiển thị qua ImageView. VectorDrawable có ưu điểm: scale không bị mờ, kích thước file nhỏ, hỗ trợ animation.

Các bước thực hiện

Bước 1: Tạo project mới

Android Studio → File → New Project → Empty Activity.

Bước 2: Tạo VectorDrawable tam giác (res/drawable/ic_triangle.xml)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <!-- Tam giác đều hướng lên, đỉnh ở giữa trên -->
    <path
        android:fillColor="#000000"
        android:pathData="M12,2 L22,22 L2,22 Z" />

</vector>

Giải thích pathData:

• M12,2: Move to (12,2) - đỉnh trên giữa (viewport 24x24).
• L22,22: Line to (22,22) - góc dưới phải.
• L2,22: Line to (2,22) - góc dưới trái.
• Z: Close path (vẽ line về điểm M).

Bước 3: 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_triangle"
        android:contentDescription="Triangle icon" />

</LinearLayout>

Các biến thể tam giác thường dùng

1. Tam giác vuông (Right triangle)

<path android:fillColor="#FF0000" android:pathData="M0,0 L24,0 L0,24 Z" />

2. Tam giác hướng xuống (Downward)

<path android:fillColor="#00FF00" android:pathData="M12,22 L2,2 L22,2 Z" />

3. Tam giác hướng phải (Rightward) - mũi tên

<path android:fillColor="#0000FF" android:pathData="M2,12 L22,2 L22,22 Z" />

4. Tam giác đều chính xác (toán học)

Viewport 24x24, tam giác đều cạnh length = 24:

<!-- Chiều cao tam giác đều: h = a * sqrt(3)/2 ≈ 20.78 -->
<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="#FF5722"
        android:pathData="M12,1.62 L22.39,21.62 L1.61,21.62 Z" />
</vector>

Sử dụng trong code (Dynamic color)

// Đổi màu tam giác trong code
val imageView = findViewById<ImageView>(R.id.ivTriangle)
val drawable = ContextCompat.getDrawable(this, R.drawable.ic_triangle)?.mutate()
drawable?.setTint(ContextCompat.getColor(this, R.color.design_default_color_error))
imageView.setImageDrawable(drawable)

Lưu ý

• VectorDrawable yêu cầu android.defaultConfig.vectorDrawables.useSupportLibrary = true (Gradle) cho API < 21, hoặc dùng AppCompat.
• android:viewportWidth/Height định nghĩa hệ tọa độ logic, không phải pixel thực tế.
• Có thể animate pathData với AnimatedVectorDrawable.