There are currently no responses for this story.

Be the first to respond.

NEW EXPERIENCES IN 6 SHORT STEPS

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: [email protected](120x120) & [email protected](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);
            }
        }
    }
}

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!