DroidDraw

DroidDraw is a tool which helps in designing the screen layout files for Android applications. The tool can be downloaded from this link. http://www.droiddraw.org/

DroidDraw a User Interfaces designer/editor for Android written in Java. The tool looks like as shown below.

In 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 o 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.



In 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.

In the lower right side we can see the output of our creation. Here, we can generate the XML code from the UI we have create in the left side. In other hand, we can write our own XML code and loaded it to the Screen. This is a good way of testing the XML parameters to get familiar to them.

We are going to use the most important ones (in my point of view). Lets have a look at them.

Widgets Tag:

In 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 of which “Root Layout” we are using. For example, if we are using “LinearLayout”, it will be placed in the top side of the screen. On the other hand if we are using "AbsoluteLayout" we can place it wherever we want.

Layout Tag:

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 too much more layouts inside, so we can create more complex structures.

Properties Tag:

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. Its very intuitive, we just have to change values in the InputBox. You can play with values to see how they affect to the layouts and the elements in the Screen. One we have change something and want to see it on the screen, just press the Apply button.

String Tag:

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 create before.