एंड्रॉइड में टूलबार आइकन पर नोटिफिकेशन काउंट कैसे दिखाएँ?

यह गाइड **कस्टम टूलबार लेआउट** और **बैज ड्रॉएबल** का उपयोग करके टूलबार/एक्शन बार आइकन पर नोटिफिकेशन काउंट बैज (लाल गोला जिसमें संख्या हो) प्रदर्शित करने का तरीका दिखाता है।

दृष्टिकोण

एंड्रॉइड में बिल्ट-इन बैज API नहीं है (शॉर्टकट बैज के अलावा जो लॉन्चर आइकन के लिए हैं)। टूलबार के लिए, हम एक कस्टम लेआउट बनाते हैं जिसमें एक TextView होता है जिसे बैज ड्रॉएबल के साथ स्टाइल किया जाता है।

चरण 1: बैज ड्रॉएबल (res/drawable/badge_background.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:shape="oval">  <!-- गोलाकार बैज के लिए oval -->
    <solid android:color="#FF0000" />  <!-- लाल पृष्ठभूमि -->
    <size android:width="20dp" android:height="20dp" />
    <stroke android:width="2dp" android:color="#FFFFFF" /> <!-- सफेद बॉर्डर -->
</shape>

चरण 2: टूलबार लेआउट (res/layout/toolbar_with_badge.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_marginEnd="8dp">

        <!-- नोटिफिकेशन आइकन -->
        <ImageView
            android:id="@+id/ivNotificationIcon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/ic_notifications"
            android:contentDescription="नोटिफिकेशन" />

        <!-- बैज TextView -->
        <TextView
            android:id="@+id/tvBadgeCount"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/ivNotificationIcon"
            android:layout_alignEnd="@id/ivNotificationIcon"
            android:background="@drawable/badge_background"
            android:text="0"
            android:textColor="#FFFFFF"
            android:textSize="10sp"
            android:textStyle="bold"
            android:gravity="center"
            android:minWidth="20dp"
            android:minHeight="20dp"
            android:paddingHorizontal="4dp"
            android:visibility="gone" />  <!-- डिफ़ॉल्ट रूप से छिपा -->

    </RelativeLayout>

</androidx.appcompat.widget.Toolbar>

चरण 3: मेनू आइटम के रूप में वैकल्पिक (menu/main_menu.xml)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="नोटिफिकेशन"
        app:actionLayout="@layout/toolbar_badge_layout"
        app:showAsAction="always" />

</menu>

res/layout/toolbar_badge_layout.xml (मेनू आइटम एक्शन लेआउट के लिए)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:paddingEnd="8dp">

    <ImageView
        android:id="@+id/ivMenuNotificationIcon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_notifications"
        android:contentDescription="नोटिफिकेशन" />

    <TextView
        android:id="@+id/tvMenuBadgeCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/ivMenuNotificationIcon"
        android:layout_alignEnd="@id/ivMenuNotificationIcon"
        android:background="@drawable/badge_background"
        android:text="0"
        android:textColor="#FFFFFF"
        android:textSize="10sp"
        android:textStyle="bold"
        android:gravity="center"
        android:minWidth="20dp"
        android:minHeight="20dp"
        android:paddingHorizontal="4dp"
        android:visibility="gone" />

</RelativeLayout>

चरण 4: MainActivity.java

package com.example.toolbarbadge;

import android.app.NotificationChannel;
import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Context;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.app.NotificationCompat;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private static final String CHANNEL_ID = "toolbar_badge_channel";
    private static final String CHANNEL_NAME = "टूलबार बैज नोटिफिकेशन";

    private TextView tvBadgeCount;  // टूलबार लेआउट दृष्टिकोण के लिए
    private TextView tvMenuBadgeCount; // मेनू आइटम दृष्टिकोण के लिए
    private int notificationCount = 0;

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

        // दृष्टिकोण 1: टूलबार लेआउट में कस्टम व्यू
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        tvBadgeCount = findViewById(R.id.tvBadgeCount);

        // दृष्टिकोण 2: मेनू आइटम एक्शन लेआउट के लिए
        // tvMenuBadgeCount को onCreateOptionsMenu में प्रारंभ किया जाता है

        Button btnNotify = findViewById(R.id.btnCreateNotification);
        btnNotify.setOnClickListener(v -> createNotification());

        createNotificationChannel();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        
        // मेनू आइटम एक्शन व्यू से बैज TextView प्राप्त करें
        MenuItem item = menu.findItem(R.id.action_notifications);
        View actionView = item.getActionView();
        if (actionView != null) {
            tvMenuBadgeCount = actionView.findViewById(R.id.tvMenuBadgeCount);
            // आइकन क्लिक संभालें
            actionView.setOnClickListener(v -> onNotificationIconClick());
        }
        return true;
    }

    private void createNotification() {
        notificationCount++;

        Intent intent = new Intent(this, MainActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP);
        PendingIntent pendingIntent = PendingIntent.getActivity(
            this, 0, intent, PendingIntent.FLAG_IMMUTABLE | PendingIntent.FLAG_UPDATE_CURRENT);

        NotificationCompat.Builder builder = new NotificationCompat.Builder(this, CHANNEL_ID)
            .setSmallIcon(R.drawable.ic_launcher_foreground)
            .setContentTitle("नोटिफिकेशन #" + notificationCount)
            .setContentText("टूलबार बैज अपडेट: " + notificationCount)
            .setPriority(NotificationCompat.PRIORITY_HIGH)
            .setContentIntent(pendingIntent)
            .setAutoCancel(true);

        NotificationManager manager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
        manager.notify((int) System.currentTimeMillis(), builder.build());

        // दोनों बैज अपडेट करें
        updateBadge(notificationCount);
    }

    private void updateBadge(int count) {
        // दृष्टिकोण 1: टूलबार कस्टम व्यू
        if (tvBadgeCount != null) {
            if (count > 0) {
                tvBadgeCount.setText(count > 99 ? "99+" : String.valueOf(count));
                tvBadgeCount.setVisibility(View.VISIBLE);
            } else {
                tvBadgeCount.setVisibility(View.GONE);
            }
        }

        // दृष्टिकोण 2: मेनू आइटम एक्शन व्यू
        if (tvMenuBadgeCount != null) {
            if (count > 0) {
                tvMenuBadgeCount.setText(count > 99 ? "99+" : String.valueOf(count));
                tvMenuBadgeCount.setVisibility(View.VISIBLE);
            } else {
                tvMenuBadgeCount.setVisibility(View.GONE);
            }
        }
    }

    private void onNotificationIconClick() {
        // नोटिफिकेशन सूची/एक्टिविटी खोलें
        notificationCount = 0;
        updateBadge(0);
    }

    private void createNotificationChannel() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            NotificationChannel channel = new NotificationChannel(
                CHANNEL_ID, CHANNEL_NAME, NotificationManager.IMPORTANCE_HIGH);
            channel.setDescription("टूलबार बैज अपडेट करने वाले नोटिफिकेशन");
            NotificationManager manager = getSystemService(NotificationManager.class);
            manager.createNotificationChannel(channel);
        }
    }
}

चरण 5: 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"
    tools:context=".MainActivity">

    <!-- कस्टम टूलबार बैज के साथ -->
    <include layout="@layout/toolbar_with_badge" />

    <Button
        android:id="@+id/btnCreateNotification"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="नोटिफिकेशन बनाएँ (काउंट बढ़ाएँ)"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="नोटिफिकेशन आइकन पर बैज काउंट देखें"
        android:textSize="14sp"
        android:textColor="#666"
        app:layout_constraintTop_toBottomOf="@id/btnCreateNotification"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

चरण 6: AndroidManifest.xml

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

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

    <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/Theme.ToolbarBadge">

        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

थीम्स (res/values/themes.xml)

<resources>
    <style name="Theme.ToolbarBadge" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">#1976D2</item>
        <item name="colorPrimaryVariant">#1565C0</item>
        <item name="colorOnPrimary">#FFFFFF</item>
    </style>
</resources>

आइकन संसाधन

res/drawable/ic_notifications.xml (वेक्टर):

<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,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.9,2 2,2zM18,16v-5c0,-3.07 -1.64,-5.64 -4.5,-6.32V4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2z"/>
</vector>

उन्नत: एनिमेटेड बैज

// काउंट बदलते समय स्केल एनिमेशन
private void animateBadge(TextView badge, int newCount) {
    badge.setText(newCount > 99 ? "99+" : String.valueOf(newCount));
    badge.setVisibility(View.VISIBLE);
    
    badge.animate()
        .scaleX(1.3f).scaleY(1.3f)
        .setDuration(100)
        .withEndAction(() -> badge.animate()
            .scaleX(1f).scaleY(1f)
            .setDuration(100)
            .start())
        .start();
}

उन्नत: शून्य पर ऑटो-हाइड के साथ बैज ड्रॉएबल

// BadgeDrawable सहायक वर्ग
public class BadgeDrawable extends Drawable {
    private final TextView badgeTextView;
    private int count = 0;

    public BadgeDrawable(TextView badgeTextView) {
        this.badgeTextView = badgeTextView;
    }

    public void setCount(int count) {
        this.count = count;
        if (count > 0) {
            badgeTextView.setText(count > 99 ? "99+" : String.valueOf(count));
            badgeTextView.setVisibility(View.VISIBLE);
        } else {
            badgeTextView.setVisibility(View.GONE);
        }
    }
}

तृतीय-पक्ष पुस्तकालय (वैकल्पिक)

अधिक जटिल बैज (एनिमेशन, विभिन्न आकृतियाँ, लॉन्चर शॉर्टकट बैज) के लिए:

• ShortcutBadger: लॉन्चर आइकन बैज (सैमसंग, एलजी, सोनी, आदि)
• MaterialBadge: मटेरियल डिज़ाइन बैज व्यू
• AHBottomNavigation: बॉटम नेविगेशन बैज के साथ

सर्वोत्तम अभ्यास

1. 99+ पर कैप करें: दो अंकों से अधिक UI को अव्यवस्थित करता है
2. शून्य पर छिपाएँ: खाली बैज न दिखाएँ
3. कंट्रास्ट रंग: सफेद टेक्स्ट के साथ लाल/नारंगी पृष्ठभूमि
4. सुलभता: आइकन के लिए contentDescription जोड़ें
5. स्थिति सिंक करें: ऐप पुनः आरंभ पर साझा प्राथमिकता/डेटाबेस से काउंट पुनर्स्थापित करें