Android development - Working With A Designer

By Prakhar Srivastava

Image: https://dribbble.com/shots/3437005-Designer-vs-Developer-Rebound-challenge

I have worked with developers who were struck for the release just because they didn’t have an icon, email icon. Can you believe it, an email icon in 4 sizes, that’s all was needed for the project to release a build.

So in this lesson, we’ll see how to reduce the work of designers and hence playing nice to them (winks!).

1. Ask for icons in only one size and any color.

Always ask for the icons in only size. The perfect size would be 128 X 128. But we have to keep the icons in 4 sizes in four different drawable directories. This is where you get to see the cooler side of android studio. You can create sharp different sized drawables in any color using the image-asset tool.

Right click on drawable folder and new image asset.

drawable(right click) > new > Image Asset

In the next window, choose the type of icon you want. For all the tabsand drawable_left/right icons, the ActionBar & Tab Icons works perfectly.

Choose asset type image and color as custom. The designer will give you the color code and you can generate the icon in that color.

Same thing for launcher and notification icons.

You got it working. See easy.. only one size and the color code.. remember.

2. Avoid asking for color codes

Don’t ask for color codes. If you have the screen designs, you can extract every color out of it.

Download the software getcolor for free and use the eye dropper tool anywhere on screen (not only on mages but absolutely anywhere).

Download it here

3. Fonts and spacing

Stop asking for the .ttf or .otf files for font, if the font is free.

We can find it on our own. Just type the name of the font and append ttf/font download. The designer does the same thing and finds the font.

Also, the fonts can be identified from an image on the websites like what font is, but they are not very reliable. So the font name should be mentioned by the designers.

image source: https://helpx.adobe.com/indesign/how-to/adjust-letter-spacing.html

In the above image, we can see how the spacing impacts the design and how significant it is.

A lot of developers do everything right but miss the letter-spacing. The colors are perfect, font type and size are perfect, icons are perfect. But when the psd and the xml design are matched, they don’t look same. The reason is letter-spacing, that the designer knew is important and we developers chose to ignore. The letter spacing can be added in android with a line in 

xmlandroid:letterSpacing="YOUR_VALUE sp"

Also, one should take care of the shadows. The elevations and shadows adds a lot in the beautification of the design. In android, the shadows and elevation can be defined by adding one line in the

xmlandroid:elevation="YOUR_VALUE dp"

This is how designer and developers together can deliver a great product. Share the responsibilities.

These are a few of the time-saving hacks for designers as well as developers for android. There are a lot more tricks, that I will cover in upcoming blogs. But these are the easiest and most needed, so make sure you get them right.