【Android】アクションバーに通知数バッジ付きアイコンを作成する方法

このチュートリアルでは、Androidアプリのアクションバー（ツールバー）に、通知の件数を表示するバッジ付きアイコンを作成する方法を解説します。通知が発行されるたびにカウントが増加し、アイコンの右上に数字として表示される仕組みを実装します。

ステップ1：新規プロジェクトの作成

Android Studioを開き、「File」→「New Project」を選択して新しいプロジェクトを作成します。必要な項目をすべて入力し、プロジェクトのセットアップを完了させてください。

ステップ2：activity_main.xml の編集

res/layout/activity_main.xml に以下のコードを追加します。ツールバー内に通知アイコンとバッジ表示用のTextViewを配置し、画面中央には通知を生成するためのボタンを設置しています。

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

    <Toolbar
        android:layout_width="match_parent"
        android:layout_height="?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/Base.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="16sp"
                    android:textStyle="bold" />
            </RelativeLayout>
        </RelativeLayout>
    </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：MainActivity の実装

src/MainActivity.java に以下のコードを追加します。ボタンがタップされると通知が生成され、同時にバッジの数値が1ずつ増加します。Android 8.0（API 26）以降では通知チャンネルの作成が必須となるため、その分岐処理も含まれています。

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.support.v4.app.NotificationCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    public static final String NOTIFICATION_CHANNEL_ID = "10001";
    private final static String default_notification_channel_id = "default";
    static int notificationCount = 0;
    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 notificationIntent = new Intent(getApplicationContext(), MainActivity.class);
        notificationIntent.putExtra("fromNotification", true);
        notificationIntent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP);
        PendingIntent pendingIntent = PendingIntent.getActivity(this, 0, notificationIntent, 0);

        NotificationManager mNotificationManager =
                (NotificationManager) getSystemService(NOTIFICATION_SERVICE);

        NotificationCompat.Builder mBuilder =
                new NotificationCompat.Builder(MainActivity.this, default_notification_channel_id);
        mBuilder.setContentTitle("My Notification");
        mBuilder.setContentIntent(pendingIntent);
        mBuilder.setContentText("Notification Listener Service Example");
        mBuilder.setTicker("Notification Listener Service Example");
        mBuilder.setSmallIcon(R.drawable.ic_launcher_foreground);
        mBuilder.setAutoCancel(true);

        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
            int importance = NotificationManager.IMPORTANCE_HIGH;
            NotificationChannel notificationChannel = new NotificationChannel(
                    NOTIFICATION_CHANNEL_ID, "NOTIFICATION_CHANNEL_NAME", importance);
            mBuilder.setChannelId(NOTIFICATION_CHANNEL_ID);
            assert mNotificationManager != null;
            mNotificationManager.createNotificationChannel(notificationChannel);
        }

        assert mNotificationManager != null;
        mNotificationManager.notify((int) System.currentTimeMillis(), mBuilder.build());

        notificationCount++;
        tvBadgeNumber.setText(String.valueOf(notificationCount));
    }
}

ステップ4：バッジ背景の作成（item_count.xml）

res/drawable/item_count.xml を作成し、以下のコードを追加します。角丸の青色（#2196F3）背景に白い枠線を付けた、バッジ用のシェイプを定義しています。

<?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="1dip"
        android:color="#FFF" />
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
</shape>

ステップ5：AndroidManifest.xml の編集

AndroidManifest.xml に以下のコードを記述します。振動機能を使用する場合に備えて VIBRATE パーミッションを宣言し、MainActivity をランチャーアクティビティとして登録しています。

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

動作確認とポイント

アプリを実行し、「create notification」ボタンをタップすると通知が発行され、アクションバー右側のアイコンにバッジ数が表示されます。通知自体には PendingIntent が設定されているため、通知をタップするとアプリの画面へ戻ることができます。

実装のポイントは以下の通りです。

• バッジは TextView の background に item_count.xml を指定することで、角丸の見た目を実現しています。
• notificationCount 変数をインクリメントし、setText() で即座にUIへ反映しています。
• Android 8.0 以降では NotificationChannel の作成が必須のため、Build.VERSION.SDK_INT によるバージョン判定を行っています。
• setAutoCancel(true) を指定することで、通知タップ後に自動的に通知が消えます。

この手法を応用すれば、メッセージアプリやSNSアプリでよく見られる「未読件数バッジ」を簡単に実装できます。実際のアプリでは、通知の既読処理に合わせてカウントをリセットするロジックを追加するとより実用的になります。