This doc explains why the push template notifications look slightly different than the default notifications. And also covers the rendering issues encountered with Push templates.
1. Size of Push template notifications
|Height in Collapse mode||Height in Expand mode|
|Native notification (Basic)||100 dp||~300 dp|
SDK version below 11.4.02 & Push templates module version below 2.4.0
|64 dp||256 dp|
SDK version 11.4.02 & above & Push templates module version below 2.4.0 & above
|100 dp||287 dp|
Push templates with 64dp height
The push dimensions for custom notification is inline with the the Android guidelines for custom notifications.
Due to lesser height in custom notif, you will see the height of a default notification bigger than the customised notification. The reason for this is that the custom push notification with height > 64 dp was failing on some devices. And since dynamic layouts are not feasible, we restricted the height to the dimensions as per Android guidelines.
In expanded mode, the available area for image is as mentioned below:
|Available image height||Buttons present|
Due to restricted space in expand mode, the images might get cropped even though those images appear fine in the native notifications.
Push templates with 100dp height:
- The new and improved Push templates with more area is available for SDK version 11.4.02 & above & the Push templates module version below 2.4.0 & above.
- The look n feel of the improved notifications is similar to that of basic notification in terms of font size, spacing and padding.
- It supports customising App name color as wellWe are testing more OEMs and will whitelist the OEMs.
- The 100dp notifications will only work for whitelisted OEMs because the 100dp customisation doesn't render properly on all devices, mostly due to various skin customisations done by OEMs on top of the OS. As of now, Google, Samsung, One Plus are whitelisted. We are working on adding more OEMs to this list
- In addition to this, we have the provision of whitelisting OEMs at DB level. This means that you can choose to whitelist more OEMs or blacklist the one that is already whitelisted, after doing due diligence at your end. Just raise a support ticket to modify the set of whitelisted OEMs.
- Whitelisting approach:
- For each OEM, we have tested the latest 3 skin versions because the notif behavior changes wrt different skin versions. This will cover the latest 3 Android versions (Android 11, 10 & 9). Android 12 is not on the consideration list because the notification layout for Android 12 is very different.
- If 100dp renders fine for all the 3 latest skin versions, we will whitelist the OEM else we will consider each OEM case by case basis.
- If the 100dp is not supported for a device/OEM, the 64dp custom push notification will be rendered
For best results in image rendering, we suggest that you follow these guidelines for all notifications:
1. Maintain image aspect ratio of ~2:1. We have observed that cropping is minimal when image is close to this aspect ratio. However, please note that you might notice some cropping on a few devices despite images following this aspect ratio. This is because of 2 reasons:
a. The varying device sizes in Android.
b. Some OEMs add further customisations on top. For eg: In RedMi devices, additional padding is added around push notification which leads to further cropping of the Push notification & the image.
2. Create images such that the content is centre aligned. This would ensure that the main content doesn't get truncated even if some cropping is happening around the margins.
2. Some users receive stylised push notification without background color
We observed that some of our client users received the push notification with HTML content but without the background color. Lets understand the reason behind this:
Whenever you configure a push template notification with
- HTML text (meaning, you have either set the text as bold/ italic/ underlined/ strikedthrough or added some text color) and
- Background color
The SDK renders the notification in the following sequence:
- Renders a basic push notification with HTML text fields & app icon
- Then, it tries to draw the custom layout containing background color. If you configured an image, then SDK will try to download the image in parallel
Since SDK only gets ~10 secs to render the entire notification, sometimes due to poor internet connectivity or other network issues, the background rendering or image rendering or both might fail. If both fails, then this would result in showing a push notification with only the stylised text and NO background color.
Impact of background color rendering failure:
1. If you set your text color as white, then users would end up seeing a blank notification as shown below if their device theme is set as light mode
2. If you set your text color as black, then users would end up seeing a blank notification as shown below if their device theme is set as dark mode
So, we suggest that:
1. wherever possible, use text colors that contrast with light & dark backgrounds.
2. While creating campaigns on MoEngage dashboard, check preview in both dark & light mode to make sure the notification looks fine in both the modes.
3. Color inversion in dark mode (device specific issue)
Another rare issue we have observed is that colors get inverted in dark mode when stylised Push is sent. This has been observed only on a few Oppo devices running on Android 10. Though we have taken utmost precautions to prevent this issue, but there seems to be some bug with ColorOS (operating system created by OPPO) due to which it is beyond the scope of MoEngage.
4. Personalisation failure
Consider a scenario where you have personalised both the template and backup notifications but not added the personalisation fallback. In this situation if the personalisation fails for either the template or backup then the notification will not be sent to any users. This is because template and backup are considered to be part of one payload and since personalisation fallback is not present, we won't have any alternate message to send to the user in case of failure.
To avoid this issue, make sure that you add personalisation backup to your messages.