Rendering issues associated with Push templates in Android

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

The height of Push notification is as mentioned below:

  Height in Collapse mode Height in Expand mode
Native notification (Basic) 100 dp ~300 dp
Custom notification (All other templates 64 dp 256 dp

 

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
192 dp No
152 dp Yes

 

Due to restricted space in expand mode, the images might get cropped even though those images appear fine in the native notifications. 

For best results, we suggest that you follow these guidelines:

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.

mceclip6.png

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
  • Image

The SDK renders the notification in the following sequence:

  1. Renders a basic push notification with HTML text fields & app icon
  2. 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

mceclip0.png

 

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

mceclip1.png

 

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.

 

 

 

Was this article helpful?
1 out of 3 found this helpful