Best Practices for Custom Layouts in Push Notifications
This article assumes that readers are familiar with building Custom Layouts for Push Notification and does not touch upon what is custom layouts and how to build them. You can refer to the documentation to learn how to build custom notification layouts.
What is a Push Notification?
A notification is a message that Android displays outside your app’s UI to provide the user with reminders, communication from other people, or other timely information from your app. Users can tap the notification to open your app or take an action directly from the notification.
Today more and more companies are running their marketing campaigns via push notifications. This leaves every user's notification drawer very cluttered.
In order to stand out from the crowd, many applications are using different notification layouts to grab users' attention.
While this helps in grabbing the user’s attention but if not done right it can go terribly wrong, example text might not be visible or there could be an additional tint in the notification content as shown below.
Why do these issues happen?
These issues come up when both Light and Dark Themes are not handled in the styling applied to the custom layouts or text color is hardcoded to a specific color(black in most cases). The system then tries to handle the situation for you trying to apply an inverse and resulting in something like shown above.
How to get the custom layout right?
To get a custom layout right we need to take care of 2 important things:
- Layout Height
- Text Color of the Content
Layout Height
The right notification height is important so that the content is not clipped and the complete and the right message is shown to the user.
For default notifications, the maximum layout height varies based on the OS version or API Level.
- Pre-Android N - The height of the notification is 64dp when collapsed and 256dp when expanded.
- Android N and above — The height of the notification is 100dp when collapsed and 300dp when expanded(approx).
While the maximum height of the notification layout on Android N and above devices is greater though some OEMs in their custom launchers and skins still have the height fixed as 64dp and 256dp respectively for collapsed and expanded. Hence it is best to stick to 64dp and 256dp respectively for collapsed and expanded, even the official documentation suggests the same
When you use a custom notification layout, take special care to ensure that your custom layout works with different device orientations and resolutions. While this advice applies to all UI layouts, it’s especially important for notifications because the space in the notification drawer is very restricted. The height available for a custom notification layout depends on the notification view. Usually, collapsed view layouts are limited to 64 dp, and expanded view layouts are limited to 256 dp.
Text Color of the Content
The text color of the content in the notification drawer should always be inverse of the applied or used System Theme, i.e. black text when Light Theme is enabled and white text when Dark Theme is enabled.
While there could be different ways to handle this text color like programmatically checking whether Dark Theme is enabled or not and then set the color programmatically at runtime, but the best way to handle this would be using Notification Style.
You can extend your text style with the Notification Styles defined in the androidx.core:core library and customize the content as required. Below are the themes you should be using.
Make sure you do not set the text color explicitly in your style.
The TextAppearance.Compat.Notification.* style always ensures that the text color is always an inverse of the System which ensures text readability. When using these styles the system knows that the color is handled and it does not try to inverse the color to handle readability etc.
