A Step-by-Step Guide to Setting Up Adaptive Icons in .NET MAUI for Android

Introduction

Adaptive Icons are a crucial aspect of creating a visually appealing and cohesive user experience on Android devices. With the advent of .NET MAUI, developers now have a powerful framework for building cross-platform applications. In this article, we’ll delve into the process of setting up an adaptive icon set for Android in a .NET MAUI project.

Keep in mind that for optimal performance and compatibility, Android apps utilizing adaptive icons must have a minimum target API level of 26 or higher.

Image From: https://developer.android.com/develop/ui/views/launch/icon_design_adaptive

Reasons You Should Use It

1. Unified Aesthetics
   Adaptive icons ensure a seamless and visually harmonious appearance across all Android devices, accommodating various screen sizes and resolutions. It promotes a unified brand image and enhances the overall user experience.
2. Future-Proof Design
   Embracing adaptive icons future-proofs your app against evolving Android platforms and new device releases. This design approach ensures that your app remains visually appealing and functional.
3. Personalization
   By adapting to users icon shape preferences and system themes, it empower individuals to personalize their device’s interface.

Step-by-Step Guide

Step 1: Create an Icon Set

Start by designing your icon set using a tool like Icon Kitchen (https://icon.kitchen/). Once you’ve crafted the perfect icons for your application, download it.

If you want to skip a few steps you will have in Icon Kitchen under the section “More” the field “Filename”, here you can already adjust the name to “appicon”. Then go to Step 4.

Step 2: Rename Files to Match .NET MAUI Structure

I don’t want to break the naming convention, so I customize it like in a .NET MAUI project. Navigate to the downloaded folder and go to the “android/res” folder. There you will find several folders with the name “mipmap-*”, these contains files with “ic_launcher_*.png”, I rename them all to “appicon_*.png”.

Step 3: Adjust appicon.xml

Inside the “mipmap-anydpi-v26” you find the “appicon.xml” file, update the field android:drawable:

<background android:drawable="@mipmap/appicon_background"/>
<foreground android:drawable="@mipmap/appicon_foreground"/>
<monochrome android:drawable="@mipmap/appicon_monochrome"/>

Step 4: Add Mipmap Folders

Copy the content of the downloaded folder “res” into the“Platform/Android/Resources” directory in your .NET MAUI project. These will house the adaptive icon set for various screen densities.

folder structure

Step 5: Embed Files in .NET MAUI Project

In your .NET MAUI project, embed each icon file. Choose Embedded Resource as the Build Action.

Step 6: Adjust .csproj File

Update the .csproj file of your app to ignore the current AppIcon for your Android project:

<MauiIcon Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) != 'android'" Include="Resources\AppIcon\appicon.svg" Color="White" />

We exclude Android, as the AndroidManifest.xml will handle the selection of the icon set.

Step 7: Update AndroidManifest.xml

Ensure that in the “AndroidManifest.xml” file, the application field contains → android:icon=”@mipmap/appicon”

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
 <application ... android:icon="@mipmap/appicon" ></application>
</manifest>

Step 8: Rebuild Your .NET MAUI Project

Execute a rebuild of your .NET MAUI project to incorporate the changes.

Step 9: Launch Your App

Once rebuilt, launch your .NET MAUI app. If you’ve configured the Android settings correctly and your device meets the required Android OS version, your app should now showcase the adaptive icon set.

Conclusion

Adapting icons for Android in a .NET MAUI project is a straightforward process. By following these steps, you can ensure your app’s visual identity is consistent and appealing across a variety of Android devices.

Working on .NET MAUI too? Share your thoughts and experiences by dropping a comment!