301 – Quikies – Icon strategy

I’ve seen more than a few people ask “How should I deal with my icons and images in a cross-platform way?”. Well… There are a lot of strategies depending on need, and end goal. Is the image going to be a 2500×2500 Canon RAW customer portrait that you’re editing as their wedding image – Or are we talking about 48×48 .png icons for the tool bar?

By far most times we’re just talking about the icon images scattered around the app. A gear icon to indicate “settings”, or an arrow to mean “up one level”. Etc.

Each platform has its own required location.
• Droid | Resources | Drawable {sub folders for resolution specific versions}
• iOS | Resources {everything dumped into one folder}
What I do is keep the actual .png in a folder in the PCL, then add a link to the file in each of the platform projects. Not duplicates of the image, but a link. What I like about this is that I only have to replace an icon image in one place. If I replace the charging.png icon because the boss said “I don’t like the electric plug. Make it a lightning bolt”, I don’t have to be sure to change the image in 4 different platform-project folders. It helps if you name icons/images by purpose instead of description. submit.png not green_led_48x48.png – that way when the submit icon needs to change to something else it is still the submit purpose even if it is now a red triangle instead of a green circle.

In the PCL

Make a folder for your art/icon and put the real image in it.
Select it. In the properties pallet set it as: Content & Do not copy

In the Platform project (Android)

Add an Existing Item.

Navigate to the real item you put in the PCL folder.
Choose the Drop down so you can
Add as link

Select it. In the properties pallet set it as: AndroidResource & Do no copy

Notice the difference in the icons. The little blue bit tells you this is a link to the real image.

Device resolution specific versions

Purists will be mad at me for this but… I don’t do icons for high, medium and low screen densities in 90% of my stuff. Meaning I don’t have to deal with the @2x, or -xxhdpi versions. Call me lazy but a settings gear icon really just doesn’t make that big of a difference. If you have an image/icon where it does make a difference to you or your client, then you’ll need to put the right resolution in the right folder with the right name and manage them individually.

FAQ (Frequently Asked Questions)

I notice a fair number of questions that get asked over and over. You’d almost think nobody checks to see if someone else has already asked before them. This page will get updated regularly.

Last updated: 24dec2016

  1. Why doesn’t my code format right on Xamarin Forums?
    1. The Xamarin forum does a pretty decent job of trying to guess that your text is actually pasted in code. But if you don’t tell it that a given block is meant to be code, then it’s still guessing. Xamarin Forums uses markdown for adding tags and such to comments/posts. You will see a link to an article on markdown on the Xamarin Forms page where you are making the comment. But I find this one to be more complete.
    2. When you are entering code, tag it as such with three backticks (on the tilde key) on a line by itself above your code, and again below your code. Optionally including the coding language name
  2. iOS Remote Simulator for Windows
    1. As of late 2016 the remote simulator requires an Enterprise license of VS2015. So if you’re used to this working in your Community Edition of Visual Studio and now doesn’t, that’s probably why. There are several alternatives. The simplest (and yes, free) is to just run the simulator on your Mac and remote into the Mac with VNC or some other remote viewing/controlling software. There’s plenty of article on how to remotely access your Mac from Windows such as this one.
    2. UPDATE. As of December 2017 the iOS remote Simulator is available to all versions of Visual Studio 2017.
    3. iOS remote simulator is not part of the Visual Studio installer. It is its own package you download from Xamarin. This package is still in development and updates now and again and you don’t get notices of it updating through Visual Studio, so check the Xamarin page maybe once a month.
    4. Once you’ve installed it (and restarted Visual Studio) you still need to turn it on. Tools | Options | Xamarin | iOS Settings then check the box.
    5. More details about the options such as mocking the GPS location can be found on the Xamarin site.