49
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-13

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に設定します。

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

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

透過なし画像

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

default_notification_color指定なし default_notification_color=紺色
Android 6.0device-2019-12-10-140507.png Android 6.0device-2019-12-10-141252.png
Android 7.0~ normal_透過なし画像_色指定なし.png Android 7.0~ normal_透過なし画像_色指定あり.png
Android6.0までの場合

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

Android7.0以降

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

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

透過あり画像

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

default_notification_color指定なし default_notification_color=紺色
Android 6.0device-2019-12-10-141821.png Android 6.0device-2019-12-10-141537.png
Android 7.0~ normal_透過画像_色指定なし.png Android 7.0~ normal_透過画像_色指定あり.png
Android6.0までの場合

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

Android7.0以降

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

α値調整をした画像

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

default_notification_color指定なし default_notification_color=紺色
Android 6.0device-2019-12-10-142132.png Android 6.0device-2019-12-10-142435.png
Android 7.0~ normal_アルファ調整画像_色指定なし.png Android 7.0~ normal_アルファ調整画像_色指定あり.png

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

Darkテーマの場合

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

default_notification_color指定なし default_notification_color=紺色
dark_透過なし画像_色指定なし.png dark_透過なし画像_色指定あり.png
dark_透過画像_色指定なし.png dark_透過画像_色指定あり.png
dark_アルファ調整画像_色指定なし.png dark_アルファ調整画像_色指定あり.png

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

まとめ

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
49
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?