You are on page 1of 10

CS 344 (Advace Programming Techniques)

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

CS 344 (Advace Programming Techniques)


Activity 1 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.

IPRT (2011)

Page 2

CS 344 (Advace Programming Techniques)


Activity 1

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:

After making the changes, click apply.

IPRT (2011)

Page 3

CS 344 (Advace Programming Techniques)


Activity 1 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.

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

CS 344 (Advace Programming Techniques)


Activity 1 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)

IPRT (2011)

Page 5

CS 344 (Advace Programming Techniques)


Activity 1

The main.xml tab should be selected.

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

CS 344 (Advace Programming Techniques)


Activity 1

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

CS 344 (Advace Programming Techniques)


Activity 1

12. Run the android application.

IPRT (2011)

Page 8

CS 344 (Advace Programming Techniques)


Activity 1 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 textviews id is tv1.

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

CS 344 (Advace Programming Techniques)


Activity 1
@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"); } } }

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

You might also like