Skip to content

Commit 2aa7697

Browse files
briantqbriantq
authored
arnesson#994 - Updating docs to use Firebase customization
I went through the history and could not find when these files were automatically copied over. I also found Firebase added some customization hooks so updated the documentation on how users can use these hooks to restyle the icons and colors for notifications
1 parent f590cb4 commit 2aa7697

File tree

1 file changed

+70
-31
lines changed

1 file changed

+70
-31
lines changed

‎docs/NOTIFICATIONS.md‎

Lines changed: 70 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,37 @@
33
Read below for details on configuring notification [icons](#changing-notification-icon) and [colors](#notification-colors).
44

55
## Changing Notification Icon
6-
The plugin will use notification_icon from drawable resources if it exists, otherwise the default app icon is used.
7-
To set a big icon and small icon for notifications, define them through drawable nodes.
8-
Create the required `styles.xml` files and add the icons to the
9-
`<projectroot>/res/native/android/res/<drawable-DPI>` folders.
10-
11-
The example below uses a png named `ic_silhouette.png`, the app Icon (@mipmap/icon) and sets a base theme.
12-
From android version 21 (Lollipop) notifications were changed, needing a separate setting.
13-
If you only target Lollipop and above, you don't need to setup both.
14-
Thankfully using the version dependant asset selections, we can make one build/apk supporting all target platforms.
15-
`<projectroot>/res/native/android/res/values/styles.xml`
16-
```
17-
<?xml version="1.0" encoding="utf-8" ?>
18-
<resources>
19-
<!-- inherit from the holo theme -->
20-
<style name="AppTheme" parent="android:Theme.Light">
21-
<item name="android:windowDisablePreview">true</item>
22-
</style>
23-
<drawable name="notification_big">@mipmap/icon</drawable>
24-
<drawable name="notification_icon">@mipmap/icon</drawable>
25-
</resources>
6+
By default Firebase will use the app icon as the notification icon. The icon is treated as a silhouette, so if the app icon has a background, it might appear as a large blob. To change the icon, you need to [add the icons](#add-the-icons) to the project and [configure firebase](#configure-firebase).
7+
8+
### Add the icons
9+
Add your icons to your project in your res directory, such as `<projectroot>/res/native/android/res/<drawable-DPI>`. Make sure the icons all have the same name (example has ic_silhouette). Next, we will need to copy the icons over to the Android project when it is created. To do this, add the following lines to your `config.xml`.
2610
```
27-
and
28-
`<projectroot>/res/native/android/res/values-v21/styles.xml`
11+
<platform name="android">
12+
....
13+
<resource-file src="res/native/android/res/drawable-hdpi/ic_silhouette.png" target="app/src/main/res/drawable-hdpi/ic_silhouette.png"/>
14+
<resource-file src="res/native/android/res/drawable-xhdpi/ic_silhouette.png" target="app/src/main/res/drawable-hdpi/ic_silhouette.png"/>
15+
... Repeated for each screen resolution you have a notification icons for...
16+
</platform>
2917
```
30-
<?xml version="1.0" encoding="utf-8" ?>
31-
<resources>
32-
<!-- inherit from the material theme -->
33-
<style name="AppTheme" parent="android:Theme.Material">
34-
<item name="android:windowDisablePreview">true</item>
35-
</style>
36-
<drawable name="notification_big">@mipmap/icon</drawable>
37-
<drawable name="notification_icon">@drawable/ic_silhouette</drawable>
38-
</resources>
18+
Note: the src of the files is not important, but the target directory with the proper dpi filter is very imporant. You will also need to name all the icons the same name.
19+
20+
### Configure Firebase
21+
We need to copy a metadata flag into the Manifest to tell Firebase which icon to use. To do this, add the following line to your `config.xml`.
22+
```
23+
<platform name="android">
24+
....
25+
<config-file parent="/manifest/application" target="AndroidManifest.xml">
26+
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_silhouette" />
27+
</config-file>
28+
</platform>
3929
```
30+
Note: If you have XML Namespace issues, which I encountered when trying to build in Android Studio, add this `xmlns:android="http://schemas.android.com/apk/res/android"` to the widget element at the root of the `config.xml`.
4031

4132
## Notification Colors
4233

34+
To add color to the custom icon, you will need to (create a color definition)[#create-a-color-definition] and (configure firebase color)[#configure-firebase-color].
35+
36+
### Create a Color Definition
4337
On Android Lollipop and above you can also set the accent color for the notification by adding a color setting.
4438

4539
`<projectroot>/res/native/android/res/values/colors.xml`
@@ -51,3 +45,48 @@ On Android Lollipop and above you can also set the accent color for the notifica
5145
<color name="accent">#FF00FFFF</color>
5246
</resources>
5347
```
48+
49+
You will again need to copy this file over to your project to get it to work by adding these lines to your `config.xml`
50+
```
51+
<platform name="android">
52+
...
53+
<resource-file src="res/native/android/res/values/colors.xml" target="app/src/main/res/values/colors.xml"/>
54+
</platform>
55+
```
56+
57+
### Configure Firebase Color
58+
We need to copy a metadata flag into the Manifest to tell Firebase which color to use for the icon. To do this, add the following line to your `config.xml`.
59+
```
60+
<platform name="android">
61+
....
62+
<config-file parent="/manifest/application" target="AndroidManifest.xml">
63+
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/primary" />
64+
</config-file>
65+
</platform>
66+
```
67+
Note: If you have XML Namespace issues, which I encountered when trying to build in Android Studio, add this `xmlns:android="http://schemas.android.com/apk/res/android"` to the widget element at the root of the `config.xml`.
68+
69+
# Final Result
70+
71+
If you added a custom icon and color, your `config.xml` should include something like this.
72+
73+
```
74+
<widget .... xmlns:android="http://schemas.android.com/apk/res/android">
75+
...
76+
<platform name="android">
77+
<!-- Copy the color definition -->
78+
<resource-file src="res/native/android/res/values/colors.xml" target="app/src/main/res/values/colors.xml"/>
79+
<!-- Copy the icons -->
80+
<resource-file src="res/native/android/res/drawable-hdpi/ic_silhouette.png" target="app/src/main/res/drawable-hdpi/ic_silhouette.png"/>
81+
<resource-file src="res/native/android/res/drawable-xhdpi/ic_silhouette.png" target="app/src/main/res/drawable-xhdpi/ic_silhouette.png"/>
82+
<resource-file src="res/native/android/res/drawable-xxhdpi/ic_silhouette.png" target="app/src/main/res/drawable-xxhdpi/ic_silhouette.png"/>
83+
<resource-file src="res/native/android/res/drawable-xxxhdpi/ic_silhouette.png" target="app/src/main/res/drawable-xxxhdpi/ic_silhouette.png"/>
84+
85+
<!-- Configure Firebase -->
86+
<config-file parent="/manifest/application" target="AndroidManifest.xml">
87+
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_silhouette" />
88+
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/primary" />
89+
</config-file>
90+
</platform>
91+
</widget>
92+
```

0 commit comments

Comments
 (0)