วิธีแสดงจำนวน Notification บนไอคอน Toolbar ใน Android

ภาพรวม

ตัวอย่างนี้สาธิตการแสดง Badge Count (จำนวนการแจ้งเตือน) บนไอคอนใน Toolbar/ActionBar โดยอัปเดตตัวเลขทุกครั้งที่สร้าง Notification ใหม่

ขั้นตอนที่ 1: สร้างโปรเจกต์

Android Studio → File → New Project

ขั้นตอนที่ 2: Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="16dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="Notify Me"
                android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                android:textColor="#FFF"
                android:textStyle="bold" />

            <RelativeLayout
                android:id="@+id/notificationBadge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true">

                <RelativeLayout
                    android:id="@+id/badgeLayout"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingTop="8dp">

                    <Button
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:background="@drawable/action_notification" />

                </RelativeLayout>

                <TextView
                    android:id="@+id/tvBadgeNumber"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignTop="@id/badgeLayout"
                    android:layout_alignEnd="@id/badgeLayout"
                    android:background="@drawable/item_count"
                    android:text="0"
                    android:textColor="#FFF"
                    android:textSize="12sp"
                    android:textStyle="bold"
                    android:paddingStart="6dp"
                    android:paddingEnd="6dp" />

            </RelativeLayout>

        </RelativeLayout>

    </androidx.appcompat.widget.Toolbar>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="16dp"
        android:onClick="createNotification"
        android:text="Create Notification" />

</RelativeLayout>

ขั้นตอนที่ 3: Drawable Badge Background (res/drawable/item_count.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="8dp" />
    <solid android:color="#2196F3" />
    <stroke android:width="1dp" android:color="#FFF" />
    <padding
        android:bottom="2dp"
        android:left="6dp"
        android:right="6dp"
        android:top="2dp" />
</shape>

ขั้นตอนที่ 4: MainActivity.java

package app.tutorialspoint.com.notifyme;

import android.app.NotificationChannel;
import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.NotificationCompat;

public class MainActivity extends AppCompatActivity {
    public static final String NOTIFICATION_CHANNEL_ID = "10001";
    private final static String default_notification_channel_id = "default";
    
    private static int notificationCount = 0;
    private TextView tvBadgeNumber;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tvBadgeNumber = findViewById(R.id.tvBadgeNumber);
    }

    public void createNotification(View view) {
        Intent intent = new Intent(this, MainActivity.class);
        intent.putExtra("fromNotification", true);
        intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP);

        PendingIntent pendingIntent = PendingIntent.getActivity(
                this, 0, intent, PendingIntent.FLAG_IMMUTABLE);

        NotificationManager manager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
        NotificationCompat.Builder builder = new NotificationCompat.Builder(this, default_notification_channel_id)
                .setContentTitle("My Notification")
                .setContentText("Notification #" + (notificationCount + 1))
                .setTicker("New Notification")
                .setSmallIcon(R.drawable.ic_launcher_foreground)
                .setContentIntent(pendingIntent)
                .setAutoCancel(true);

        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
            NotificationChannel channel = new NotificationChannel(
                    NOTIFICATION_CHANNEL_ID, "Channel", NotificationManager.IMPORTANCE_HIGH);
            builder.setChannelId(NOTIFICATION_CHANNEL_ID);
            manager.createNotificationChannel(channel);
        }

        manager.notify((int) System.currentTimeMillis(), builder.build());
        
        // อัปเดต Badge Count
        notificationCount++;
        tvBadgeNumber.setText(String.valueOf(notificationCount));
    }
}

ขั้นตอนที่ 5: AndroidManifest.xml

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

    <uses-permission android:name="android.permission.VIBRATE" />

    <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>

ขยายความสามารถ: Badge บน App Icon (Launcher)

สำหรับ Badge บนไอคอนแอปใน Launcher (Home Screen) ให้ใช้ Notification Badge API (Android 8.0+):

// เปิด/ปิด Badge สำหรับ Channel
NotificationChannel channel = new NotificationChannel(CHANNEL_ID, "Name", IMPORTANCE_HIGH);
channel.setShowBadge(true); // หรือ false เพื่อปิด
manager.createNotificationChannel(channel);

// หรือยกเลิก Badge ทั้งแอป
manager.setNotificationsShowBadge(false);

Library แนะนำ: ShortcutBadger

รองรับ Launcher หลากหลาย (Samsung, Sony, HTC, Xiaomi, Nova, ฯลฯ)

// build.gradle
implementation "me.leolin:ShortcutBadger:1.1.22@aar"

// ใช้งาน
ShortcutBadger.applyCount(context, count);
ShortcutBadger.removeCount(context);