designing android using droiddraw

10
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.

Upload: paulo5

Post on 01-Dec-2014

168 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Designing Android Using Droiddraw

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.

Page 2: Designing Android Using Droiddraw

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.

Page 3: Designing Android Using Droiddraw

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.

Page 4: Designing Android Using Droiddraw

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

Page 5: Designing Android Using Droiddraw

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)

Page 6: Designing Android Using Droiddraw

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.

Page 7: Designing Android Using Droiddraw

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.

Page 8: Designing Android Using Droiddraw

CS 344 (Advace Programming Techniques)

Activity 1

IPRT (2011) Page 8

12. Run the android application.

Page 9: Designing Android Using Droiddraw

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;

Page 10: Designing Android Using Droiddraw

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.