Switch your app icon on iOS now!

NEW EXPERIENCES IN 6 SHORT STEPS

Users can customize iOS App Icons after downloading their Xamarin app

Improve User Experience by allowing more user personalizations

GIF Showing the App Icon switching

At December’s Xamarin Community Standup, the Senior Microsoft Xamarin PM David Ortinau, talked about how the official GitHub app impressed him because it allowed him to update the app icon ‘after’ installing the app. He also mentioned that it is a possibility to do with Xamarin, but there isn’t a Xamarin article about it. I was curious to see how to do it and realized it’s really simple. You can also hop straight to the code sample on my GitHub.

Getting Started

Since it’s the simplest and most versatile, I will use a Blank Xamarin Forms App template from Visual Studio for this sample. We will access the Native iOS API’s using Dependency Services, as detailed by Microsoft Xamarin here.

Core Project: First, we will start by creating an IIconSwitchService interface that contains the contract that will be used to communicate between the Xamarin.Forms code and Native iOS UI:

public interface IIconSwitchService{
Task SwitchAppIcon(string iconName);
}

Then, we add two buttons in the XAML code of our page as shown below:

<Button Text="Switch Icon to Maui" Clicked="Maui_Button_Clicked"/>
<Button Text="Switch Icon to Xamarin" Clicked="Xam_Button_Clicked"/>

Finally, add the the event handlers for the buttons in the code behind. Passing the MauiLogo as a string converts the icon to the alternate icon, and passing null reverts to the default App Icon:

async void Maui_Button_Clicked(Object sender, EventArgs e){
var iconSwitcher = DependencyService.Get<IIconSwitchService>();
await iconSwitcher.SwitchAppIcon("MauiLogo");
}
async void Xam_Button_Clicked(Object sender, EventArgs e){
var iconSwitcher = DependencyService.Get<IIconSwitchService>();
await iconSwitcher.SwitchAppIcon(null);
}

IOS Project: We are going to add an alternate “MauiLogo” alongside the default Xamagon logo. So, first we add two logos to the iOS Resources folder: maui-logo@2x.png(120x120) & maui-logo@3x.png(180x180).

Then, open the Info.plist file in a text editor and add this right after the first <dict> opening tag:

<dict>
<key>CFBundleAlternateIcons</key>
<dict>
<key>MauiLogo</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>maui-logo</string>
</array>
</dict>
</dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array/>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
</dict>

Finally, we define the IconSwitchService class that contains your SwitchAppIcon() function performing the native iOS icon switch:

using ui = UIKit.UIApplication;
[assembly: Dependency(typeof(IconSwitchService))]
namespace {YourNamespace}.iOS
{
public class IconSwitchService : IIconSwitchService
{
public async Task SwitchAppIcon(string iconName)
{
if (ui.SharedApplication.SupportsAlternateIcons){
await ui.SharedApplication.SetAlternateIconNameAsync(iconName);
}
}
}
}
a

Now run the code and press the switch icon button, et puis voilà! As you can see in the GIF above or in this video by Gerald Versluis, tapping the first button switches to our new MauiLogo, and tapping on the second button switches back to the default icon. Note that the popup alert about the switch is automatically displayed by the app when the button code is executed. Feel free to let me know if you have any questions, and don’t forget to checkout the other cool blogs!

Developers building things, on here to share knowledge. Featured blog for PlanetXamarin.com github.com/saamerm linkedin.com/in/saamer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store