A Designers Guide for naming Android Assets

This article is mainly intended for Curious Designers and it will also help newbie developers but experienced developers may already know what I am writing here. This piece will give you insight over how Android OS picks the beautiful and creative assets designers have created for their apps.

The main aim of this article is to bridge the gap between developers and designers, because designers have their own way of working i.e. naming the files, putting assets in folders etc, while developer may require it in a different manner then what the designers are following

Way Android uses your piece of work :

-> With varied screen size and densities Android support a large number of devices so android assets are created in various density variants.

-> And designers majorly create xxxhdpi (yet to evolve), xxhdpi, xhdpi, hdpi, mdpi, ldpi (obsolete now) variants of their assets.

Lets see by an example how Android picks all these assets for different densities -

1. We have a Contacts Screen with Add icon on it to add contacts, the asset created by designer for add icon is named as add_icon.png with variations in all densities.
2. Now the developer will put these variants in following folder and the correct add_icon.png would be picked up by Android System, the folders are as follows

drawable-xxhdpi folder containing — xxhdpi variant of add_icon.png

drawable-xhdpi folder containing — xhdpi variant of add_icon.png

drawable-hdpi folder containing — hdpi variant of add_icon.png

drawable-mdpi folder containing — mdpi variant of add_icon.png

drawable-ldpi folder containing — ldpi variant of add_icon.png

Drawable folders for assets in an app (ldpi is obsolete and not used nowadays)

Suppose if you forgot to name it add_icon.png in all densities, or you were also creating these assets for iPhone so named those as add_icon.png, add_icon@2x.png, add_icon@3x.png and so on, so for correct use on Android it must be renamed as add_icon.png in all variants i.e. the name should be exactly same for all variants of an asset.

So developer must rename it to add_icon.png in all variants, but the lazy developer was least bothered and put the complete assets in their folder without caring that you named it differently on different densities. Now when Android will require add_icon.png the system will scale the single add_icon.png and show it on all the phones. The sad part with this is that your beautiful design is no more beautiful on every device, it will look pixelated on many devices.

So what can save you from this trouble? So lets learn the naming convention and name assets according to the Android requirements.

Make different folder for different densities and place different versions of add_icon.png with named as “add_icon.png” in all density folders

Rules to adhere while naming Android Assets

You can decide your own naming pattern for your app, but you must keep in mind following things

1. Valid charset is for naming resources is [a-z, _, 0–9] i.e. All small case characters, numbers, and underscore.
2. First letter of your asset name can be either _ or a small case character, it cannot be a number.
3. Do not use capitals letters not even in extensions like .PNG or .JPG
4. Use _ as separator wherever you want to differentiate two words because -(hyphen) and space are not allowed
5. Asset names should be unique across the screens for an app. If you have two add buttons with different dimensions then you cannot name both as add_icon.png, you may create two different icons like add_icon_small.png and add_icon_big.png with all their density variants.

Tip

• Set a naming convention for your design team and everyone should follow the same naming convention.

A good naming convention will look something like.

ic — as prefix for all icons

bg — as prefix for all background

selected — as suffix for selected state

pressed — as suffix for pressed state and so on..

Examples

ic_asset_name

ic_asset_name_pressed

ic_asset_name_selected

ic_asset_name_disabled

ic_asset_name_activated

bg_splash

Let Developers do the following task

1. The images you are cutting is just rotation of one the image you already cut and dimension for both are same, then wait don’t be a hard worker here let your developer do some stuff, ask him/her to rotate it via code. So if you have > as icon and want < as icon developer will do it.
2. App contains some flat color (no gradient with single color) icons and you want these in different colors, let developer do it for you and grab a coffee meanwhile.
3. You have some gradient images too. Don’t worry unless they are basic shapes like Oval, rectangle, rounded-rectangle, square they can do it just give them the color codes, and yes they can make radial, linear and circular gradients as well.
4. They can also create bordered buttons, basic shadows. Also force them to use nine-patches, patterns then flat assets.

Few more tips

• Give hex code than rgb values for colors.
• Create one folder for an app and in that folder create all density folders which you are supporting, and then every team member should place their cutouts in those folders. So if someone has already made a file add.png then everyone will get a replace warning if they tried to make add.png again.