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

Đặt icon cho Notification Android (Small Icon & Large Icon)

Icon là yếu tố nhận diện quan trọng của Notification. Android yêu cầu Small Icon (bắt buộc, hiển thị trên status bar) và hỗ trợ Large Icon (tùy chọn, hiển thị lớn bên cạnh nội dung).

Các bước thực hiện

Bước 1: Tạo dự án mới

Tạo dự án Android Studio, package app.tutorialspoint.com.notifyme.

Bước 2: Chuẩn bị icon

  • Small Icon: Kích thước 24x24dp, màu trắng trong suốt (alpha), định dạng PNG hoặc Vector Drawable. Đặt trong res/drawable/ (ví dụ: ic_notification.xml vector).
  • Large Icon: Kích thước lớn hơn (thường 64x64dp hoặc 128x128dp), có màu sắc, dùng cho avatar, logo thương hiệu. Load từ BitmapFactory.decodeResource().

Bước 3: Giao diện (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnCreateNotification"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Tạo Notification với Icon"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Bước 4: Tạo Notification với Icon (src/MainActivity.java)

package app.tutorialspoint.com.notifyme;

import android.app.NotificationManager;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import androidx.core.app.NotificationCompat;
import androidx.appcompat.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private static final String DEFAULT_CHANNEL_ID = "default";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button btnCreateNotification = findViewById(R.id.btnCreateNotification);
        btnCreateNotification.setOnClickListener(v -> createNotificationWithIcons());
    }

    private void createNotificationWithIcons() {
        // Large Icon: load từ resource (ví dụ: mipmap/ic_launcher hoặc drawable tùy chỉnh)
        Bitmap largeIcon = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);

        NotificationCompat.Builder builder = new NotificationCompat.Builder(this, DEFAULT_CHANNEL_ID)
            .setSmallIcon(R.drawable.ic_launcher_foreground) // Bắt buộc: small icon (vector trắng trong suốt)
            .setLargeIcon(largeIcon)                         // Tùy chọn: large icon (bitmap có màu)
            .setContentTitle("Thông báo có Icon")
            .setContentText("Small icon trên status bar, Large icon bên cạnh nội dung")
            .setAutoCancel(true);

        NotificationManager manager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
        if (manager != null) {
            manager.notify(1, builder.build()); // ID cố định = 1 để cập nhật/deo đè
        }
    }
}

Bước 5: Tạo Small Icon Vector (res/drawable/ic_notification.xml)

Tạo file Vector Asset: New → Vector Asset → Clip Art → chọn icon → Opacity 100% → màu trắng (#FFFFFF).

<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="#FFFFFF"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM13,17h-2v-6h2v6zm0,-8h-2V7h2v2z"/>
</vector>

Bước 6: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.tutorialspoint.com.notifyme">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

So sánh Small Icon vs Large Icon

Đặc điểmSmall Icon (setSmallIcon)Large Icon (setLargeIcon)
Bắt buộcCóKhông
Vị tríStatus bar (thanh trạng thái), collapsed viewExpanded view, bên trái nội dung
Kích thước24x24dp~64x64dp (tùy thiết bị)
Phong cáchTrắng trong suốt (alpha only), Material DesignĐầy đủ màu, ảnh chụp, avatar
Định dạngVector Drawable (khuyến nghị) hoặc PNGBitmap (PNG, JPG, WebP)

Lưu ý quan trọng

  • Small Icon phải là vector trắng trong suốt. Nếu dùng icon màu, Android sẽ chỉ hiển thị silhouette (hình bóng) trắng, rất xấu.
  • Tạo Vector Asset: New → Vector Asset → Asset Type: Clip Art → chọn icon → Opacity 100% → Color: #FFFFFF.
  • setLargeIcon() nhận Bitmap. Dùng BitmapFactory.decodeResource() hoặc Glide/Picasso load từ URL.
  • ID notification = 1 (cố định) để cập nhật notification thay vì tạo mới nhiều cái.