I can't seem to get my head around how to design the icons for my app shortcuts that I handle dynamically at runtime.

When reviewing most of Google apps, I can't see consistency in the designs:

• some shortcuts come with a custom background

• some shortcuts have colored icons

• some shortcuts have very small icons

And what's worse, is that depending on the Android version, the OEM and possibly the launcher, the visual rendering may differ!

During my research, I stumbled upon this document https://commondatastorage.googleapis.com/androiddevelopers/shareables/design/app-shortcuts-design-guidelines.pdf that seems legit and clear enough. Basically it stipulates:

• size : 48x48dp

• gray centered circle of 44x44dp

• centered icon of 24x24dp

I tried on a Emulator running Android 16 with Google APIs and while the visuals are OK-ish, it's nothing compared to what other apps and Google apps do.

But on my OnePlus 10 Pro running Android 10, using adaptive icons in XML + VectorDrawable, it's ugly: the launchers applies the squircle on my the gray circle and the icon is very small.

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_shortcut_background" />
    <foreground android:drawable="@drawable/ic_shortcut_foreground_save" />
</adaptive-icon>

// background XML

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="48"
    android:viewportHeight="48">
    <path
        android:fillColor="#f5f5f5"
        android:pathData="M24,24m-22,0a22,22 0,1 1,44 0a22,22 0,1 1,-44 0" />
</vector>

// foreground XML

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="48"
    android:viewportHeight="48">
    <path
        android:fillColor="#000000"
        android:pathData="m24,28 l-5,-5 1.4,-1.45 2.6,2.6l0,-8.15l2,0l0,8.15l2.6,-2.6 1.4,1.45zM18,32q-0.825,0 -1.413,-0.588Q16,30.825 16,30l0,-3l2,0l0,3l12,0l0,-3l2,0l0,3q0,0.825 -0.588,1.413Q30.825,32 30,32Z" />
</vector

// Code where I build the dynamic icon

ShortcutInfo.Builder(/* context = */ context, /* id = */ shortcutId).apply {
    setShortLabel(context.getText(R.string.app_shortcut_save_current_wallpaper_image_short_label))
    setLongLabel(context.getText(R.string.app_shortcut_save_current_wallpaper_image_long_label))
    setIcon(Icon.createWithResource(context, R.drawable.ic_shortcut_save))
}

Preview in Android Studio - seems OK

Result in Emulator:

and on my OnePlus 10 Pro Android 16:

So on the emulator, it's good but not on my phone. Then I saw an app where the visuals please me on my OP:

Mihon app source code is public so I went there : https://github.com/mihonapp/mihon/blob/main/app/src/main/shortcuts.xml and I copied their XML :

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:keep="@drawable/sc_collections_bookmark_48dp">
    <background android:drawable="@color/splash_background"/>
    <foreground>
        <vector
            android:width="120dp"
            android:height="120dp"
            android:viewportWidth="56.0"
            android:viewportHeight="56.0">
            <group
                android:translateX="16"
                android:translateY="16">
                <path
                    android:fillColor="#FFF"
                    android:pathData="M4,6H2v14c0,1.1 0.9,2 2,2h14v-2H4V6z"/>
                <path
                    android:fillColor="#FFF"
                    android:pathData="M20,2L8,2c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L22,4c0,-1.1 -0.9,-2 -2,-2zM20,12l-2.5,-1.5L15,12L15,4h5v8z"/>
            </group>
        </vector>
    </foreground>
</adaptive-icon>

Looks good as well in preview:

as well as in Emulator:

but not on my OP:

==> Why can't I get the same result as Mihon ? Is it because they use static icons / shortcuts while I use dynamics ones ?