Does Facebook picture as a message with a large icon appear on different phones as white?

Question

I have a problem with properly setting up and sending notifications. I read the new Lollipop 5.0 update notification design here: https://material.google.com/style/icons.html and https://material.google.com/patterns/notifications.html and I understand that the icons should be white to display correctly. This is great, and I fully understand it, but I want my notification to show an image that obviously cannot be white. However, I am really confused by the fact that when I try to make a notification on my phone, everything works fine. It looks something like this:

However, on my mobile phone, it looks like a white square, something like this:

This is strange because we have the same version of Android, version 6.0.1. Here is the code I used to send the notification:

 private class NotificationPicture extends AsyncTask<String, Void, Bitmap> { Context context; String userId; String postId; String name; String notificationBody; String from; public NotificationPicture(Context context) { super(); this.context = context; } @Override protected Bitmap doInBackground(String... params) { userId = params[0]; postId = params[1]; name = params[2]; notificationBody = params[3]; from = params[4]; try { URL url = new URL("https://graph.facebook.com/" + userId + "/picture?type=large"); HttpURLConnection connection = (HttpURLConnection) url.openConnection(); connection.setDoInput(true); connection.connect(); InputStream in = connection.getInputStream(); Bitmap bitmap = BitmapFactory.decodeStream(in); Bitmap output; Rect srcRect; if (bitmap.getWidth() > bitmap.getHeight()) { output = Bitmap.createBitmap(bitmap.getHeight(), bitmap.getHeight(), Bitmap.Config.ARGB_8888); srcRect = new Rect((bitmap.getWidth()-bitmap.getHeight())/2, 0, bitmap.getWidth()+(bitmap.getWidth()-bitmap.getHeight())/2, bitmap.getHeight()); } else { output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getWidth(), Bitmap.Config.ARGB_8888); srcRect = new Rect(0, (bitmap.getHeight()-bitmap.getWidth())/2, bitmap.getWidth(), bitmap.getHeight()+(bitmap.getHeight()-bitmap.getWidth())/2); } Canvas canvas = new Canvas(output); final int color = 0xff424242; final Paint paint = new Paint(); final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); float r; if (bitmap.getWidth() > bitmap.getHeight()) { r = bitmap.getHeight() / 2; } else { r = bitmap.getWidth() / 2; } paint.setAntiAlias(true); canvas.drawARGB(0, 0, 0, 0); paint.setColor(color); canvas.drawCircle(r, r, r, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(bitmap, srcRect, rect, paint); return output; } catch (IOException e) { FirebaseCrash.report(e); return null; } } @Override protected void onPostExecute(Bitmap result) { super.onPostExecute(result); try { NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(context) .setContentTitle(getString(R.string.app_name)) .setContentText(notificationBody) .setTicker(from + " has responded!") .setAutoCancel(true) .setSound(RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION)) .setStyle(new NotificationCompat.BigTextStyle().bigText(notificationBody)) .setSmallIcon(R.drawable.ic_tabs_notification_2) .setLargeIcon(result); Intent resultIntent = new Intent(context, CommentsActivity.class); setupPostDetails(notificationBuilder, resultIntent, postId, userId, name, context); } catch (Exception e) { e.printStackTrace(); } } } 

build.gradle configuration:

 compileSdkVersion 23 buildToolsVersion "23.0.1" compileOptions { sourceCompatibility JavaVersion.VERSION_1_7 targetCompatibility JavaVersion.VERSION_1_7 } defaultConfig { applicationId 'com.schan.tabs' multiDexEnabled true minSdkVersion 19 targetSdkVersion 23 versionCode 16 versionName "1.16" signingConfig signingConfigs.Tabs } 

If anyone knows why this happens, some insight could be appreciated. I have a Samsung SM-G900V (Samsung S5) and my friend has a One plus One phone if that helps.

Answer 1

I think you need to provide a new notification icon with a transparent background for Android 6 and above, so when you set the notification icon as follows:

 .setSmallIcon(android.os.Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP ? R.drawable.ic_notif_with_transparent_bg : R.drawable.ic_notif_current) 

If you want to show a photo, perhaps you can try using RemoteViews

Answer 2

Hope this helps you:

 int icon = Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ? R.drawable.your_logo_for_Kitkat : R.mipmap.your_logo_for_Lolipop_and_uper_version; NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this) .setSmallIcon(icon) .setContentTitle(remoteMessage.getData().get("title")) .setContentText(remoteMessage.getData().get("shortDescription")) .setAutoCancel(true) .setSound(defaultSoundUri) .setColor(Color.RED) .setStyle(notiStyle) .setContentIntent(pendingIntent); 

To download the URL:

 private class sendNotification extends AsyncTask<String, Void, Bitmap> { Context ctx; String message; public sendNotification(Context context) { super(); this.ctx = context; } @Override protected Bitmap doInBackground(String... params) { InputStream in; message = params[0] + params[1]; try { URL url = new URL(params[2]); HttpURLConnection connection = (HttpURLConnection) url.openConnection(); connection.setDoInput(true); connection.connect(); in = connection.getInputStream(); Bitmap myBitmap = BitmapFactory.decodeStream(in); return myBitmap; } catch (MalformedURLException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return null; } @Override protected void onPostExecute(Bitmap result) { super.onPostExecute(result); try { NotificationManager notificationManager = (NotificationManager) ctx .getSystemService(Context.NOTIFICATION_SERVICE); Intent intent = new Intent(ctx, NotificationsActivity.class); intent.putExtra("isFromBadge", false); Notification notification = new Notification.Builder(ctx) .setContentTitle( ctx.getResources().getString(R.string.app_name)) .setContentText(message) .setSmallIcon(R.drawable.ic_launcher) .setLargeIcon(result).build(); // hide the notification after its selected notification.flags |= Notification.FLAG_AUTO_CANCEL; notificationManager.notify(1, notification); } catch (Exception e) { e.printStackTrace(); } } }