Android Competency Center

Droiddraw is a very good tool available to design the android screen layout files.
Let explore the tools in the today’s post.

The tools can be used directory through the browser. Here is the link for Online Droiddraw tool.

The tool can also be download from the above page, but it provide link for version r1b11. If you want to download version r1b12 get it from here .

Here is the tool image

The tool provides the android device screen, where user can design the application screens.
An option to change the device screen size is provide which shows all the screen sizes supported by the android device. There are also options to change the basic root layout of the activity xml.

The tool provides support for android basic Widgets like basic button, checkbox, RadioButtons etc. The tool also provides support advanced widgets like Calendar, Clock, TimePicker, ProgressBar, Gallery etc.The widgets can be added on the device screen by dragging and dropping them on the screen.

The layout tab provides android supported layouts like AbsoluteLayout, FrameLayout, LinearLayout etc.
The layouts can also be added on the device screen. The layout can contain other layouts out widgets.

The property tab shows configurable properties of the selected screen component (widget or layout).  Eg. Let’s add an EditText to the screen which can take only integer values (like age).

Drag the EditText widget from Widget tab and drop it on the screen view.
Adjust the position and size of the edit text as required.
Go to the Properties tab set the Id property as ‘@+id/ageEditText’
Keep Text property empty. Set the Number Format as integer.
Click Apply to set the properties.
Click on the Generate button.

Here is the xml generated for above EditText

<EditText
android:id="@+id/textEditText"
android:layout_width="320px"
android:layout_height="wrap_content"
android:text="EditText"
android:textSize="18sp"
android:layout_x="0px"
android:layout_y="2px"
>
</EditText>

Another tab is the Strings tab. The tab allows the user to define the string that can be referred in the application using resource class(R). The string goes in the res/values/string.xml file. String can be used for android:text property as @string/<string name>. It’s a good practice to use string instead of hard coded string values wherever possible. Android document suggest externalizing string as feature like localization and internationalization will be developed around them.  You can also load string in droiddraw if you have string.xml already defined. Go to the Project menu click on Load string resources and select the string xml from file system. The string from the xml will be loaded and shown in the string tab.

The next tabs are colors and arrays, which provide facility to define colors and array values respective. The color values goes in the res/values/colors.xml. And array values are stored in the res/values/arrays.xml.

As you can see using tool like Droiddraw you will never have to write the layout xml file by hand again.

Android Tools activity layout, Android Tools, externalise strings, layout.xml, resources, string.xml

Android Hierarchy viewer is added in 0.9 SDK. The Hierarchy Viewer tool allows you to optimize your user interface. It provides a visual representation of your layout’s hierarchy of Views and a pixel view of the current display.

To start the hierarchy View first start an emulator instance and then run hierarchyviewer.exe from android SDK tools/ directory.

The Hierarchy View will be started as shown:

The devices list on the left shows the currently running devices (or emulators). And on the right the list of currently active windows is displayed of the selected device.

To see the window’s View hierarchy select that window and click on the Load view hierarchy.

The view hierarchy view shows the windows view and viewgroups as a hierarchy, depending on parent child relationship. The window’s wire frame view is also shown on the right side.

On selecting any view the property window shows the properties of that view. The property values are not editable. Clicking on the display view shows the selected element.

The Invalidate and Request Layout buttons executes the invalidate() and requestLayout() methods of the selected view. If you are running the application in debug mode, you can debug the view functionality with the help of these buttons.

To refresh the view hierarchy to reflect the changes as per the device current stage, ‘Load View Hierarchy’ can be used.

The hierarchy viewer tool also provides a Pixel Perfect view for the window. You can switch to the Pixel Perfect view by clicking on the second button at the bottom left corner.

Pixel Perfect View:

The pixel perfect view shows following 3 views:

Explorer View: It shows the view hierarchy as a list (left hand side view)

Normal View: View of the device window (middle view)

Loupe View: A magnified, pixel-grid view of the device window, on the right.

The normal and Loupe view refreshes after sometime to show the current device window.

A very useful feature is that you can overlay an image on top of the normal and Loupe Views. Support you have an already designed screen layout as an image. You can overlay that image on the device window by clicking on the Load button and selecting the file from file system. You can adjust the opacity of the image and match your screen components with the image to check whether they match.

So the hierarchy viewer is really useful to design the application screens (views) and debug the application.

Android Tools Android Tools, Hierarchy Viewer