Thông số kỹ thuật Icon Action Button
Khi tạo các nút hành động (NotificationCompat.Action) trong thông báo Android, icon phải tuân thủ các quy chuẩn sau:
| Thông số | Giá trị |
|---|---|
| Kích thước Asset (Asset Size) | 32dp × 32dp |
| Khu vực hiển thị quang học (Optical Square) | 24dp × 24dp |
| Màu khi kích hoạt (Enabled) | #FFFFFF (trắng) với 80% opacity |
| Màu khi vô hiệu hóa (Disabled) | #FFFFFF (trắng) với 30% opacity |
Giải thích chi tiết
1. Asset Size (32dp × 32dp)
Kích thước file ảnh vector (XML VectorDrawable) hoặc bitmap bạn cung cấp. Hệ thống sẽ scale xuống phù hợp.
2. Optical Square (24dp × 24dp)
Khu vực nội dung thực tế của icon bên trong asset 32dp. Phần viền 4dp xung quanh là padding an toàn để icon không bị cắt khi scale trên các mật độ màn hình khác nhau (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).
3. Màu sắc
- Icon action button luôn được tint (nhuộm màu) bởi hệ thống
- Không nên dùng icon nhiều màu → chỉ dùng hình dạng đơn sắc (trắng trong file nguồn)
- Hệ thống tự áp dụng opacity 80% (enabled) hoặc 30% (disabled)
Ví dụ tạo VectorDrawable chuẩn (res/drawable/ic_action.xml)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="32dp"
android:height="32dp"
android:viewportWidth="32"
android:viewportHeight="32">
<!-- Optical bounds 24x24 ở trung tâm -->
<group
android:translateX="4"
android:translateY="4">
<path
android:fillColor="#FFFFFF"
android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z"/>
</group>
</vector>
Sử dụng trong code
NotificationCompat.Action action = new NotificationCompat.Action.Builder(
R.drawable.ic_action, // Icon 32dp vector
"Trả lời", // Label
replyPendingIntent // PendingIntent
).build();
notificationBuilder.addAction(action);
Lưu ý thiết kế
- Luôn test trên nhiều mật độ màn hình (mdpi → xxxhdpi)
- Icon nên đơn giản, dễ nhận diện ở kích thước nhỏ
- Tránh chữ trong icon action button
- Material Design khuyến nghị: hình tròn, vuông bo góc, hoặc hình dạng brand