【Android】プッシュ通知に画像を表示する方法【Kotlin】

この記事ではAndroidのプッシュ通知に画像を表示する方法について解説します。

Kotlinのソースコード付きで説明しています。とても簡単に実装できるので是非この記事を参考にして実装してみてください。

完成イメージ
実装
まとめ

完成イメージ

この記事では

アイコンサイズの小さい画像
展開できる大きい画像
小さい画像と大きい画像を両方表示する

以上の3種類の画像を表示したプッシュ通知を作成していきます。

3つとも基本的な通知機能のコードに1行追加するだけで簡単に作成できます。

画像を表示するだけでもユーザーがタップしたくなるような効果的なプッシュ通知にできるので、早速実装してみましょう。

実装

ここからは実装方法をソースコードも交えて解説していきます。

通知機能の実装方法については以下の記事で詳しく解説しています。
基本的なプッシュ通知の実装方法を知りたい方や全体の詳しい説明を読みたい方はこちらの記事も併せて読んでみてください。

小さい画像

アイコンサイズの小さい画像をプッシュ通知に表示する方法を紹介します。

val myImage = BitmapFactory.decodeResource(context.resources, R.drawable.largeicon)

val notification: Notification = NotificationCompat.Builder(context, channelId)
    .setSmallIcon(R.drawable.ic_launcher_foreground)
    .setContentTitle("通知")
    .setContentText("時間になりました")
    .setContentIntent(pendingIntent)
    .setLargeIcon(myImage)//これを追加
    .setAutoCancel(true)
    .build()

上のソースコードのようにNotificationCompat.Builderに.setLargeIcon()を追加するだけでアイコンサイズの画像をプッシュ通知に表示できるようになります。

.setLargeIcon()の引数にはBitmapをセットする必要があるので注意しましょう。
上のコードでは1行目のBitmapFactory.decodeResourceでDrawableをBitmapに変換したmyImageを定義してからsetLargeIconの引数にセットしています。

大きい画像

展開できる大きい画像をプッシュ通知に表示する方法です。

val notification: Notification = NotificationCompat.Builder(context, channelId)
    .setSmallIcon(R.drawable.ic_launcher_foreground)
    .setContentTitle("通知")
    .setContentText("時間になりました")
    .setContentIntent(pendingIntent)
    .setStyle(NotificationCompat.BigPictureStyle().bigPicture(myImage))//これを追加
    .setAutoCancel(true)
    .build()

大きい画像を表示するときも、小さい画像を表示する方法と同じでNotificationCompat.Builderに1行追加するだけで簡単に実装できます。

.bigPicture()の引数もBitmapをセットする必要があるので注意してください。

両方表示する

プッシュ通知に大きい画像と小さい画像の両方を表示する方法を紹介します。

val notification: Notification = NotificationCompat.Builder(context, channelId)
    .setSmallIcon(R.drawable.ic_launcher_foreground)
    .setContentTitle("通知")
    .setContentText("時間になりました")
    .setContentIntent(pendingIntent)
    .setStyle(NotificationCompat.BigPictureStyle().bigPicture(myImage).bigLargeIcon(myImage))//これを追加
    .setAutoCancel(true)
    .build()

上のコードの通り、先ほど紹介したプッシュ通知に大きい画像を表示するためのコードに.bigLargeIcon()を追加するだけです。

.bigLargeIcon()の引数もBitmapである必要があるので、上手く動かない時やエラーが出るときにはBitmapがセットされているか確認してみてください。