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.
Reasons You Should Use It
- 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. - 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. - 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.
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!