Firebase Notificationsのアイコンについて纏めてみた

[Android#2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/android-2) 14日目の記事です。
久しぶりにAndroid書きます。

# 通知アイコンに悩む人はいまだに多い

Android5.0以降、有名なサービスでもいまだにpushの通知アイコンがただの四角だったり丸い画像だったりするサービスが多いようです。

しかし、下記記事のとおりFirebase messagingの通知アイコンは簡単に設定することができます。

[Firebase v9.8からFirebase Notificationsのアイコンが指定できるようになりました](https://qiita.com/yamacraft/items/11e8c8e5e29ae0a18cc8)

具体的にはManifestファイルにmeda-dataとして通知アイコン画像と色を指定するだけでOKです。

```xml:manifest.xml
<application ...>

    <meta-data android:name="com.google.firebase.messaging.default_notification_icon"
        android:resource="@drawable/ic_notification" />
    <meta-data android:name="com.google.firebase.messaging.default_notification_color"
        android:resource="@color/notification_icon_color" />
```

公式ドキュメントは[こちら](https://firebase.google.com/docs/cloud-messaging/android/topic-messaging?hl=ja#%E3%82%A2%E3%83%97%E3%83%AA-%E3%83%9E%E3%83%8B%E3%83%95%E3%82%A7%E3%82%B9%E3%83%88%E3%81%AE%E7%B7%A8%E9%9B%86)。

# 通知アイコンの見え方

よくある一時停止ボタンをnotification iconとしてmeta-dataに設定します。

使った画像はこちらです。

| 透過なし画像      |透過画像|α値調整した画像|
|:-----------------:|:------------------:|:------------------:|
|![notification01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/898c0097-f789-a960-b43a-d3b067aa9c76.png)|![notification02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/cd79a329-3701-b18c-f952-9cbb60d63410.png)|![notification03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/5c173241-2feb-6925-5167-f41b4777b8e9.png)|
|黒円に一時停止マークを赤で塗りつぶし|一時停止マークを透過(α=0.0)で切り抜き|一時停止マークを反透過(α=0.4)の赤|


## 透過なし画像

まずは一時停止のマーク部分を赤く塗り潰した画像の場合です。赤く塗り潰した部分は透過なし（α=1.0）です。


| default_notification_color指定なし|default_notification_color=紺色|
|:-----------------|:------------------|
|Android 6.0![device-2019-12-10-140507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/240d0009-f320-d3d7-bae5-695bdbad23d9.png)|Android 6.0![device-2019-12-10-141252.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/13291ceb-e08f-96b3-2b69-261fc6ca6526.png)|
| Android 7.0~ ![normal_透過なし画像_色指定なし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/7fc3f628-63dc-af93-23e7-deefc69070a3.png) | Android 7.0~ ![normal_透過なし画像_色指定あり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/a0331b95-07d4-0c96-9d67-ff85cdea63fe.png) |

##### Android6.0までの場合

色指定なしの場合、グレーの円の中に白で塗り潰された丸い画像だけが表示されます。
色指定があると、その色の円の中に白で塗り潰された丸い画像だけが表示されます。

##### Android7.0以降

アイコン全体を一色で塗り潰されます。色指定しない場合はグレー、指定した場合は指定色で塗り潰されます。

どれも、元画像の赤も黒も関係なしに塗りつぶされることが分かります。仮に、2色以上の複数色で描かれた画像でも同じです。

## 透過あり画像

一時停止マークの赤を透過に変更した画像です。

| default_notification_color指定なし|default_notification_color=紺色|
|:-----------------|:------------------|
|Android 6.0![device-2019-12-10-141821.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/42048a20-4e6a-f58f-d207-449b7d7834cc.png)|Android 6.0![device-2019-12-10-141537.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/b51cd2ba-fced-eec0-bd03-fb9fde2b522c.png)|
| Android 7.0~ ![normal_透過画像_色指定なし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/87ee42cd-c7a3-66ec-aa57-2272bec2abf6.png)|Android 7.0~ ![normal_透過画像_色指定あり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/4751c1b8-cde0-1f44-ef66-688ba753a1cb.png)|

##### Android6.0までの場合

アイコン自体は白になります。
ただし、一時停止マーク部分が透過になるので、そこから下地の円の色（グレー/紺）が見えます。

##### Android7.0以降

こちらも同様に、アイコン自体はグレー/紺色で描画されますが、透過部分から背景の白色が見えるようになります。

## α値調整をした画像

先ほど透過にした一時停止マーク部分のα値を調整し（α=0.4）、赤の反透過にしたものです。

| default_notification_color指定なし|default_notification_color=紺色|
|:-----------------|:------------------|
|Android 6.0![device-2019-12-10-142132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/db57efb2-0f5f-35c7-4491-eb1bd4457f2c.png)|Android 6.0![device-2019-12-10-142435.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/96b54eba-fc27-8fea-a178-ab30d5585ac0.png)|
|Android 7.0~ ![normal_アルファ調整画像_色指定なし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/dbeb4609-a003-550e-372a-09687d3fa0fb.png)|Android 7.0~ ![normal_アルファ調整画像_色指定あり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/232a3f11-62f7-c446-d9f3-5fac1bedb644.png)|

少しわかりづらいかもしれませんが、一時停止マークの部分が、左側は薄いグレー、右側は薄い紺色で描画されています。
要は画像のアルファチャンネルのみが使用されるため、指定した色にαがかかった形で描画されます。そのため、元の画像が何色で作られていても関係ありません。

## Darkテーマの場合

基本、Darkテーマの場合、色指定がない場合はグレーではなく白になるだけで変わりはありません。

| default_notification_color指定なし|default_notification_color=紺色|
|:-----------------|:------------------|
|![dark_透過なし画像_色指定なし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/c1bd08fc-4790-b771-f63f-70b760c43dcc.png)|![dark_透過なし画像_色指定あり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/b77ba6e3-5a11-815d-5da5-b37596b3d8ba.png)|
|![dark_透過画像_色指定なし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/98c0cf76-9660-5886-4bcc-bd0f3fe3a238.png)|![dark_透過画像_色指定あり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/bc90a7bc-91f2-7e7c-3469-a8b17252468a.png)|
|![dark_アルファ調整画像_色指定なし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/8f34a305-cf6c-7e2e-bbc0-e7d9a809ae05.png)|![dark_アルファ調整画像_色指定あり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202533/d2e0f3b5-fafd-9504-7501-2d5e9f364760.png)|

※α値がわかりづらくてすみません…

# まとめ

- 通知アイコンは画像のアルファチャンネルのみ使用される
- 通知アイコンは1色でレンダリングされる
- 表現力の高い通知アイコンを作りたい場合は、アルファチャンネルを使ってα値の濃淡で表現する