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

Android#2 Advent Calendar 2019 14日目の記事です。
久しぶりにAndroid書きます。

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

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

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

Firebase v9.8からFirebase Notificationsのアイコンが指定できるようになりました

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

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

公式ドキュメントはこちら。

通知アイコンの見え方

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

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

透過なし画像	透過画像	α値調整した画像
黒円に一時停止マークを赤で塗りつぶし	一時停止マークを透過(α=0.0)で切り抜き	一時停止マークを反透過(α=0.4)の赤

透過なし画像

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

default_notification_color指定なし	default_notification_color=紺色
Android 6.0	Android 6.0
Android 7.0~	Android 7.0~

Android6.0までの場合

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

Android7.0以降

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

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

透過あり画像

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

default_notification_color指定なし	default_notification_color=紺色
Android 6.0	Android 6.0
Android 7.0~	Android 7.0~

Android6.0までの場合

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

Android7.0以降

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

α値調整をした画像

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

default_notification_color指定なし	default_notification_color=紺色
Android 6.0	Android 6.0
Android 7.0~	Android 7.0~

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

Darkテーマの場合

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

default_notification_color指定なし	default_notification_color=紺色

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

まとめ

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