Android Development 101 – Part 5:DroidDraw & Information Tracker Completed

In this tutorial we are going to cover completing the Information Tracker using DroidDraw to design the layout of this project. This will give you insight into an alternative to the stock layout manager in the eclipse environment and how DroidDraw functions. DroidDraw can be your best friend when designing Android applications or your worse enemy if you don’t know the layout of the application and how it works. This will show you the basics to this program and how to incorporate it into your development process.  This is significantly easier than the previous post but will teach skills on other programs to help development such as DroidDraw.We will start out by downloading DroidDraw and starting it up using the downloaded.exe after extracting the files. After the program is up the interface is pretty straight forward. The left side of the program is the device screen and what it will look like when we run the application. The right hand side of the application gives you the objects you can place on the screen on the top half as well as displaying the generated code for you on the bottom half. This is a very unique program because you can not only choose to generate code into the bottom half of the right screen but also paste code and generate a layout of what your program already looks like to enhance it further.  The pictures below will give you an idea of the layout so the paragraph below is a bit easier:

First we are going to change the absolute layout on the screen to a ScrollView. To do this we navigate to the top left of the program to the drop down menu that saysRootLayout and change it to ScrollView. Then we are going to add a LinearLayout to the screen by navigating to the top right of the program where the tabs are and clickLayouts. Drag the one titled LinearLayout to the screen on the left and drop it there. Now while it is still selcted, go to the tab on the right called Properties and click it. We are changing the width and height of the LinearLayout to fill_parent and then clickingApply to make the change. Going back to the Layouts screen we are going to selectTableLayout and drop it into the LinearLayout then go to the Properties and change it to fill_parent on both height and width.

Now that we have the layouts sorted out, we are going to start dropping widgets onto the screen to make the interface more interactive. To start out with we need a label that will ask for a number. Drag and drop a TextView from the widget tab to the screen then go to properties and change the width to fill_parent and the text to Number:. Now we need to add a TextBox (a.k.a. EditText) under the label so we drag it from the widgets to the screen and change the properties for width to fill_parent, the text to a blank field and the id to @+id/NumRewards. Then we are adding another Label, using fill_parentfor width and changing the text to Date: and applying the changes. Now we add aDatePicker right under the label and change the id to @+id/Date and apply the changes. Now we need a button to be able to pull information out of our form when it is pressed, so drag a button over and change the id to @+id/Add and the text to Add then click Apply. At this point we have to add 2 more labels and 2 more textboxes so I will let you complete this and give you the information to change on them. The first label’s text will need to change to say Numbers For This Month: and the first TextBox variables that need to change is the id goes to @+id/RewardsMonthly. The second label will need to say Numbers To Date: and the ID of the second textbox will need to change to @+id/RewardsTD. The code will be given below if something goes wrong but playing around with the interface of DroidDraw is the best way to learn the fastest way to produce an interface with it.

Now that our interface has been laid out we need to generate it using the button at the top of the program entitled Generate. This will fill the bottom right of the screen that you can copy and paste into the main.xml file. When pasting code into the xml file you will notice in the screenshot above that my textboxes below the button are greyed out. This is accomplished by adding android:enabled=”false” befor the closing > in the EditText nodes. This will allow you to display info and not let anyone change it. Here is the code generated from DroidDraw without the enabled feature added in:

Read this full article at.

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: