Android Push Template

This section is a step-by-step guide on how to design and publish android push notification template.

Design Template

You can design template with a simple form editor tool. You can add variables with Handlebars language. You can check how the message will look in the preview section on the right side.
Once designed, you can save the push notification template by clicking on Save Draft. When you are ready, you can Publish Draft by providing a name to the version. This will become the Live version, and will be used whenever the associated workflow is triggered.


Android Push Notification Fields Description

FieldDescription
TitleSmall message text box. Note that this field will be displayed in single line only, and very long content can get curtailed.
Use handlebars to add variables.
Small IconSmall icon is displayed on the top status bar as well as the notification itself. Developer needs to set this to your logo in your app. Default shown is bell icon. The color used is your brand color set in 'Organisation Settings'
Large IconThe large 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. SuprSend puts your organisation logo as default in the large icon, which you can set from 'Organisations Tab'.
MessageLarge message text box. Use handlebars to add variables.
SubtextOptional
Subtext appears on top, next to your brand name.
Banner ImageOptional
For dynamic images:
Banner filetypes: PNG, JPG, JPEG.
Recommended aspect ratio: 2:1
Recommended maximum size: 700 KB

For static images (that are uploaded):

- SuprSend will auto-scale your image so that it doesn't get cropped
- SuprSend will optimise the image size so that it is loaded faster on low internet connections.
Action URLProvide a URL where a user will go when he clicks on the push notification. You can give your android deeplink URL as well.
Action ButtonsOptional
Enter up to 3 Button names and URL. You can use variable names using handlebars in both action name and URL. You can give your android deeplink URL as well.
The action button name color is picked up from your organisation settings. You cannot change button color in a template once it is created.

Android Push - Advanced Configurations (Optional)

FieldTypeDescription
TimeoutNumericYou can use timeout if you want your notifications to auto-dismiss after a certain time period in case your user has not interacted with that notification. You can add time in seconds in this field.
Sticky NotificationsBooleanWith Sticky Notifications "ON", the user will not be able to dismiss the notification by left swiping on the notification tray. However, notification will be removed from the tray if the user has clicked on the notification
Notification groupSingle line TextAdd a group name to the notification if you want your notifications to be stacked together in the tray. Notifications belonging to the same group will be stacked together.
App icon (Small icon)Single line TextSmall icon name without extension. The small icon is displayed on the top status bar and on the left side of notification header. By default SuprSend will show a bell icon, however you can customize this to show your app icon instead.
SoundSingle line TextSound file name without extension or with extension. This is used to play custom sound on notification delivery. If left blank, the default notification sound of the device will be played. To set custom sound, you'll have to add raw sound file in your android app folder

πŸ“˜

Required - Supported SDK version for app icon and sound

  • App icon functionality is supported in Android native and react native version 0.1.8 and above.
  • Custom Sound is supported in Android native and react native version 2.2.0 and above.

If you are using an older SDK version, please upgrade to the latest SDK version


How to change the small icon for a notification?

To show a small app icon in your notification, you'll have to add a small icon in the drawable folder of application modules. You can either use a vector drawable or a png image. We recommend naming this file as ic_suprsend_app_icon

πŸ“˜

Generate icon images with alpha transparency

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 the notification itself.


Option A. Adding a vector drawable

You can add a vector drawable icon to the default drawable folder of your application module(androidApp/src/main/res/drawable/). Check out a sample vector drawable link.

Option B. Adding a png icon for small icon

You can add a icon in .png format. To render this png icon as a small icon in your push notification, you will have to create icons of below sizes and place them in their respective folders. Refer below table:

Density (dp)Size (px)
MDPI24x24
HDPI36x36
XHDPI48x48
XXHDPI72x72
XXXHDPI96x96

Follow below steps to add icons in .png format

Step 1. Generate icon

Option A. Using Android Asset Studio (Recommended)

To quickly generate small icons with the correct settings, you can use Android Asset Studio.

Option B. Manually create icons

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


Step 2. Create project paths

Make sure the following paths exist in your App -> main folder, create any folders you are missing. Place images of each size in their respective folders.

SDKFile path
Android Nativeres/drawable-mdpi/ (24x24)
res/drawable-hdpi/ (36x36)
res/drawable-xhdpi/ (48x48)
res/drawable-xxhdpi/ (72x72)
res/drawable-xxxhdpi/ (96x96)
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)

Your project should look similar to this depending on your SDK. Sample png drawable link


🚧

Troubleshooting Icons Not Showing

  • If you see the default SuprSend bell icon even after adding app icon in your template, you did not add all icon sizes. Please add all icons 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 Asset Studio clipart.

How to add a custom sound file in your android project?

From Android O onwards, notification sound became a property of notification channel and is only set at the time of new category creation (Notification channel is identified as notification category in SuprSend). This means that for a user when you first time send the notification in a particular category, the sound is set for that category and even if you change the sound in your template, the sound in that category will not change. The updated sound will play for the user either if you send notification in a new category or user uninstalls and reinstalls the app.

For devices on android version before O, the sound will be set at individual notification level and whenever you change the sound on a template, it will play the new sound for user. Leaving the sound field blank will play the default notification sound on the device.

To change the notification sound you will have to add the sound file to the raw folder of your android app.

projectroot/app/res/raw

πŸ“˜

Recommendation

Please keep the file name in lower case and avoid using space in the file name instead you can use underscore(_) in place of space

Ex - notification.mp3, notificationMusic.mp3,notification_music.mp3


🚧

Sound is set at channel level for android version >= 8.0

From Android O onwards (~95% of the android users), notification sound became a property of notification channel and is only set at the time of new category creation. So, the new sound set at template will only change for users if

  • you are sending the notification in a new notification category
  • user is installing the app for the first time or getting notification in that category for the first time
  • user has uninstalled and reinstalled the app

Adding Dynamic Content in Android Push

There will always be the case where you would be required to add dynamic content to a template, so as to personalise it for your users. To achieve this, you can add variables in the template, which will be replaced with the dynamic content at the time of sending push. To send actual values to replace variables at the time of communication trigger, use one of our frontend or backend SDKs.
Here is a step by step guide on how to add dynamic content in android push:

Step 1: Declaring Variables in the global 'Variables' button:

If you are at this stage, it is assumed that you have declared the variables along with sample values in the global Variables button.
To see how to declare variables before using them in designing templates, refer to this section in the Templates documentation.

Step 2: Using variables in the templates:

Once the variables are declared, you can use them while designing the android push template. We support handlebars to add variables in the template. As a general rule, all the variables have to be entered within double curly brackets: **{{variable_name}}**

If you have declared the variables in the global 'Variables' button, then they will come as auto-suggestions when you type a curly bracket {. This will remove the chances of error like variable mismatch at the time of template rendering.

Note that you will be able to enter a variable name even when you have not declared it inside the 'Variables' button. To manually enter the variable name, follow the handlerbars guide here.

Below are some examples of how to enter variables in the template design. For illustration, we are using the same sample variable names that we declared in the 'Templates' section:

{
  "array": [
    {
      "product_name": "Aldo Sling Bag",
      "product_price": "3,950.00"
    },
    {
      "product_name": "Clarles & Keith Women Slipper, Biege, 38UK",
      "product_price": "2,549.00"
    },
    {
      "product_name": "RayBan Sunglasses",
      "product_price": "7,899.00"
    }
  ],
  "event": {
    "location": {
      "city": "Bangalore",
      "state": "KA"
    },
    "order_id": "11200123",
    "first_name": "Nikita"
  },
  "product_page": "https://www.suprsend.com"
}
  1. To enter a nested variable, enter in the format {{var1.var2.var3}}. Eg. to refer to city in the example above, you need to enter {{event.location.city}}
  2. To refer to an array element, enter in format {{var1.[_index_].var2}}. Eg. to refer to product_nameof the first element of the arrayarray, enter {{array.[0].product_name}}`
  3. If you have any space in the variable name, enclose it in square bracket {{event.[first name]}}

You will be able to see the sample values in the Preview section, as well as in the Live version when you publish a draft.
If you cannot see your variable being rendered with the sample value, check one of the following:

  1. Make sure you have entered the variable name and the sample value in the Variables button.
  2. Make sure you have entered the correct variable name in the template, as per the handlebars guideline.


🚧

What happens if there is variable mismatch at the time of sending?

At the time of sending communication, if there is a variable present in the template whose value is not rendered due to mismatch or missing, SuprSend will simply discard the template and not send that particular notification to your user.

Please note that the rest of the templates will be sent. Eg. if there is an error in rendering Android Push template, but email template is successfully rendered, Android Push notification will not be triggered, but email notification will be triggered by SuprSend.

Image Optimisations

SuprSend does some image optimisations in push notifications for images that are static in nature, ie. image is uploaded in 'Banner Image' field on template, so that the push notification delivery rate increases and the time of delivery for push notification reduces. These optimisations are as below:

1. Image optimisation based on Screen Width:

If there is a very large image in the "Banner Image" field, SuprSend will reduce the image size to fit as per the mobile screen width of your user.

2. Image optimisation based on network:

Your users might be on different network, namely wifi, 4G, 3G, 2G. And therefore, depending on your user's network we optimise the image size. This improves the push notification delivery for users whose network is not very fast.


What’s Next

See how to integrate your FCM tokens to start sending android push to your users.