designing android using droiddraw
TRANSCRIPT
CS 344 (Advace Programming Techniques)
Activity 1
IPRT (2011) Page 1
Designing Android using Droiddraw.
Objectives
To have knowledge regarding the different widgets used in android.
To design an android user interface using droiddraw.
To appreciate the importance of a good user interface for mobile application.
In this lesson, you will learn to design android’s UI using droiddraw. Droiddraw is an open source
software that has a “drag and drop” capabilities for making an effective UI for android.
Droiddraw interface.
There are diiferent widgets used in developing an Android application. Here are some of the basic
widgets used:
1. EditText(android’s term for textbox)
2. Button
3. Textview (android’s term for label)
The Widgets tab - Used
for adding widgets such
as buttons, edittext,
textview, etc.
The Properties tab –
used to change the
properties of widgets. The workspace.
CS 344 (Advace Programming Techniques)
Activity 1
IPRT (2011) Page 2
4. Checkbox
5. Radiobutton
This lesson only covers the first three widgets mentioned above.
1. Open Droiddraw.Drag a TextView, Button, and an Edittext on the workspace in the same fashion as
shown below.
2. Doubleclick the textview you have dragged on the android workspace. It will then automatically show
the properties for that widget.
CS 344 (Advace Programming Techniques)
Activity 1
IPRT (2011) Page 3
3. Still on the properties tab of the textview widget, change the value of Id (The Id uniquely identifies
your widget from the other widgets present on your application. Thefrom @+id/widget29 (widget29
may have a different value on your screen) to @+id/tv1.
Note:
It is important to remember that the “@+id “ part is not changed.
Your screen should now look like this:
Double click
After making the changes, click apply.
CS 344 (Advace Programming Techniques)
Activity 1
IPRT (2011) Page 4
4. Do the same step on the EditText and Button. The Id for Edittext is et1 while for Button is btn1.
5. Generate the xml code of the UI you have designed by clicking the generate button.
6. Open Eclipse IDE.
Create a new Android project.
Project name: FirstActivity
Application name: MyApp
Package name: com.myapp.android
Create Activity: main
7. Open main.java on the FirstActivity project.
Xml code
Generate
button
CS 344 (Advace Programming Techniques)
Activity 1
IPRT (2011) Page 5
8. Add the following codes.
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
The code above tells android that you are importing the Button, EditText and TextView widgets on your
application.
Button btn = (Button)findViewById(R.id.btn1);
EditText et1 = (EditText)findViewById(R.id.et1);
TextView tv1 = (TextView)findViewById(R.id.tv1);
The code above will bind the xml code created earlier to the java code.
9. Open main.xml from the FirstActivity Project. (res\layout\main.xml)
CS 344 (Advace Programming Techniques)
Activity 1
IPRT (2011) Page 6
10. Delete everything that is on the main.xml and copy and paste the code that you have generated
from droiddraw from step 5.
11. Do the changes on main.java.
The main.xml tab should be
selected.
CS 344 (Advace Programming Techniques)
Activity 1
IPRT (2011) Page 7
import android.view.View;
The code above imports view object which handles the button click.
final EditText et1 = (EditText)findViewById(R.id.et1);
final TextView tv1 = (TextView)findViewById(R.id.tv1);
The code above sets the two widgets to final. Meaning that the value for that object cannot change.
btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//some code
}
});
The code above adds a button listener to the btn object which handles the event that will happen when
the button is clicked.
String str = et1.getText().toString();
The code above creates a new String object named str. It retrieves the value of the edittext(et1) object
using the method getText() and converts it to String using the toString() method.
tv1.setText(str);
The code above sets the text of the textview object(tv1). The value of str is used.
CS 344 (Advace Programming Techniques)
Activity 1
IPRT (2011) Page 8
12. Run the android application.
CS 344 (Advace Programming Techniques)
Activity 1
IPRT (2011) Page 9
Additional Tips. Creating a single actionlistener for multiple buttons.
1. Create a new android application that is the same as below. The id of the three buttons are btn1,btn2
and btn3 respectively. The textview’s id is tv1.
package com.myapp.android;
import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.TextView;
import android.view.View;
import android.view.View.OnClickListener;
public class main extends Activity implements OnClickListener {
/** Called when the activity is first created. */
TextView tv1;
CS 344 (Advace Programming Techniques)
Activity 1
IPRT (2011) Page 10
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tv1 = (TextView)findViewById(R.id.tv1);
Button btn1 = (Button)findViewById(R.id.btn1);
Button btn2 = (Button)findViewById(R.id.btn2);
Button btn3 = (Button)findViewById(R.id.btn3);
btn1.setOnClickListener(this);
btn2.setOnClickListener(this);
btn3.setOnClickListener(this);
}
public void onClick(View v){
if(v.getId()==R.id.btn1){
tv1.setText("button 1 clicked");
}
else if(v.getId()==R.id.btn2){
tv1.setText("button 2 clicked");
}
else if(v.getId()==R.id.btn3){
tv1.setText("button 3 clicked");
}
}
}
Activity 1
Create a program that has the same user interface as a Calculator. It should have the +,-, *and /
functions. (To be submitted next meeting (December 1, 2011). Source code and screen shot of ouput.
DO NOT SHARE CODES. I will NOT ACCEPT COPIED assignments.
As you can see in the code above. There is only one onClickListener used to handle
button clicks.