Androidでツールバーアイコンに通知数（バッジ）を表示する方法

この記事では、Androidアプリのツールバー（Toolbar）にある通知アイコンの上に、通知の件数を示すバッジを表示する方法を解説します。ボタンをタップするたびに通知が生成され、アイコン右上のバッジ数字がカウントアップされていくサンプルアプリを、段階的に作成していきます。

手順1：新規プロジェクトを作成する

まず、Android Studioで新しいプロジェクトを作成します。メニューから「File」→「New Project」を選択し、必要な項目をすべて入力してプロジェクトを作成しましょう。

手順2：activity_main.xml にコードを追加する

res/layout/activity_main.xml を開き、以下のコードを記述します。ツールバー内に「Notify Me」というテキストと通知アイコン（Button）、さらにバッジ用のTextView（tvBadgeNumber）を配置し、アイコンの右上に重ねて表示できるようにしています。

<? 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.java にコードを追加する

src/MainActivity.java に以下のコードを記述します。createNotification() メソッド内で通知を生成すると同時に notificationCount をインクリメントし、バッジの数字を更新しています。なお、Android 8.0（API レベル26）以降では通知チャンネルの作成が必須となるため、OSバージョンを判定したうえでチャンネルを登録する処理も組み込んでいます。

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）背景に白い枠線を付けた、バッジ用のシェープドローダブルを定義しています。padding を指定することで、数字がバッジの中で見やすく配置されます。

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

アプリを実行して動作を確認しよう

それでは、実際にアプリを実行してみましょう。実機のAndroidスマートフォンをパソコンに接続していることを前提としています。Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。実行デバイスとして自分のスマートフォンを選択すると、端末にアプリの初期画面が表示されます。

画面中央の「create notification」ボタンをタップするたびに通知が発行され、ツールバー右側の通知アイコン上にあるバッジの数字が1ずつ増えていくことが確認できます。この仕組みを応用すれば、未読メッセージ数やお知らせ件数など、さまざまな場面でユーザーに視覚的なフィードバックを提供できます。