Best practices while asking graphics teams to design Android application UI

Question

I am not sure whether this is possible in Android which supports multiple form factors on various devices. This is one of the most painful scenarios which we usually face.

Scenario: A design team creates UI graphics for the application with all the UI widgets with their position pre-defined like buttons, edittext and so on. This is the UI which we need to use in our application.

Problem: There is no way to link UI widgets, for instance a submit button over the actual position of submit on the image. Is there a way to link them? And will it work on all form factors?

Current solution: Recreate the entire UI with all its component from scratch using layouts.

As I know in iOS, one can actually put the widget over the top with transparent background and it works out of the box. This is possible as you can play with absolute values of x and y.

--EDIT--

I guess it was not so clear from the above description. The issue is not which Android layout to use as that essentially means creating the layout from scratch using components using either LinearLayout or RelativeLayout.

The real issue is when we are receiving a UI design from designers who know nothing about Android or its platform apart from the standard screen resolution say 480X800, what should be our advise to them? Something like give me a design with all the components as layers which can then be extracted and used in Android layout from scratch.

Answer 1

Ok, now with the clarification on your question, maybe I can share some experiences.

Little story: I sent our designer to the Android UI Guidelines (http://developer.android.com/guide/practices/ui_guidelines/index.html) but he either didn't had the time to read it or he didn't care about it! Ha ha ha! Man... we had a hard time with the first App because of that!

It is true that at the Android Web Site there is a lot of information about how to do the design, but is scattered all over the place (a way to find information, that maybe only we, the Developers are used to right?).

So here are my suggestions, based on what I've got from the Android Web site and experience:

1. Make a Story Board of the App to define the basic look, where the UI controls will be, etc.
2. Because an App needs a good launcher icon, first send to your designer the Templates for Icons on the Android Web site (http://developer.android.com/shareables/icon_templates-v4.0.zip)
3. Sit down with the Designer (or do a Skype meeting) and make sure him/her understands all about densities, ldpi, mdpi, hdpi, and xhdpi and the difference between PIXELS and DPIs. Make sure he/she understands that very well to avoid future problems. (See http://developer.android.com/guide/practices/screens_support.html)
4. Ask them to work with Vectors, because you will need 3 different sizes for every resource.
5. Explain them the naming conventions and folder structure. Ask them to name the files using the ic_ prefixes and to save things on its appropriate place. They can use Photoshop features such as automated tasks to save the resources in different sizes on the right folder, then send you a zip file with the resources.
6. The guidelines recommend designers to work with mdpi resources first, an then get other sizes to test.
7. Ask your designer to create a "Functional Prototype" of the App. If he/she worked on Photoshop, there are ways to use Dreamweaver to export the design to an actual web site you can browse and go through the Activities. And you can have a download page to download the complete set of
   up to date resources on their correspondent folders as a zip.
8. Tell them that Android uses styles and themes that are similar to CSS, and that you will need colors in HEX. Ask for a document with the colors for gradients, etc (you can use EyeDropper on Chrome or CollorZilla on Firefox to extract them from the Functional Prototype too).
9. Create a lot of different devices on the emulator with different screen densities and sizes.

Finally, there is no "magic formula"... sending emails or even examples won't work sometimes... the best thing you can do is to dedicate some time to get on the same page with your Designer, that investment of time will repay itself very quickly.

What I've mentioned here has worked for us, and believe me... I've changed the whole look and feel of the App and it looks really nice and let's say that 99% like the design itself.

Good luck (and patience)!

Answer 2

I feel you. However when we need to understand and probably appreciate that iOS is available in only so many screen sizes. Android on the other hand is not. When designing for the android, it is imperative that we do not make any assumptions about the pixel sizes otherwise life is going to get more complicated. It is best to remain size agnostic, use relative sizes. It is similar to the process of designing html pages which can be displayed in any size.

Answer 3

Also, show them how .9.png images work and how they can create those images. It saves you a lot of time, if you don't have to create the images yourself. Additionally, designers tend to be much more creative with the possibilities of 9 patches.