Cách vẽ hình trái tim (Love/Heart) bằng VectorDrawable trên Android

Giới thiệu

Bài viết hướng dẫn vẽ hình trái tim (heart shape) bằng VectorDrawable XML. Trái tim là hình dạng phức tạp, thường dùng bezier curves để tạo độ cong mượt mà.

VectorDrawable trái tim (res/drawable/ic_heart.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="#E91E63"
        android:pathData="M12,21.35l-1.45-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78-3.4,6.86-8.55,11.54L12,21.35z" />

</vector>

Giải thích pathData (SVG Heart Path chuẩn)

• Bắt đầu từ đỉnh dưới giữa M12,21.35.
• Dùng cubic bezier curves (C ngầm hiểu qua control points) để tạo 2 bầu trên.
• Đối xứng qua trục dọc x=12.
• Kết thúc tại điểm bắt đầu (z ngầm hiểu).

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_heart"
        android:contentDescription="Heart icon" />

</LinearLayout>

Các biến thể

1. Trái tim rỗng (Outline heart)

<vector android:viewportWidth="24" android:viewportHeight="24">
    <path
        android:strokeColor="#E91E63"
        android:strokeWidth="2"
        android:fillColor="@android:color/transparent"
        android:pathData="M12,21.35l-1.45-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78-3.4,6.86-8.55,11.54L12,21.35z" />
</vector>

2. Trái tim đơn giản (Simple heart - ít point hơn)

<vector android:viewportWidth="24" android:viewportHeight="24">
    <path android:fillColor="#FF0000"
        android:pathData="M16.5,3.99c-1.2,0 -2.3,0.5 -3.5,1.3 -1.2,-0.8 -2.3,-1.3 -3.5,-1.3 -2.8,0 -5,2.2 -5,5 0,2.1 1.3,3.9 3,4.6 1.7,-0.7 3,-2.5 3,-4.6 0,-2.8 2.2,-5 5,-5zm-3,13.5c-2.5,0 -4.5,-2 -4.5,-4.5s2,-4.5 4.5,-4.5 4.5,2 4.5,4.5 -2,4.5 -4.5,4.5z" />
</vector>

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

• ic_baseline_favorite_24 (đặc đỏ)
• ic_baseline_favorite_border_24 (rỗng)
• ic_baseline_favorite_half_24 (nửa tim)

Animation: Like button (Heart beat)

<!-- res/anim/heart_beat.xml -->
<set xmlns:android="https://schemas.android.com/apk/res/android">
    <scale
        android:duration="150"
        android:fromXScale="1.0" android:toXScale="1.3"
        android:fromYScale="1.0" android:toYScale="1.3"
        android:pivotX="50%" android:pivotY="50%"
        android:repeatCount="1" android:repeatMode="reverse" />
</set>

// Kotlin
val anim = AnimationUtils.loadAnimation(this, R.anim.heart_beat)
ivHeart.startAnimation(anim)
// Hoặc dùng AnimatedVectorDrawable cho mượt hơn

Lưu ý

• PathData trái tim chuẩn phức tạp, dễ sai sót khi sửa tay → copy từ SVG tin cậy.
• VectorDrawable cho phép animate từng path riêng biệt (fill, stroke, transform).
• Nên dùng mutate() khi đổi màu runtime.