Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Android

Kích thước icon nút hành động trong thông báo Android

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