{"_id":"5b720760c44b7600034b79e8","parentDoc":null,"githubsync":"","project":"55e67aaa9cc7c62b00c4a1ea","__v":9,"category":{"_id":"5b720760c44b7600034b79ac","project":"55e67aaa9cc7c62b00c4a1ea","__v":0,"version":"5b720760c44b7600034b7a08","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-02-08T21:31:11.878Z","from_sync":false,"order":7,"slug":"advanced-techniques","title":"Advanced Techniques"},"user":"56035f358d58900d0051e976","version":{"_id":"5b720760c44b7600034b7a08","project":"55e67aaa9cc7c62b00c4a1ea","__v":0,"forked_from":"5b1f2cbdfd653400031d8d9f","createdAt":"2015-09-02T04:27:23.612Z","releaseDate":"2015-09-02T04:27:23.612Z","categories":["5b720760c44b7600034b79a7","5b720760c44b7600034b79a8","5b720760c44b7600034b79a9","5b720760c44b7600034b79aa","5b720760c44b7600034b79ab","561c61b4ad272c0d00a892df","586c014c0abf1d0f000d04d4","58991d2ad207df0f0002186b","5b720760c44b7600034b79ac","5b720760c44b7600034b79ad","5af0fe494ca2730003cbc98a","5af0fe55ec80af0003804ca2"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"API V6","version_clean":"1.4.0","version":"1.4"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-05-19T02:48:53.845Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","apiSetting":null,"auth":"required","params":[],"url":""},"isReference":false,"order":10,"body":"Sailthru Mobile supports Android Rich Notifications out of the box for image payloads.\n\nWhen creating image messages, Android will automatically add the image's thumbnail to the notification with an expanded layout showing a larger image.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/131d415-Screen_Shot_2018-05-08_at_1.45.22_PM.png\",\n        \"Screen Shot 2018-05-08 at 1.45.22 PM.png\",\n        1105,\n        523,\n        \"#e2e8ed\"\n      ],\n      \"caption\": \"Creating a message with an image inside the Carnival platform.\",\n      \"border\": true\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/e9cb256-Screenshot_20170324-063420.png\",\n        \"Screenshot_20170324-063420.png\",\n        709,\n        508,\n        \"#e9dfdd\"\n      ],\n      \"caption\": \"An Android Rich Notification on device created from the message.\",\n      \"sizing\": \"smart\",\n      \"border\": true\n    }\n  ]\n}\n[/block]\nYou can extend or change this default behavior by adding a `NotificationCompat.Extender` and implementing your own notification style. This is useful if you want to add media controls, or you'd like to render the notification body with an expanded view.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\nimport android.support.v4.app.NotificationCompat;\\npublic class RichPushNotificationExtender implements NotificationCompat.Extender {\\n  protected static String TAG = \\\"RichPushNotificationExtender\\\";\\n  protected static String KEY_PAYLOAD_ALERT = \\\"alert\\\";\\n  protected static String KEY_PAYLOAD_TITLE = \\\"title\\\";\\n  protected static String KEY_PAYLOAD_IMAGE_URL = \\\"image_url\\\";\\n  \\n  :::at:::Override\\n  public NotificationCompat.Builder extend(NotificationCompat.Builder builder) {\\n    Bundle bundle = builder.getExtras();\\n    Context context = builder.mContext;\\n    \\n    String imageUrl = bundle.getString(KEY_PAYLOAD_IMAGE_URL);\\n    if (TextUtils.isEmpty(imageUrl)) {\\n        // Keep Carnival style if there's not \\\"image_url\\\" on payload\\n        return builder.extend(new CarnivalNotificationExtender(context));\\n    }\\n    \\n    builder.setContentTitle(context.getResources().getString(R.string.app_name))\\n           .setSmallIcon(R.drawable.carnival_bg_notification)\\n           .setContentText(bundle.getString(KEY_PAYLOAD_ALERT));\\n           \\n    Bitmap image = fetchImageForMessage(imageUrl);\\n    \\n    NotificationCompat.BigPictureStyle largeFormatStyle = new NotificationCompat.BigPictureStyle()\\n      .bigPicture(image)\\n      .setBigContentTitle(context.getResources().getString(R.string.app_name))\\n      .setSummaryText(bundle.getString(KEY_PAYLOAD_TITLE))\\n      .bigLargeIcon(image);\\n    builder.setLargeIcon(image);\\n    builder.setStyle(largeFormatStyle);\\n\\n    return builder;\\n  }\\n  \\n  // code used to load image from url\\n  private @Nullable Bitmap fetchImageForMessage(@NonNull String imageUrl) {\\n      URL url;\\n      try {\\n          url = new URL(imageUrl);\\n      } catch (MalformedURLException e) {\\n          Log.e(TAG, \\\"Malformed image URL in Push Payload: \\\" + e.getLocalizedMessage());\\n          return null;\\n      }\\n\\n      AsyncTask<URL, Void, Bitmap> task = new AsyncTask<URL, Void, Bitmap>() {\\n\\n          @Override\\n          protected Bitmap doInBackground(URL... params) {\\n              try {\\n                  URL url = params[0];\\n                  HttpURLConnection connection = (HttpURLConnection) url.openConnection();\\n                  connection.setDoInput(true);\\n                  connection.connect();\\n                  InputStream input = connection.getInputStream();\\n                  return BitmapFactory.decodeStream(input);\\n              } catch (IOException e) {\\n                  Log.e(TAG, \\\"IO Error loading Message image:\\\" + e.getLocalizedMessage());\\n                  return Bitmap.createBitmap(1, 1, Bitmap.Config.ALPHA_8);\\n              }\\n          }\\n\\n      }.execute(url);\\n      try {\\n          return task.get(5, TimeUnit.SECONDS);\\n      } catch (Exception e) {\\n          Log.e(TAG, \\\"Failed to wait for Message Image in RichPushNotificationExtender: \\\" + e.getMessage());\\n          return null;\\n      }\\n  }\\n   \\n}\",\n      \"language\": \"java\",\n      \"name\": \"Android (Java)\"\n    }\n  ]\n}\n[/block]\nThen add your extender to `NotificationConfig`\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"public class MyApplication extends Application {\\n  @Override\\n  public void onCreate() {\\n    super.onCreate();\\n\\n    Carnival.startEngine(getApplicationContext(), \\\"your sdk key\\\");\\n\\n    NotificationConfig notificationConfig = new NotificationConfig();\\n    notificationConfig.addNotificationExtender(new RichPushNotificationExtender());\\n    Carnival.setNotificationConfig(notificationConfig);\\n  }\\n}\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"rich-notifications","type":"basic","title":"Android: Rich Notifications"}

Android: Rich Notifications


Sailthru Mobile supports Android Rich Notifications out of the box for image payloads. When creating image messages, Android will automatically add the image's thumbnail to the notification with an expanded layout showing a larger image. [block:image] { "images": [ { "image": [ "https://files.readme.io/131d415-Screen_Shot_2018-05-08_at_1.45.22_PM.png", "Screen Shot 2018-05-08 at 1.45.22 PM.png", 1105, 523, "#e2e8ed" ], "caption": "Creating a message with an image inside the Carnival platform.", "border": true } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/e9cb256-Screenshot_20170324-063420.png", "Screenshot_20170324-063420.png", 709, 508, "#e9dfdd" ], "caption": "An Android Rich Notification on device created from the message.", "sizing": "smart", "border": true } ] } [/block] You can extend or change this default behavior by adding a `NotificationCompat.Extender` and implementing your own notification style. This is useful if you want to add media controls, or you'd like to render the notification body with an expanded view. [block:code] { "codes": [ { "code": "\nimport android.support.v4.app.NotificationCompat;\npublic class RichPushNotificationExtender implements NotificationCompat.Extender {\n protected static String TAG = \"RichPushNotificationExtender\";\n protected static String KEY_PAYLOAD_ALERT = \"alert\";\n protected static String KEY_PAYLOAD_TITLE = \"title\";\n protected static String KEY_PAYLOAD_IMAGE_URL = \"image_url\";\n \n @Override\n public NotificationCompat.Builder extend(NotificationCompat.Builder builder) {\n Bundle bundle = builder.getExtras();\n Context context = builder.mContext;\n \n String imageUrl = bundle.getString(KEY_PAYLOAD_IMAGE_URL);\n if (TextUtils.isEmpty(imageUrl)) {\n // Keep Carnival style if there's not \"image_url\" on payload\n return builder.extend(new CarnivalNotificationExtender(context));\n }\n \n builder.setContentTitle(context.getResources().getString(R.string.app_name))\n .setSmallIcon(R.drawable.carnival_bg_notification)\n .setContentText(bundle.getString(KEY_PAYLOAD_ALERT));\n \n Bitmap image = fetchImageForMessage(imageUrl);\n \n NotificationCompat.BigPictureStyle largeFormatStyle = new NotificationCompat.BigPictureStyle()\n .bigPicture(image)\n .setBigContentTitle(context.getResources().getString(R.string.app_name))\n .setSummaryText(bundle.getString(KEY_PAYLOAD_TITLE))\n .bigLargeIcon(image);\n builder.setLargeIcon(image);\n builder.setStyle(largeFormatStyle);\n\n return builder;\n }\n \n // code used to load image from url\n private @Nullable Bitmap fetchImageForMessage(@NonNull String imageUrl) {\n URL url;\n try {\n url = new URL(imageUrl);\n } catch (MalformedURLException e) {\n Log.e(TAG, \"Malformed image URL in Push Payload: \" + e.getLocalizedMessage());\n return null;\n }\n\n AsyncTask<URL, Void, Bitmap> task = new AsyncTask<URL, Void, Bitmap>() {\n\n @Override\n protected Bitmap doInBackground(URL... params) {\n try {\n URL url = params[0];\n HttpURLConnection connection = (HttpURLConnection) url.openConnection();\n connection.setDoInput(true);\n connection.connect();\n InputStream input = connection.getInputStream();\n return BitmapFactory.decodeStream(input);\n } catch (IOException e) {\n Log.e(TAG, \"IO Error loading Message image:\" + e.getLocalizedMessage());\n return Bitmap.createBitmap(1, 1, Bitmap.Config.ALPHA_8);\n }\n }\n\n }.execute(url);\n try {\n return task.get(5, TimeUnit.SECONDS);\n } catch (Exception e) {\n Log.e(TAG, \"Failed to wait for Message Image in RichPushNotificationExtender: \" + e.getMessage());\n return null;\n }\n }\n \n}", "language": "java", "name": "Android (Java)" } ] } [/block] Then add your extender to `NotificationConfig` [block:code] { "codes": [ { "code": "public class MyApplication extends Application {\n @Override\n public void onCreate() {\n super.onCreate();\n\n Carnival.startEngine(getApplicationContext(), \"your sdk key\");\n\n NotificationConfig notificationConfig = new NotificationConfig();\n notificationConfig.addNotificationExtender(new RichPushNotificationExtender());\n Carnival.setNotificationConfig(notificationConfig);\n }\n}", "language": "java" } ] } [/block]