Correct implementation for Android themed icons (make monochrome layer of app icon configurable)

[superwilly1]

Description

Android supports 3 layers in the app icon: background, foreground and monochrome.
At the moment MAUI only supports background and foreground, and the monochrome is always set to the foreground resource.

maui/src/SingleProject/Resizetizer/src/AndroidAdaptiveIconGenerator.cs

Line 31 in f2cc45e

<monochrome android:drawable=""@mipmap/{name}_foreground"" />

<adaptive-icon xmlns:android=""http://schemas.android.com/apk/res/android"">
	<background android:drawable=""@mipmap/{name}_background""/>
	<foreground android:drawable=""@mipmap/{name}_foreground""/>
	<monochrome android:drawable=""@mipmap/{name}_foreground"" />
</adaptive-icon>

As the foreground resource of our app icons contain different colors instead of being a monochrome image, the app icon is showing incorrect on Android 13+ devices where the user has turned on 'themed icons' in the Android settings.

Android suggests setting 3 different layers: https://developer.android.com/develop/ui/views/launch/icon_design_adaptive#add-to-your-app

<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>

Public API Changes

Current configuration in our apps:

<MauiIcon
     Include="Resources\AppIcon\appicon_droid.svg"
     ForegroundFile="Resources\AppIcon\appicon_droid_foreground.svg"/>

Suggested change: only implement the monochrome layer if a MonochromeFile is supplied.
So if no MonochromeFile is supplied, don't add a monochrome layer (that way our icons will display correct because themed icons is not used in this case):

<MauiIcon
     Include="Resources\AppIcon\appicon_droid.svg"
     ForegroundFile="Resources\AppIcon\appicon_droid_foreground.svg"
     MonochromeFile="Resources\AppIcon\appicon_droid_monochrome.svg"/>

or to keep it backwards compatible, add an extra property to opt out of using the monochrome layer:

<MauiIcon
     Include="Resources\AppIcon\appicon_droid.svg"
     ForegroundFile="Resources\AppIcon\appicon_droid_foreground.svg"
     UseMonochromeLayer="false"/>

Intended Use-Case

To correctly implement the monochrome layer (and themed icons) on Android, we would like to have the possibility to either turn off the monochrome layer or to specify a resource to use for the monochrome layer (instead of using the foreground resource).

This way we can make sure the app icon is shown as we want it to, also when the user activates 'themed icons' on Android.

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• Add support for controlling the "compat" app icon shape (#11293), similarity score: 0.72

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[bholly24]

Is there any workaround to be able to opt-out of themed icons on MAUI or otherwise provide a different asset for the monochrome element? This is is definitely a concern for some branding teams.

[YZahringer]

any update or workaround on this?