안드로이드 Notification Icon 생성 예제

지난 글 FCM을 이용해 안드로이드 앱으로 메시지 전송 (http://zeany.net/28) 에서 클라우드 메시지를 기기의 작업 표시줄에 보여줄 때 아이콘이 아래처럼 흰색 네모로 보이는 분들이 대부분 일거라고 생각합니다.

소스를 보면 Launcher Icon을 보여주도록 설정된 것이 보이지만, 그렇게 동작하지는 않습니다.

1 2 3 4 5 6 7

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this) .setSmallIcon(R.mipmap.ic_launcher) .setContentTitle(title) .setContentText(message) .setAutoCancel(true) .setSound(defaultSoundUri) .setContentIntent(pendingIntent);

이유를 보면 Lollipop 이후 Notification Icon에 대해서 Material Icons (https://material.io/icons/) 들을 사용하라고 합니다. 자세히 보면 오로지 투명한 바탕에 흰색 이미지로 단순하게 만들어서 필요하면 그 바탕에 색을 부여하는 식으로 사용하라고 합니다. 유심히 보니 그 이후 버전의 구글에서 보여주는 아이콘들도 다들 그런 느낌입니다.

이 정도면 차라리 이미지를 만들지 않고 Image Asset의 Clip Art들을 의미에 맞게 사용하는 것도 괜찮아 보입니다.

1. Notification Icon 생성

하지만, 여기서는 단순하게 Notification Icon을 직접 만들어 보도록 하겠습니다.

Launcher Icon (http://zeany.net/8)을 만들 때 처럼 Image Asset을 실행합니다. 

Icon Type에서 Notification Icons를 선택하고 Asset Type은 Image를 선택한 후 Path에 원하는 이미지를 선택합니다.

이 때 아래 API 11+, API 9+ 등에서 단색 박스 이미지로 보이면 이 이미지는 부적합하다는 의미입니다.

 

그래서 그 기준에 맞게 투명 바탕에 흰색만으로 이미지를 그려 봤습니다. 기준에 부합한 경우 아래처럼 미리보기가 예상대로 보이는 것을 확인할 수 있습니다. 생성할 Notification Icon의 이름은 noticon 으로 결정했습니다.

(포토샵이 없는 분들은 저처럼 https://pixlr.com/editor/를 사용하세요.)

이후 Next를 눌러 파일의 저장 위치를 확인하고 Finish를 눌러 생성합니다. 

2. 생성한 Notification Icon을 보여주도록 소스 수정

이제 Notification Icon의 생성이 완료되었으니 소스를 수정해 보도록 하겠습니다.

포그라운드에서 Lollipop 이전에 대해서는 Launcher Icon을 그대로 보여주고 Lollipop 이후는 지금 그 아이콘으로 보이도록 하겠습니다. 그리고, 배경색은 Launcher Icon과 비슷한 핑크 계열로 변경해 보도록 하겠습니다.

1 2 3 4 5 6 7 8 9

Uri defaultSoundUri= RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION); NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this) .setSmallIcon(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP ? R.drawable.noticon : R.mipmap.ic_launcher) .setColor(0xffffaec9) .setContentTitle(title) .setContentText(message) .setAutoCancel(true) .setSound(defaultSoundUri) .setContentIntent(pendingIntent);

백그라운드의 아이콘을 변경하려면 클라우드 메시지의

1) notification 영역에 icon을 직접 지정해서 그 아이콘을 보이도록 하거나,

2) notification 영역을 아예 없애서 FirebaseMessagingService의 onMessageReceived() 메소드에서 모든 클라우드 메시지를 확인하도록 하면 됩니다.

클라우드 메시지의 전송에 대해서는 이전 글인 Postman을 이용한 FCM 클라우드 메시지 전송 (http://zeany.net/35) 등을 참조하세요. 여기서도 그 글에 있는 메시지를 변경해서 보내도록 하겠습니다.

다음은 notification 영역에 icon에 새로 생성한 noticon을 보여주도록 설정한 메시지의 예입니다. 

1 2 3 4 5 6 7 8 9 10 11 12 13

{ "to" : "your token", "priority" : "high", "notification" : { "body" : "Background Message", "title" : "BG Title", "icon" : "noticon" }, "data" : { "title" : "FG Title", "message" : "Foreground Message" } }

이렇게 보내면 앱이 백그라운드에서는 아이콘이 그대로 보이고, 포그라운드에서는 아이콘의 배경이 분홍인 것을 볼 수 있습니다.

다음처럼 notification 영역을 없애서 onMessageReceived() 메소드에서 모든 것을 처리하는 예입니다.

이 경우 모든 클라우드 메시지에 대해 앱의 상태에 상관없이 분홍 배경으로 보이고, 문구도 동일하게 보이게 됩니다.

 

1 2 3 4 5 6 7 8

{ "to" : "your token", "priority" : "high", "data" : { "title" : "Title", "message" : "Message" } }

이상으로 Notification Icon을 생성해 봤습니다.

※ 이 프로젝트는 https://github.com/zeany/webview 에 있으며 아래 명령으로 소스를 가져올 수 있습니다.

(이미 git clone 으로 프로젝트를 내려 받은 경우에는 프로젝트 홈 디렉토리에서 git checkout 만 하면 됩니다.)

git clone https://github.com/zeany/webview.git

cd webview

git checkout -f step-12