Customizing your Rich Message Inbox Icon

This document references our Mobile Sample Apps, which you can download from our Developer Resources page, or you can use the Sample App that's provided in the SDK download

The Sample Apps use the Urban Airship logo, our Airship Icon Icon.png as the default. Be sure to change it to your own icon if you're building off of our Sample App and intend to use your app in production.  

 

This article will show you:

  • where to find the default rich notification icons that are used when a rich message is received and listed in the Message Center of your app so you can replace it with your own.
  • how to customize your icon for a particular Message Center notification using the Urban Airship API.

 

Setting the default Message Center icon

The location of the default icons that the app will use for all messages listed in each user's Message Center is different depending on the platform you're building your app for. 

Android

There are three locations that you will need to replace the default icon with (your final app may contain more locations, depending on the level of customization you implement).

Each icon is a .png image with the filename ic_notification.png, and they are located under the drawable directories within the res main directory. Note that there are multiple drawable directories. The icon must be replaced in all drawable* directories.

 

drawable-hdpi_ic_notification_png_-__RichPushSample__-_ua-android-lib-6_-____Desktop_ua-android-lib-6__-_Android_Studio__Preview__0_4_2.png

Figure 1 - Android

 

iOS

The two files you want to replace with your own logo are list-image-placeholder.png and list-image-placeholder@2x.png.

These image files are located in Airship > UI > Default > Inbox > Classes > Resources > Shared.

 

InboxSample_xcodeproj.png

Figure 2 - iOS

 

Customizing your icon for a Rich Message send

This functionality is only available when using the Urban Airship Push API, this cannot be done via the Urban Airship Dashboard at https://go.urbanairship.com/

An example Push API v3 JSON payload :

{
  "audience": "all",
  "device_types": [
    "ios",
    "android"
  ],
  "notification": {
    "alert": "<push notification alert text>"
  },
  "message": {
    "title": "<this is your message center title>",
    "body": "<insert page HTML here>",
    "content_type": "text/html",
    "icons": {
      "list_icon": "<internal/external path to icon file>"
    }
  }
}

 

In the example above, the list_icon you provide is an external URL of a .png image, or the internal URI containing it in your project.

 

This API call should not be used to permanently resolve issues with your default icon, such as accidentally releasing your app with the default Airship icon from our Sample App.

If you accidentally release your app with the default Airship icon, take the following steps:

  1. Replace the default icons in your app's project.
  2. Send test notifications to verify that you have done this properly.
  3. Release an application update to the proper App Store(s).

 

If your notification contains a custom icon located at an external URL and a particular device is using a slow or unreliable data connection when opening the inbox, the default icon .png image will be displayed until the entire image is downloaded to the device.

   

Related Content