Click here to Skip to main content
14,971,448 members
Articles / Mobile Apps / Xamarin
Article
Posted 14 Jun 2016

Tagged as

Stats

41K views
2 bookmarked

Configure App Icons in Xamarin Forms App

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
14 Jun 2016CPOL4 min read
Configure App Icons in Xamarin Forms App

Sometimes things seem more confusing than we think, like setting up the app icons and splash screen in Xamarin Forms iOS application ?? so I thought why not document this in a single place for all 3 platforms (iOS, Android & UWP). This post will mainly cover how to do it in Visual Studio, however similar steps can be followed in Xamarin Studio also.

The only place to configure the app icons and splash screens (for iOS & UWP not Android) is platform specific project as the implementation for each platforms differs.

iOS Project

The Project created by Xamarin Forms projects template in Visual Studio automatically adds icon and splash-screen images, which looks like the following when we execute the application without any change:

1462016iPhoneDefault

The file which contains all the information about iOS application configuration is Info.plist and the section Universal Icons contains all the information about icons and splash screen.

There are two ways to change the icons and splash screen of iOS application:

First Way

  1. Copy the icons and splash screen images of the same size and resolution as per the default icons and splash screen images provided by project template, present in Resources folder.
  2. Delete default icons and splash screen and rename your icons and splash screen images same as the default ones.
  3. Remove LaunchScreen written in Launch Storyboard option of Universal Icons section in Info.plist.

    Launch Storyboard

Second Way

  1. Create a new Asset Catalog by right clicking on Asset Catalogs and selecting option Add Asset Catalog from the popup menu.

    Add Asset CatalogAdd Media

  2. Add the Icons images as per the sizes mentioned in the AppIcons section.

    Add Images 2 Media

  3. Copy the splash screen images of same size and resolution as per the Xamarin splash screen images present in Resources folder (I am unable to figure out yet why it doesn’t take the splash screen images from LaunchImages section of Asset Catalog ?? ) .
  4. Repeat step 2 & 3 from the above mentioned steps.

This is how the icon and splash screen of my application looked after I updated them:

iPhone Updated

Android Project

Similar to iOS project, the Project created by Xamarin Forms template in Visual Studio automatically adds icon images, which looks like following when we execute the application without any change:

Android Default

Follow these steps in order to change the default icon image to your application icon:

  • Copy the icon images of same size of icon.png in all the drawable folders (namely drawable, drawable-hdpi, drawable-xhdpi).
  • Include the images in your project and make sure that the Build Action Property of the image is set to AndroidResource.
  • Build the application so that the newly added icon image comes in Application Icon dropdown.
  • Open project properties by right clicking on project file and selecting properties option from the popup menu and select the icon in Application Icon dropdown of Android Manifest section.

    Android Manifest

  • Change the Icon attribute of MainActivity class in MainActivity.cs.

    MainActivity

This is how the icon of my application looked after I updated it:

Android Updated

UWP Project

Here also, the project template adds the default icon and splash screen but they are cross (UWP Crossed) images not Xamarin logo icons. Another thing to notice here is that the default name of all the UWP applications given by Visual Studio is FPCL.WIndows, that’s why the application icon will look like the following when you execute it without any change.

UWP Default

It’s easiest to change icon and splash screen images in UWP project than Android or iOS project, you just have to add the images as per given sizes in Visual Assets tab of Package.appxmanifest file. Also, you can change the name of the application by changing the Display Name property in Application Tab of Package.appxmanifest file.

This is how the icon and splash screen of my application looked after I updated them:

UWP Updated

There are many online tools to create iOS & Android icons from a single image, the one I used for this post example is MakeAppIcon. Unfortunately, there is no such tool for UWP project so I has to make the images myself, if anyone knows any tool, please suggest via comment.

The example code of this article can be found at GitHub. Let me know if I has missed anything or have any suggestions.

Happy coding! 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Hi There, I am an IT professional with 14 years of experience in architecting, designing and building IT solutions for complex business needs in form of mobile & web applications using Microsoft technologies. Currently working in an multinational company in India as Solutions Architect. The articles here are sourced from my blog : http://techierathore.com/

Comments and Discussions

 
QuestionAssets Pin
mrrcomp14-Feb-20 3:05
Membermrrcomp14-Feb-20 3:05 
QuestionApp Icon drop down not populating with image Pin
JP Hochbaum19-Apr-17 6:57
MemberJP Hochbaum19-Apr-17 6:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.