Professional Documents
Culture Documents
Activity 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 androids 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. 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.
There are diiferent widgets used in developing an Android application. Here are some of the basic widgets used: 1. EditText(androids term for textbox) 2. Button 3. Textview (androids term for label) IPRT (2011) Page 1
2. Doubleclick the textview you have dragged on the android workspace. It will then automatically show the properties for that widget.
IPRT (2011)
Page 2
Double click
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:
IPRT (2011)
Page 3
Xml code
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.
IPRT (2011)
Page 4
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)
IPRT (2011)
Page 5
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.
IPRT (2011)
Page 6
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. IPRT (2011) Page 7
IPRT (2011)
Page 8
package com.myapp.android; import import import import import import android.app.Activity; android.os.Bundle; android.widget.Button; android.widget.TextView; android.view.View; android.view.View.OnClickListener;
public class main extends Activity implements OnClickListener { /** Called when the activity is first created. */ TextView tv1;
IPRT (2011)
Page 9
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"); } } }
As you can see in the code above. There is only one onClickListener used to handle button clicks.
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.
IPRT (2011)
Page 10