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.

2 thoughts on “301 – Quikies – Icon strategy

    • Hi. Nice to see someone would like to see more. Hurricane Irma hit my place fairly hard so I’ve spent a lot of time on storm clean-up and repair.

      Despite having about 50 visitors a day, and about 200 page-views a day, the site has zero people following it. So honestly I didn’t think it was striking a chord with people. I really wasn’t sure I would even continue: There didn’t seem to be much point if nobody liked the series enough to follow it.

      Your post has given me a much needed boost to my morale. Thank you for that! I have a bit of an idea on where to take it from here. I’ll probably outline some key points over the next few days then get started on something.


Comments are closed.