Android Iconography: Notification
Blog Infos
Author
Aung Kyaw Paing
Published
Topics
Notification Manager
Author
Aung Kyaw Paing
Published
Topics
Notification Manager
Icons are a crucial part of every app and software. They are more than just a visual component; they are the identity of your app. It’s important to represent what your app stands for in the icon. However, this is far from easy, especially when you have to support multiple platforms where each has its own specifications and limitations on what your icon can or cannot have. Since each OS has their own specification for icons, sometimes it’s best to have an specification document you can reference to. And for Android, there used to be a long spec documentation by Google that is now long lost to the depth of the Internet history. Hence, I took the liberty to scribe these lost knowledge with a blog post. (tldr below for those lazy folks)
What is Notification Icon?
When a notification has been issued to a user, it first appears under the status bar.
Notification on status bar. Image Credit: https://developer.android.com/guide/topics/ui/notifiers/notifications
When the user swipes down the status bar, the notification drawer will expand and you can see your notification in this notification drawer.
Notification in notification drawer. Image Credits: https://developer.android.com/guide/topics/ui/notifiers/notifications
The anatomy of notification composes of multiple elements. One of them is the icon on the header area. Label number 1 in the picture below is the notification icon that will be referred to throughout the blog post.
Image Credit: https://material.io/design/platform-guidance/android-notifications.html#anatomy-of-a-notification
With that being said, let’s break down how the notification icon is rendered by the Android OS.
Rendering Android notification icon
In Android, notification icon is hugely different from other icons that you have in your app. Most notably, The icon asset cannot have any color. Android makes a huge change to notification back in Android 5.0 and since then, the Android OS ignores all color channels in your notification icon. Let’s take a look into the following icon:
Sample Icon
What you saw above can be broken down into a combination of two components; an icon with no color and the color. The icon is a colorless static component that is bundled into the app, and the color is a dynamic component which can be changed while the app is running.
Visualizations of two components of Android notification icon
Job Offers
Spotify-Inspired Audio Buffering Slider Animation with Jetpack Compose
APPLY NOW
Navigating the Waters of Kotlin Multiplatform: Exploring Navigation Solutions
APPLY NOW
My experience with SubComposeLayout
APPLY NOW
Job Offers
There are currently no vacancies.
OUR VIDEO RECOMMENDATION
droidcon London, Jetpack Compose, Migrating
Migrating to Jetpack Compose – an interop love story
droidcon
Most of you are familiar with Jetpack Compose and its benefits. If you’re able to start anew and create a Compose-only app, you’re on the right track. But this talk might not be for you…
Watch Video
Migrating to Jetpack Compose - an interop love story
Simona Milanovic
Android DevRel Engineer for Jetpack Compose
Migrating to Jetpack Compose - an interop love story
Migrating to Jetpack Compose - an interop love story
Simona Milanovic
Android DevRel Engineer f ...
Jobs
Copenhagen
Technical Integration Supporter
Full Time
APPLY NOW
Paris
Android developer
Full Time
APPLY NOW
Vienna, Austria
Senior Software Engineer, Mobile SDK
Full Time
APPLY NOW
How does Android combine these two?
Firstly, System ignores color channels, for example in ARGB, it ignores RGB channels. Thus the system sees only white color. What it means is that any shapes you want to stand out (such as XY in the above example and the letter f in the Facebook logo) should be transparent so that when the color is added, that distinct shape will be left out.
The color is then filled into the icon by calling the setColor function from the code when we’re creating notification. The function tells the Android OS to populate color channel (e.g RGB in ARGB) in your icon with the color you specified. As an end result, the users see the colored icon on their notification drawer.
Android OS rendering process
Rendering on Status Bar
As for the color on the status bar, it’s rendered by the OS depending on the color of the status bar. Once again, you have no control over this and there is no workaround for it.
Tint color on notification in status bar cannot be changed
TL DR
If you’re a developer, ask your designer
- A icon with no color, preferably a SVG.
- The color to be used in hex code
- Use
setColor
in theNotification.Builder
And as a designer
- You cannot use multiple colors
- You can however use different color on different notification, it might be useful in case ; like for example, red for error notification, green for success notification.
Resources
- Android Asset Studio — useful to generate a copy-pasteable Android-specific structured resource folder from the icon the designer give you. Designer can also use this tool to test how the icon will be rendered by the OS.
- Android Studio Image Asset Studio — Similar to Android Asset Studio but bundled inside Android Studio.
I hope it was a good read and you have a more understanding on how the Android OS operates. Do let me know if you have any questions in the comment below. 😉
This article was originally published onproandroiddev.com on May 03, 2022
YOU MAY BE INTERESTED IN
YOU MAY BE INTERESTED IN
blog
Creating reliable tests for Android notifications
Igor Escodro
Notifications are a very important part of Android apps, showing relevant information, informing when…
READ MORE
blog
Single source of truth for your build scripts
Shaik Ahron
In this article, we will discuss everything about notifications and show you how you…
READ MORE
Aung Kyaw Paing
View all posts
droidcon
View all posts