1

I am trying to add dynamic shortcuts to send messages to specific users in my app. I want to set the shortcut icon to the users' profile photos, but no matter what I do, my shortcut icons have a white border around them.

            val contactCategories = setOf(SHARE_CATEGORY)
            val icon = if (friend.photo != null) IconCompat.createWithBitmap(run {
                val imageDecoded = Base64.decode(friend.photo, Base64.DEFAULT)
                val bitmap = BitmapFactory.decodeByteArray(imageDecoded, 0, imageDecoded.size)

                // From diesel - https://stackoverflow.com/a/15537470/7484693
                // Licensed under CC BY-SA 3.0
                val output: Bitmap = if (bitmap.width > bitmap.height) {
                    Bitmap.createBitmap(bitmap.height, bitmap.height, Bitmap.Config.ARGB_8888)
                } else {
                    Bitmap.createBitmap(bitmap.width, bitmap.width, Bitmap.Config.ARGB_8888)
                }

                Log.d(MainViewModel::class.java.name, "${bitmap.width} x ${bitmap.height}")
                val canvas = Canvas(output)

                val color: UInt = 0xff424242u
                val paint = Paint()
                val rect = Rect(0, 0, bitmap.width, bitmap.height)

                val r = if (bitmap.width > bitmap.height) {
                    (bitmap.height / 2).toFloat()
                } else {
                    (bitmap.width / 2).toFloat()
                }

                paint.isAntiAlias = true
                canvas.drawARGB(0, 0, 0, 0)
                paint.color = color.toInt()
                canvas.drawCircle(r, r, r, paint)
                paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
                canvas.drawBitmap(bitmap, rect, rect, paint)
                output
            }) else null

            ShortcutManagerCompat.pushDynamicShortcut(
                context,
                ShortcutInfoCompat.Builder(context, friend.id).setShortLabel(friend.name).setPerson(
                        Person.Builder().setName(friend.name).setKey(friend.id).setImportant(true)
                            .setIcon(icon).build()
                    ).setIcon(icon).setIntent(Intent(
                        context, MainActivity::class.java
                    ).apply {
                        action = Intent.ACTION_SENDTO
                        putExtra(EXTRA_RECIPIENT, friend.id)
                    }).setLongLived(true).setCategories(contactCategories).setPerson(
                        Person.Builder().setName(friend.name).build()
                    ).build()
            )

Most of the code is to get a circular icon, but even without the crop, the icon is scaled "to fit", so the corners are still visible. I'd like to scale it "to fill", so that none of the background is visible. The icon is a 128x128 bitmap, so it should be large enough, but scaling it up doesn't make a difference.

Here's a screenshot of what it currently looks like (notice the white border around the icon):

screenshot of launcher shortcuts showing border around icon

And here is what I would like it to look like:

screenshot of WhatsApp launcher shortcuts, with icon filling all available space

I know this is possible because several of Google's first-party apps (Messages, Meet, Contacts) and some 3rd-party apps (Whatsapp, Discord, eBay, Snapchat) all support this. Is there some API I'm missing? Some method of creating the icon?

Any help is much appreciated!

Aragorn Crozier
  • 364
  • 2
  • 12
  • Did I get that right, you create a shortcut icon in code and wonder why it has a white circle around it? From the screenshot it's hard to tell what is wrong and what exactly you are looking for. Maybe point out whats wrong and add another image of your desired state. – Bruno Bieri Nov 29 '22 at 08:25
  • @BrunoBieri Yes you got it right. I changed the screenshot of the issue to dark mode so it's clearer, and added what I would like it to look like. Thanks for the feedback! – Aragorn Crozier Nov 29 '22 at 17:54
  • I see, in that case you could update the questions title to reflect your actual question better: "Why do I see a white circle around a generated contact icon image?" or similar. Have you checked that you don't apply any border to images in the theme of your app? – Bruno Bieri Nov 30 '22 at 07:44
  • @BrunoBieri I suppose I could change the question title, but it seems like both get at the same idea. But it does seem like the image is not filling the space, and Android is putting the white space in as filler. The shortcut icon gets used (by Android) as the icon for an associated notification, which doesn't have any outline there. The app theme is set to `@style/Theme.Material3.DayNight.NoActionBar`, and I'm not sure if that applies borders? – Aragorn Crozier Nov 30 '22 at 19:51
  • I see. Have you tried to understand if it's really a border or the image is not fitted in correctly? For example change this line `canvas.drawARGB(0, 0, 0, 0);` to `canvas.drawARGB(0, 255, 0, 0);` which should fill the background red. If its a border applied somewhere else the border would remain white. – Bruno Bieri Dec 01 '22 at 07:32
  • @BrunoBieri I greatly appreciate your help. Upon further testing, it seems this issue is not occurring across all devices. Currently, I'm only able to reproduce it on the 10.1 WXGA Tablet emulator in Android Studio with API 33 (haven't checked other API levels). Pixel 6 Pro, Pixel 2, and Nexus 10 emulators don't show the outline. On the 10.1" tablet, changing the parameter doesn't do anything (since the first parameter is alpha, and is set to 0 - also, one would expect 0, 0, 0 to be black). Not sure if this is a documented Android thing or some strange bug I have in my code. – Aragorn Crozier Dec 02 '22 at 07:59

0 Answers0