How to set custom icon and sound for notifications on android [FCM-Ionic-Cordova]
Use AndroidManifest.xml to achieve it
Set a custom icon for notifications on android
The first thing is to prepare the icon that we will set as a default in the notifications that our application will show, for that we generated a transparent png file, I made it 1024px * 1024. Or we can choose an icon from the material design library.
We use the tool Android Notification Icon Generator, for that, we click on the image button of the source section, and choose our png file to upload it. I used the values:
image / don’t trim / padding: 0% / name: fcm_push_icon
Then we click on the download button to download the necessary files. We are going to get a compressed folder with a folder inside called res.
Unzip this folder in the same directory where the AndroidManifest.xml file is located, in my case it is:
“[ionic-project]\platforms\android\app\src\res\drawabale-xxx”.
Now we will open the AndroidManifest.xml file and set these 2 values within the <application> </application> tags (I used as a guide official firebase documentation):
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/fcm_push_icon" /><meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/colorAccent" />
With this configuration, the system selects the required size.
*** Probably in your configuration you do not have the variable @color/colorAccent, and it results in an error:
error:resource color/colorAccent (aka app.com:color/colorAccent) not found.
error: failed processing manifest.To solve that error, we created a file called colors.xml inside the res/values/colors.xml folder, as follows:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#039BE5</color>
<color name="colorPrimaryDark">#0288D1</color>
<color name="colorAccent">#FFA000</color> <color name="blue_grey_500">#607D8B</color>
<color name="blue_grey_600">#546E7A</color>
<color name="blue_grey_700">#455A64</color>
<color name="blue_grey_800">#37474F</color>
<color name="blue_grey_900">#263238</color>
</resources>
Ready, rebuild the application and the custom icon will now work.
Set custom notification for notifications on android
To set the notification sound is even easier:
You only put your notification in the same folder: res/raw/custom_sound.mp3
The android compiler will take care of preparing it for the format that Android needs.
Now to use it, all we have to do is payload sent by our server, we set the property:
sound: “custom_sound”
And with these simple steps, you will hear the custom sound you set.
Did the article help you?
