Big Picture is Cropping while setting to Notification

Question

I want to show a Big Picture Style Image in my notification bar Android. But I am getting a problem -> When I set the image in notification bar using the below code:

PendingIntent resultPendingIntent = stackBuilder.getPendingIntent(0, PendingIntent.FLAG_UPDATE_CURRENT);
            NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(ctx)
            .setSmallIcon(R.drawable.ic_launcher)
            .setContentTitle(title)
            .setContentText(message)
            .setOngoing(false)
            .setAutoCancel(true)
            .setStyle(new NotificationCompat.BigPictureStyle()
            .bigPicture(bitmap))
            .setPriority(Notification.PRIORITY_HIGH)
            //.setStyle(new NotificationCompat.BigTextStyle().bigText(message))
            .setContentIntent(resultPendingIntent);
            // mId allows you to update the notification later on.
            mBuilder.setSound(Settings.System.DEFAULT_NOTIFICATION_URI);
            mBuilder.setDefaults(Notification.DEFAULT_VIBRATE);
            NotificationManager mNotificationManager = (NotificationManager) ctx.getSystemService(Context.NOTIFICATION_SERVICE);
            mNotificationManager.notify(0 , mBuilder.build());

It is always cropped from left and right corners. I dont want to use remote views for the same. Can anyone tell me the size and the resolutions of the image that can be placed in the notification bar which should not be cropped.

Thanks

Trehala

I think, it will depend on the screen ratio(screen width, etc.) of the particular device. – Ocarina

Answer 1

The reason its being cropped because its not in 2:1 ratio image that you are providing for big picture should be in 2:1 ratio else it will get cropped or image is small it will get stretch.

Check this out https://documentation.onesignal.com/docs/android-customizations#section-big-picture

Belittle

That doesn't seem to be an official documentation. – Gregggreggory

I also checked their notification-preview tool (available for both iOS & Android); there also 2:1 image looks fine: [1] fits perfectly for Android [2] gets shrinked across width on iOS, but still acceptable. @PedroOliveira indeed this isn't official doc, but given that these 3rd party providers are working exclusively on notifications front (charging customers for that too), we can presume that they must've come up with these numbers after thorough research (and likely experiments too); so I'd treat them to be fairly reliable – Squaw

Answer 2

Why not use a layout instead of a bitmap? Here is a tutorial on how to do it, http://codeversed.com/expandable-notifications-android/ and in the layout you can adjust the imageview properties to centre and scale the image and also use android's screen size buckets to fetch the images optimized for specific screen sizes. Let me know if that helps.

EDIT: Did any of the solutions help you achieve, what you desired? If so accept one of the answers, as it may help someone else. Thank you

Purdum

broken link :-( – Thomey

@Thomey check out the github repo that seems to be associated with that link: e.g. github.com/codeversed/notifications/blob/master/src/com/… – Gschu

Specifically, for using a layout, see github.com/codeversed/notifications/blob/master/src/com/… and the layout at github.com/codeversed/notifications/blob/master/res/layout/… – Gschu

Answer 3

https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/notification_template_material_big_picture.xml and http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/5.1.0_r1/android/app/Notification.java#Notification.Builder.getBigPictureLayoutResource%28%29 - Android source code.

I think this might help to clarify why is it cropping. ImageView behavior depends on the screen size, so your image would be cropped as

android:scaleType="centerCrop"

on each device differently, I'm afraid.

Ocarina

Answer 4

try to put your image view inside the layouts. Cause sometimes it works with smoothly. and try to put the scaletype= centerinside in your xml.

Pharisaic

it doesn´t apply to notifications! – Thomey