Android: how to properly design user interface

I use Eclipse for my Android apps. When I create a layout I 开发者_运维知识库go directly in writing XML code because I don't like how Graphical Layout represents items (for example I cannot see ListViews). Is there a way to make Eclipse working better or is there a third-party tool that helps in designing better UI?

The graphical layout editor is very much a work in progress and has improved considerably in the latest SDK Tools iteration. Make sure you have updated to the latest tools that were released with the 3.0SDK. Secondly, it would be difficult to fully represent views that are backed by Adapters like ListView. The layout editor would have to have access to the data that you are using to fill the child views with. If you are pulling data from the network or from a a database, then rendering views on the fly in a layout editor becomes very complex. Static views are displayed fine, it's only AdapterView or Custom View components that have issues. IMO the emulator or a real device is the best way to gauge UI usability and looks.

DroidDraw is the best third party tool I know of but it isn't perfect. Most of the time I end up having to tweak the XML after I start something with DroidDraw.

Eclipse tools have become better but still not good enough. And you cannot see views backed by data. I use this app called PicMe http://www.androlib.com/android.application.com-bw-picme-qDnn.aspx to grab a screenshot of my phone and then play around in Photoshop until I am satisfied with the result. Then convert it to a 9-patch and then test again. Clunky but works well.

There is also this PSD which you can use to mock-up layouts: http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/

I would recommend splitting the UI design and implementation into two separate tasks.

Depending on your platform you have a couple of options for the design phase: Mac has Omnigraffle, I've used a cross-platform tool called Pencil in the past. The key word is 'mock-up', there are plenty of other options that can be googled if neither of those work for you. Even straight-up sketches in a notepad are a good place to start. You'll be creating non-functional, wireframe layouts to begin with. The idea is that you can crank them out quickly and experiment with different options until you like what you have.

At this point, you can fire up Eclipse and implement your designs using the layout editor (or just straight xml). With the designs pre-prepared, the actual coding should be relatively mechanical and straight-forward. Tweaking it to match the designs 'just-so' might be a little tricky, but with the simulator running this process has a pretty tight turn-round time.