Guides
DashboardPricingLoginSign-up for free

Change icon and color

SETUP - Extend your look-and-feel to notifications

Suggest Edits

📘

We reuse Firebase configuration

If you have already integrated Firebase to your application and customized your default icon and color, then you're done! WonderPush reuses this configuration so you have no work to do.

To configure the default icon and color, add the following two items inside the <application> tag of your AndroidManifest.xml:

<meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/ic_stat_ic_notification" />

<meta-data
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/colorAccent" />

Notification icons and color can be customized on a per-sending basis too, from the API and the dashboard.

Note that Android only uses the alpha channel of the notification icon, and recolorize it using the notification color. If not set, WonderPush will use a bell icon by default.

Android native

The file is located under app/src/main/AndroidManifest.xml.

Ionic Capacitor, Flutter and React Native

The file is located under android/app/src/main/AndroidManifest.xml.

Cordova and Ionic Cordova

Open your config.xml:

<?xml version='1.0' encoding='utf-8'?>
<!-- Make sure to add the xmlns:android attribute to the toplevel tag -->
<widget xmlns:android="http://schemas.android.com/apk/res/android">

  <!-- Find the following tag -->
  <platform name="android">

    <!-- Copy the color definition -->
    <resource-file
        src="res/native/android/res/values/colors.xml"
        target="app/src/main/res/values/colors.xml"/>

    <!-- Copy the icons -->
    <resource-file
        src="res/native/android/res/drawable-hdpi/ic_stat_ic_notification.png"
        target="app/src/main/res/drawable-hdpi/ic_stat_ic_notification.png"/>
    <resource-file
        src="res/native/android/res/drawable-xhdpi/ic_stat_ic_notification.png"
        target="app/src/main/res/drawable-xhdpi/ic_stat_ic_notification.png"/>
    <resource-file
        src="res/native/android/res/drawable-xxhdpi/ic_stat_ic_notification.png"
        target="app/src/main/res/drawable-xxhdpi/ic_stat_ic_notification.png"/>
    <resource-file
        src="res/native/android/res/drawable-xxxhdpi/ic_stat_ic_notification.png"
        target="app/src/main/res/drawable-xxxhdpi/ic_stat_ic_notification.png"/>

    <!-- Configure notification icon and color -->
    <config-file parent="/manifest/application" target="AndroidManifest.xml">
      <meta-data
          android:name="com.google.firebase.messaging.default_notification_icon"
          android:resource="@drawable/ic_stat_ic_notification" />
      <meta-data
          android:name="com.google.firebase.messaging.default_notification_color"
          android:resource="@color/colorAccent" />
    </config-file>
  
  </platform>
</widget>

Have your icons ready in res/native/android/res/drawable-*/ic_stat_ic_notification.png, one par dpi you wish to support.

If you do not have one already, here's an example colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Format is #AARRGGBB -->
    <color name="colorAccent">#FF0080D0</color>
</resources>

Then for Ionic Cordova run:

ionic cordova prepare android

For Cordova (without Ionic) run:

cordova prepare android

Updated about 2 years ago