Hoe kun je de Firebase push notificatie-icon aanpassen in Android

calendar 5-7-2022 · 2 min. lezen · Android  ·
Delen op: linkedin copy

Na het bouwen van een Android app wordt er meestal een ronde cirkel als notificatie-icon getoond. In deze blogpost leg ik uit hoe je de notificatie-icon en de kleur ervan op een Android-apparaat kunt wijzigen. Dit is het kleine pictogram dat samen met de push-melding in de notificatiebalk wordt weergegeven.

Notificatie-icon afmetingen

De notificatie-icon moet de volgende afmetingen hebben, in pixels. Welke icon wordt gebruikt door het toestel, hangt af van het scherm van je smartphone:

  • MDPI - 24 x 24 (drawable-mdpi)
  • HDPI - 36 x 36 (drawable-hdpi)
  • XHDPI - 48 x 48 (drawable-xhdpi)
  • XXHDPI - 72 x 72 (drawable-xxhdpi)
  • XXXHDPI - 96 x 96 (drawable-xxxhdpi)

Maak een nieuwe notificatie-icon

  1. Maak een bestand in PNG-formaat voor de notificatie-icon met een tekenprogramma. Ik ben een grote fan van Affinity Designer. Het is een betaalde applicatie maar relatief goedkoop en met veel opties.
  2. De achtergrond van de afbeelding moet transparant zijn. De voorgrond (de icon) moet zwart zijn. Gebruik geen andere kleuren, deze worden namelijk niet weergegeven.
  3. Sla de bestanden op de volgende locaties op:
Afmeting Bestandslocatie
24px app/src/main/res/drawable-mdpi/ic_notification.png
36px app/src/main/res/drawable-hdpi/ic_notification.png
48px app/src/main/res/drawable-xhdpi/ic_notification.png
72px app/src/main/res/drawable-xxhdpi/ic_notification.png
96px app/src/main/res/drawable-xxxhdpi/ic_notification.png

De kleur van de notificatie-icon instellen

  1. Maak het bestand app/src/main/res/values/colors.xml aan als dit nog niet bestaat.
  2. Vul het bestand met de volgende inhoud:
1<?xml version="1.0" encoding="utf-8"?>
2<resources>
3    <color name="notification_icon">#046F47</color>
4</resources>

Je kunt de kleur zelf kiezen. In dit geval heb ik voor een groene kleur gekozen.

Vervang de notificatie-icon

  1. Pas het bestand app/src/main/AndroidManifest.xml aan. Voeg de volgende meta-data secties toe:
 1<manifest >
 2   <application  >
 3        ...
 4        <meta-data
 5            android:name="com.google.firebase.messaging.default_notification_icon"
 6            android:resource="@drawable/ic_notification" />
 7        <meta-data
 8            tools:replace="android:resource"
 9            android:name="com.google.firebase.messaging.default_notification_color"
10            android:resource="@color/notification_icon" />
  1. Als die nog niet bestaat, voeg het xmlns:tools="http://schemas.android.com/tools" attribuute toe aan het manifest root element zoals hieronder:
1<manifest 
2          xmlns:tools="http://schemas.android.com/tools"
3          
4          package="...">

Voila. Als er nu een push notificatie binnenkomt zal de app je nieuwe icon tonen in de kleur die je hebt gekozen.

Vertalingen: