Customizing the Appearance of Android Push Notifications in AWS Amplify

This post describes how to customize the appearance of Android push notifications received by your AWS Amplify React Native app. We’ll cover changing the icons, and changing the sound in your push notifications.

AWS Amplify uses a combination of AWS Pinpoint, the react-native-push-notifications package, and its own unique Amplify customizations (such as the ability to customize the sound of the push notification in modern versions of Android). Much of this post is very similar to customizing the react-native-push-notifications package, but there are a few differences to pay attention to.

There also is a bonus section at the end on how to explore beneath-the-hood of the AWS Amplify Android Push Notification code. If you don’t know why your customizations aren’t working, this may help debug them.

This post is part of a series:
- Setting up Android Push Notifications with AWS Amplify
- Testing Push Notifications with AWS Amplify & CLI
- Handling Incoming Push Notifications in AWS Amplify
- Customizing the Appearance of Android Push Notifications with AWS Amplify

Customizing the icons

There are two icons that you can customize: small and large. OneSignal has a visual guide to where the small and large icons are used.

Your small icon can be generated with something like Android Asset Studio. Make sure each size of your small icon is named ic_notification.png and placed into the appropriate android\app\src\main\res\mipmap-* directory

Note: do not use the drawable-* directories that Android Asset Studio generates.

Your large icon can be 256x256 pixels. Name it ic_launcher.png and place it in your android\app\src\main\res\mipmap-xxxhdmi directory.

Customizing the sound

First, create an mp3 file called something like yoursound.mp3. Create an android\app\src\main\res\raw directory and place your mp3 file into it.

Behind the scenes, sound customization is implemented by creating an Android notification channel the first time a push notification is sent to the device. That first push notification contains information about the custom sound to use.

As the Android documentation states, “ After you create a notification channel, you cannot change the notification channel’s visual and auditory behaviors programmatically — only the user can change the channel behaviors from the system settings.”

When you send a push notification with AWS Pinpoint to a device endpoint or a user, as described in Testing Push Notifications with AWS Amplify, set the Sound field to your filename (minus the .mp3 extension):

{
  ...
  "MessageRequest": {
    "MessageConfiguration": {
      "GCMMessage": {
        "Sound": "yoursound",
        ...
      }
    }
    ...
  }
}

Remember that once that first push notification is sent to a device, the sound specified (either the default sound or a custom sound), cannot be changed by future push notifications.

Bonus: Debugging Android AWS Amplify Push Notifications

As an aside, if you want to see what’s happening under-the-hood as your Android push notification is received and processed by your app, run the following command in a new terminal:

adb logcat RNPushNotificationDeviceIDService:V RNPushNotificationMessagingService:V RNPushNotificationModule:V RNPushNotificationAttributes:V RNPushNotificationBroadcastReceiver:V RNPushNotificationHelper:V RNPushNotificationPublisher:V *:S

It will print the debug messages generated by the AWS Amplify Android Push Notification code.

If you are really hands-on, you can modify the *.java files in

node_modules/@aws-amplify/pushnotification/android/src/main/java/com/amazonaws/amplify/pushnotification/*.java

to add Log.d() commands of your own.

Recompile the Java files with npx react-native run-android and your new log messages will appear.

This post is part of a series:
- Setting up Android Push Notifications with AWS Amplify
- Testing Push Notifications with AWS Amplify & CLI
- Handling Incoming Push Notifications in AWS Amplify
- Customizing the Appearance of Android Push Notifications with AWS Amplify