Cách vẽ icon hồ sơ (Profile/User) bằng VectorDrawable trên Android

Giới thiệu

Bài viết hướng dẫn vẽ icon người dùng (profile/user avatar) phổ biến: hình tròn đại diện đầu + hình nửa elip đại diện vai, bằng VectorDrawable.

VectorDrawable Profile Icon (res/drawable/ic_profile.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">

    <!-- Đầu (hình tròn) -->
    <path
        android:fillColor="#2196F3"
        android:pathData="M12,4C16.42,4 20,7.58 20,12c0,1.82-0.48,3.53-1.33,5L12,22 5.33,17C4.48,15.53 4,13.82 4,12C4,7.58 7.58,4 12,4z" />

    <!-- Vai (nửa elip) -->
    <path
        android:fillColor="#2196F3"
        android:pathData="M4,22C4,16.48 8.48,12 12,12s8,4.48 8,10H4z" />

</vector>

Giải thích pathData

• Đầu (Circle): M12,4C16.42,4 20,7.58 20,12c0,1.82-0.48,3.53-1.33,5L12,22 5.33,17C4.48,15.53 4,13.82 4,12C4,7.58 7.58,4 12,4z
  • Dùng bezier curve (C, c) vẽ hình tròn tâm (12,12) bán kính 8.
  • Sau đó nối đường line (L) xuống vai để tạo shape liên tục.
• Vai (Half ellipse): M4,22C4,16.48 8.48,12 12,12s8,4.48 8,10H4z
  • Nửa elip dưới từ (4,22) đến (20,22) với đỉnh cung tại (12,12).
  • H4: Horizontal line về x=4, z: close path.

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_profile"
        android:contentDescription="Profile icon" />

</LinearLayout>

Biến thể phổ biến

1. Icon profile đơn giản (Material Design style)

<vector android:viewportWidth="24" android:viewportHeight="24">
    <path android:fillColor="#000000"
        android:pathData="M12,12c2.21,0 4,-1.79 4,-4s-1.79,-4 -4,-4 -4,1.79 -4,4 1.79,4 4,4zm0,2c-2.67,0 -8,1.34 -8,4v2h16v-2c0,-2.66 -5.33,-4 -8,-4z" />
</vector>

2. Profile với badge (notification dot)

<vector android:viewportWidth="24" android:viewportHeight="24">
    <!-- Profile -->
    <path android:fillColor="#2196F3" android:pathData="M12,12c2.21,0 4,-1.79 4,-4s-1.79,-4 -4,-4 -4,1.79 -4,4 1.79,4 4,4zm0,2c-2.67,0 -8,1.34 -8,4v2h16v-2c0,-2.66 -5.33,-4 -8,-4z"/>
    <!-- Badge đỏ góc trên phải -->
    <path android:fillColor="#F44336" android:pathData="M18,6c0,-1.1 -0.9,-2 -2,-2s-2,0.9 -2,2 0.9,2 2,2 2,-0.9 2,-2z"/>
</vector>

3. Sử dụng Material Icons có sẵn

• ic_baseline_person_24 / ic_baseline_account_circle_24
• ic_baseline_person_outline_24

Đổi màu động

val drawable = ContextCompat.getDrawable(this, R.drawable.ic_profile)?.mutate()
drawable?.setTint(ContextCompat.getColor(this, R.color.user_avatar_color))
imageView.setImageDrawable(drawable)

Lưu ý

• Icon profile phức tạp, khuyến nghị dùng Material Icons chuẩn để đảm bảo tính nhất quán.
• Nếu tự vẽ, hãy test trên nhiều density (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).
• VectorDrawable hỗ trợ android:autoMirrored="true" cho RTL.