이 예제는 안드로이드 앱의 액션바(툴바)에 읽지 않은 알림 개수를 표시하는 배지(Badge) 아이콘을 만드는 방법을 단계별로 설명합니다. 메신저나 SNS 앱에서 흔히 볼 수 있는, 벨 모양 아이콘 위에 숫자가 표시되는 UI를 직접 구현해 보겠습니다.
구현 방식 요약
핵심 아이디어는 간단합니다. 툴바 안에 알림 아이콘과 그 위에 겹쳐 배치한 TextView를 두고, 알림이 생성될 때마다 카운터 변수의 값을 TextView에 갱신하는 것입니다.
1단계 — 새 프로젝트 생성
안드로이드 스튜디오에서 File ⇒ New Project를 선택해 새 프로젝트를 만들고, 필요한 정보를 모두 입력합니다.
2단계 — 레이아웃 작성 (activity_main.xml)
res/layout/activity_main.xml에 다음 코드를 추가합니다. 툴바 안에 제목 텍스트, 알림 버튼, 그리고 배지 숫자를 표시할 TextView(notificationBadge 영역)를 함께 배치했습니다.
<?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에 다음 코드를 추가합니다. 버튼을 클릭하면 시스템에 알림을 게시하고, notificationCount를 1씩 증가시켜 tvBadgeNumber에 표시합니다.
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단계 — 배지 배경 drawable 추가 (item_count.xml)
알림 개수가 표시되는 배지의 둥근 사각형 배경을 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="1dip"
android:color="#FFF" />
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
</shape>
5단계 — 매니페스트 설정 (AndroidManifest.xml)
AndroidManifest.xml에 VIBRATE 권한과 메인 액티비티 선언을 다음과 같이 추가합니다.
<?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>
동작 원리와 실행 결과
화면 가운데의 버튼을 클릭하면 createNotification() 메서드가 실행되어 새 알림을 게시하고, notificationCount 변수를 1씩 증가시켜 툴바의 배지 숫자를 갱신합니다. 안드로이드 8.0(오레오, API 26) 이상에서는 반드시 NotificationChannel을 먼저 생성해야 알림이 정상적으로 표시되므로, Build.VERSION.SDK_INT 조건문으로 버전을 분기 처리한 점에 유의하세요.
앱을 실행한 뒤 버튼을 여러 번 클릭하면 툴바 우측 상단의 벨 아이콘 위에 파란색 배지가 나타나고, 클릭할 때마다 숫자가 하나씩 올라가는 것을 확인할 수 있습니다.