How to Create Your UI Using DroidDraw

Now the we know more about the components of an Android Application let me introduce you to a new element we can work with: DroidDraw.

http://www.droiddraw.org/

This is a User Interface designer/editor for Android written in Java. With this application (we can work on-line or on our desktop). We can also download it for Linux, Mac or Windows.

Once we have it on our desktop, it's time to have a look at it.

On the left side we can see a rectangle area, like our phone screen. This is the place where we are going to “draw” our UI. Above this screen we can see two values:

Root Layout -> Here we can set which is going to be the root layout of our UI. It can be a LinearLayout, AbsoluteLayout, RelativeLayout, ScrollView or TableLayout. So this is our first container of elements we are going to use.

Screen Size -> Here we can choose the size of our screen, as if we had different kinds of mobile phones and different screen sizes.

On the right side, we have, now, lots of widgets, that’s because we are on the “widgets” tab. We can see the names of the others tabs.

• Layouts
• Properties
• Strings
• Colors
• Arrays
• Support.

On the lower right side we can see the output of our creation. Here, we can generate the XML code from the UI we have created on the left side. On the other hand, we could write our own XML code and load it to the screen. This is a good way of testing the XML parameters to get familiar with them.

We are going to use the most important ones (in my opinion). Let's have a look at them.

On this tab we can find most of the widgets we can use with an Application -- Buttons, Checkboxes, RadioButtons, Images, Galleries…

To use them, just drag one of the elements and drop it on the left side of the screen. The element will be placed, depending on which “Root Layout” we are using. For example, if we are using “LinearLayout” It will be placed on the top side of the screen. On the other hand if we are using "AbsoluteLayout" we can place it wherever we want. To learn more about layouts, please visit this article:

How-To Create User Interfaces (UI) Using XML: Layouts

This tag is simple, we just have the Layouts (containers) and we can place them inside the screen. In this way, a Layout can hold more layouts inside it, so we can create more complex structures.

Depending on which element we have selected on the left screen, the Properties screen will change. Here we can see and edit the parameters of each element. It's very intuitive, we just have to change values in the InputBox. You can play with values to see how they affect the layouts and the elements on the screen. One we have changed something and want to see it on the screen, just press the Apply button.

In this tag we can add Strings. This strings can be used in our UI. We can reference them from other parts of the application. Instead of writing them manually we just made reference to a String we have created before.

This application has more features, if you want to know more about it, visit the web page, there you will find tutorials and much more. If you find any bugs in it, please contact the author (you will find his email address on the webpage).