Android Notification Icons

Adding custom icons to some or all of your notifications. Works with Android.

Icons are a way to provide a more unique, branded experience for your Android app.

You may add a default icon that appears with every notification that you send, or you may add icons to just certain types of notifications. This document details how to do both.

About Notification Icons

Android supports both Small and Large Notification Icons.

Small Notification Icons

The small icon is displayed on the top status bar as well as the notification itself. By default, iZooto will show a bell icon, however, it is recommended to customize this so users recognize it is a notification from your app. Note that Android only uses the alpha channel for the icon. It will display monochrome in the status bar but an accent color can be applied to the left side of the notification itself.

Large Notification Icons

The large notification icon will show up to the left of the notification text on Android 4.0.3 - 6.0 devices, and shows on the right for Android 7.0+ devices. If you do not set a large icon, the banner image will be used instead. If the banner image is also not available, then the SDK will show the bell icon by default. iZooto will auto-scale large notification icons for you to prevent the icon from being cropped. The recommended size of the large icon is 256x256 pixels.

521

How to Add Default Icons

It is highly recommended that you add default icons to every Android app.

Step 1: Generate Icons

📘

REQUIRED: Add every icon size listed below

You must add each image with the listed size and alpha transparency.

For help generating images with alpha transparency, see this clipart link for examples in the Android Asset Studio.

Option A: Using Android Asset Studio

Recommended

To quickly add and easily generate small icons with the correct settings, we recommend using the Android Asset Studio. Use ic_stat_izooto_default as the name.

Option B: Manually Create Icons

If you prefer to create your own icons, you must make your icons with the following sizes and make the small ones in white with a transparent background.

You must be sure the icon filenames are correct for Native and React Native.

Note: If you used Android Asset Studio for your small icon, then this step may have already been done for you.

Default Icon Name, Density, Size

Required: Each name and pixel size must be present in the app.

NameDensity (dp)Size (px)
ic_stat_izooto_defaultMDPI24x24
ic_stat_izooto_defaultHDPI36x36
ic_stat_izooto_defaultXHDPI48x48
ic_stat_izooto_defaultXXHDPI72x72
ic_stat_izooto_defaultXXXHDPI96x96
ic_izooto_large_icon_default.pngXXXHDPI256x256

Step 2: Create Project Paths

Make sure the following paths exist, create any folders you are missing.

Required: Each image must be present in the following paths.

SDKFile Path
Android Nativeres/drawable-mdpi/ (24x24)
res/drawable-hdpi/ (36x36)
res/drawable-xhdpi/ (48x48)
res/drawable-xxhdpi/ (72x72)
res/drawable-xxxhdpi/ (96x96)
res/drawable-xxxhdpi/ (256x256) (Large Icon)
Flutter & React Nativeandroid/app/src/main/res/drawable-mdpi/ (24x24)
android/app/src/main/res/drawable-hdpi/ (36x36)
android/app/src/main/res/drawable-xhdpi/ (48x48)
android/app/src/main/res/drawable-xxhdpi/ (72x72)
android/app/src/main/res/drawable-xxxhdpi/ (96x96)
android/app/src/main/res/drawable-xxxhdpi/ (256x256) (Large Icon)

🚧

Troubleshooting Icons Not Showing

  • If you see the default iZooto bell icon, you did not add all icon sizes. Please add all icon sizes and correct paths.
  • If you see a solid square, you set the image to the correct path, but the image does not have alpha transparency. For more help, try using images from this Android Studio Asset clipart.

👍

Done!

You are now all set with your default icons.

Small Icon Accent Colour

Android 5.0+ enforces your icon to only be white and transparent; however, it still allows tinting on the notification shown in the shade, known as the "accent colour". The status bar icon colour will be unaffected. These may be adjusted as defaults in your manifest.

Set Default Small Icon and Accent Colours

To set a default colour add the following line to your `res/values/strings.xml file in your project.

  • If you want a different colour for dark mode, add the key to your res/values-night/strings.xml as well.
<resources>
    <string name = "izooto_notification_accent_color">FF0015</string>
</resources>

🚧

New icons take a while to propagate to all users

If you have very recently added an icon resource to your app, you may want to wait a few days before sending notifications using the icon. This is because it can take many days or even weeks for the majority of your users to update their apps to the latest version which contains the new icons.

Custom Non-Alpha Channel Small Icon Images

Some device manufacturers display the image as-is (ignoring the alpha channel rule). You can set up a custom notification layout based on Android's documentation if you wish to use non-alpha channel images across all devices.

It is highly recommended that you follow the alpha rule as the icons may not look consistent on all devices. Google designed it this way as the icon is small and you cannot see any meaningful details, so enforcing a single colour helps enforce an easier-to-recognize icon at a glance.