Cách vẽ icon đóng (Close/X) bằng VectorDrawable trên Android

Giới thiệu

Bài viết hướng dẫn vẽ icon đóng (close, X, dismiss) bằng VectorDrawable. Icon này gồm 2 đường chéo cắt nhau, thường đặt trong hình tròn hoặc vuông.

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

    <!-- Nền tròn đen (tùy chọn) -->
    <path
        android:fillColor="#FF000000"
        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 X trắng -->
    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M12,10.59L17.41,16 18.81,17.41 13.41,22 8,17.41 2.59,12 8,6.59 13.41,0 12,10.59z" />

</vector>

Giải thích pathData dấu X

• Đây là polygon 8 đỉnh tạo thành hình chữ X dày (có độ dày).
• 2 đường chéo: (2.59,12)↔(18.81,17.41) và (8,6.59)↔(13.41,22) + các điểm nối tạo độ dày.
• Cách đơn giản hơn: dùng strokeWidth cho 2 line.

Phiên bản đơn giản (2 line stroke)

<vector android:viewportWidth="24" android:viewportHeight="24">
    <path
        android:strokeColor="#FFFFFF"
        android:strokeWidth="2.5"
        android:strokeLineCap="round"
        android:pathData="M6,6 L18,18 M18,6 L6,18" />
</vector>

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_close"
        android:contentDescription="Close icon" />

</LinearLayout>

Biến thể phổ biến

1. Material Design Close Icon (chuẩn)

Có sẵn: @drawable/ic_baseline_close_24, ic_baseline_clear_24.

2. Close trong tròn (Circle + X)

<vector android:viewportWidth="24" android:viewportHeight="24">
    <path android:fillColor="#000000" android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/>
    <path android:fillColor="#FFFFFF" android:pathData="M12,10.59L17.41,16 18.81,17.41 13.41,22 8,17.41 2.59,12 8,6.59 13.41,0 12,10.59z"/>
</vector>

3. Close trong vuông (Square + X)

<vector android:viewportWidth="24" android:viewportHeight="24">
    <path android:fillColor="#000000" android:pathData="M2,2h20v20H2z"/>
    <path android:fillColor="#FFFFFF" android:pathData="M6,6 L18,18 M18,6 L6,18" android:strokeWidth="2" android:strokeLineCap="round"/>
</vector>

Sử dụng trong code

// Đặt làm close button cho Dialog/BottomSheet
val closeButton = findViewById<ImageView>(R.id.ivClose)
closeButton.setImageResource(R.drawable.ic_close)
closeButton.setOnClickListener { dialog.dismiss() }

// Đổi màu tint
closeButton.setColorFilter(ContextCompat.getColor(this, R.color.white))

Lưu ý

• Icon close rất phổ biến, nên dùng Material Icons có sẵn thay vì tự vẽ.
• Kích thước touch target khuyến nghị ≥ 48dp (Material Design).
• VectorDrawable cho phép animate xoay 90° khi mở/đóng menu.