Android GUI Development

fansbutterflyΚινητά – Ασύρματες Τεχνολογίες

19 Ιουλ 2012 (πριν από 5 χρόνια και 4 μήνες)

312 εμφανίσεις


Android GUI Devlopment

v1.0

Page
1

of
16


sdfasfasdf



Development partner:

Project Team

Marco Pierobon (15)

marco87c@hotmail.it

Michel Hognerud (30)

hognerud@kth.se

Nina Mulkijanyan (24)

ninamu@kth.se

Prajwol Kumar Nakarmi (30)

nakarmi@kth.se

Sharique Javaid (15)

sharique@kth.se

Sujan Dey (15)

sujan@kth.se

Syed Saad Ali (30)

ssali3@kth.se

Venkatesh Change Gowda (24)

vch@kth.se

Project Owners

Niklas Lindhe

niklas@xtecom.com


Project Coach

Hans Eriksson

hansa@me.com



Project Champion

Björn Pehrson

bpehrson@kth.se


Android

GUI Development

Version 1.0

2011
.
01.03


Android GUI Devlopment

v1.0

Page
2

of
16


Revision History

Version

Date

Remark
s

Authors

1.0

2011
-
01
-
03

Document includes guide for:



Android GUI Basics



Advanced GUI features.

S
yed Saad Ali
,

Michel Hognerud
and

Sharique Javaid
























Android GUI Devlopment

v1.0

Page
3

of
16


Table of Contents

Revision History

................................
................................
................................
................................
......

2

1

Introduction

................................
................................
................................
................................
....

4

1.1

Purpose of the document

................................
................................
................................
.......

4

1.2

Sc
ope

................................
................................
................................
................................
.......

4

1.3

Audience

................................
................................
................................
................................
.

4

2

Android GUI Basics

................................
................................
................................
..........................

5

2.1

View Hierarchy

................................
................................
................................
........................

5

2.2

Layout

................................
................................
................................
................................
......

5

2.3

Writing the xml

................................
................................
................................
.......................

5

2.4

ID

................................
................................
................................
................................
.............

7

2.5

Layout Position

................................
................................
................................
........................

7

2.6

UI Events

................................
................................
................................
................................
.

7

3

Guide for implementing interesting features

................................
................................
.................

8

3.1

Moving between activities

................................
................................
................................
......

8

3.2

Tabs feature

................................
................................
................................
............................

8

3.3

Spinners

................................
................................
................................
................................
.

10

3.4

Toast Message

................................
................................
................................
......................

11

3.5

Multi selection Dialogs

................................
................................
................................
..........

11

3.6

Toggle buttons

................................
................................
................................
......................

13

3.7

Option Menu

................................
................................
................................
.........................

13

3.8

Expandable lists

................................
................................
................................
.....................

14

4

Testing device

................................
................................
................................
...............................

15

4.1

Emulator

................................
................................
................................
................................

15

4.2

Android Smartpho
ne

................................
................................
................................
.............

15

5

References

................................
................................
................................
................................
....

16











Android GUI Devlopment

v1.0

Page
4

of
16


1

Introduction

1.1

Purpose of the document

This document educates about the basics of Android GUI development
.
This document
is designed in
a manner that it helps the new android developers to get going on the GUI domain of Android
projects
.

1.2

Scope

The scope of

the document

covers the
GUI
basics;

we talk about the resources currently available
fro
m Google and also some guides for

ad
ding new UI features in Android
.


1.3

Audience

The document is aimed at
new android

developers intending to modify the
Android
application

and
add new features

in the user interface
. The
document provides short tutorials about adding different
features in the android application.



















Android GUI Devlopment

v1.0

Page
5

of
16


2

Android GUI Basics

The
View
and
ViewGroup
objects are used to build the user interface in the Android application. The
View
class contains the subclasses called
widgets
which implement the UI objects like buttons and
text fields. Whereas the

ViewGroup


class
,

is the base for the ‘layouts’ subclas
ses
,

that implement
different layout architectures like linear, relative and tabular

[1]
.

2.1

View Hierarchy

We have to define the hierarchy of activities in android application. It is normally done in a file called
Andro
idMa
nifest.xml.

To attach an activity to a layout we call a method
setContentView()
and reference to the root node
object.
If we move to new activities we

keep on calling this method so new views are l
aid on top of
previous ones. I
t is important to keep track of how many
views are instantiated and they need to be
removed using the
finish()

method

[
1
]
.

2.2

Layout

The mostl
y used way to define a layout is

a XML layout file. XML has a structure much like HTML.
Normally the names of the XML elements are
similar

to the
functionalit
ies

of
Java class. Like
<TextView> in the UI creates a TextView the <LinearLayout> creates a LinearLayout view group.


Normally the xml vocabulary is such that we can guess what class name and attribute names
correspond
to

which xml element

[
2
]
.

2.3

Writing th
e xml

We can very quickly design our layouts using the xml
vocabulary
.
Eclipse

has a
built
-
in

tool for
drawing the layout and we can use external tools like DroidDraw to create our layout.




Android GUI Devlopment

v1.0

Page
6

of
16




We have
a list

of available views on the left side in the xml layout tab. We can select the widgets we
need for our layout like buttons, TextView, EditText and drag them onto the layout and we can
change

their properties by modifying the xml file. We can

m
odify

item
’s

width, height, and other
display properties. If we make change in any of the two
tabs

either layout tab or the xml code
,

the
other tab
updates

automatically accordingly

[
2
]
.


Figure
2

Interface design tool

Figure
1

Working in xml file


Android GUI Devlopment

v1.0

Page
7

of
16


2.4

ID

All View objects have a unique ID associated with it. We use this ID in the code to
refer to

this widget
or object. The ID of all the View objects
is

automatically saved in a
R.java file
. This file
cannot

be
updated manually.


2.5

Layout Position

All the view
s when created have a rectangular space in the layout. Their location defined by the
x

and
y

coordinates, telling the distance from the left and top respectively and
height
and
width
.

The

unit for location and dimensions is pixel.


2.6

UI Events

After adding
the views to the UI layout the user need
s

to interact with them to perform various

actions.
For this we need to do one of the following:



Listen for events we define and event listener and register it with the View. The View class
has a set of nested method
s like View.OnTouchListener and View.OnClickListener.



Override existing call back method for the view. We do this when we have our own View
class but we are listening from some other events that occur within it.















Android GUI Devlopment

v1.0

Page
8

of
16


3

Guide for implementing interes
ting features

3.1

Moving between activities

We have to update
the AndroidMenifest.xml

file when we create a new activity. For example if we
make a new activity class ActivityNew, we add the following code in the AndroidMenifest.xml file:

<activity
android:name=".activities.ActivityNew"></activity>


And in the code we move from activity1 to ActivityNew by adding this code
:


Intent intent = new Intent(activity1.this, ActivityNew.class);

startActivity(intent);


This creates a new activity ActivityNew o
ver an existing activity activity1. We need to keep record of
what activities we have instantiated and we need to get them finished by using the finish method.

3.2

Tabs feature

To add the tab host feature we have to extend the main class with a tab activity

[
4
]
.

For this feature we need three things:



TabHost, which is the main container of the tab view.



Tab
Widget, which

is used to navigate between the tabs.



Frame Layout, for content in the tab.


We need to have
several

files for this feature.



TabHost.java file
,

to contain two tabs.



A file for the first tab content.



A file for the second tab content.



An xml file for tabhost design.

First in the main.java file or separate tab host file
,

add the following code:

setContentView
(R.layout.
main
);


TabHost tabHost = (
TabHost) findViewById(android.R.id.
tabhost
);



TabSpec contactSpec = tabHost.newTabSpec(
"contacts"
).setIndicator(






"Contacts"
,
















getResources().getDrawable(R.drawable.
ic_tab_albums
))




.setContent(
new

Intent(Main.
this
, ContactsTab.
class
))
;


TabSpec conversationSpec =
tabHost.newTabSpec(
"conversation"
)






.setIndicator(








"Conversation"
,


Android GUI Devlopment

v1.0

Page
9

of
16









getResources().getDrawable(










R.drawable.
ic_tab_artists
)).setContent(


new

Intent(Main.
this
, ConversationTab.
class
));




tabHost.addTab(contactSpec);




tabHost.addTab(conversationSpec);

Then in both the class files of each tabs add the following code
to
get the tabs working:

public

class

ConversationTab
extends

Activity {


public

void

onCreate(Bundle savedInstanceState) {



super
.onCreate(savedInstanceState);



}



@Override


public

boolean

onCreateOptionsMenu(Menu menu) {



MenuInflater inflater = getMenuInflater();



inflater.inflate(R.menu.
menu_conversation
, menu);



return

true
;


}

}


Figure
3

Tabs feature

By adding the simple code above, the empty tab will be created and the tab feature will be
functioning
. Now you can update the tab class activity to add different features.


Android GUI Devlopment

v1.0

Page
10

of
16


3.3

Spinners

A spinner is a view which allows you to select one option
from a list of several options. The items or
list of options come from an adapter attached to the spinner view

[
3
]
.

To use spinner in android application, f
irst include a spinner widget in the xml file.


Now you will create a string array from which a user

can make a selection within the spinner widget.

After that
,

open the activity class in which you will call the spinner. In the onCreate method add the
following lines of code:

Spinner

myspinner
=

(
Spinner
)

findViewById
(
R
.
id
.
spinner
);



ArrayAdapter

adapter
=

ArrayAdapter
.
createFromResource
(


this
,

R
.
array
.
planets
,

android
.
R
.
layout
.
simple_spinner_item
);


adapter
.
setDropDownViewResource
(
android
.
R
.
layout
.
simple_spinner_d
ropdown_item
);


s
.
setAdapter
(
adapter
);



Adapter object connects the
AdapterView and the underlying data for this view.



Figure
4

Reference feature



Android GUI Devlopment

v1.0

Page
11

of
16


3.4

Toast Message

A toast notification is a message that appears on the screen for
a

short

time

[
5
]
.


Add the following code for the toast message:

Toast.
makeText
(getApplicationContext(),



"Group Created Successfully"
, Toast.
LENGTH_LONG
).show();


A toast message is instantiated with a makeText() method which takes three parameter: the
application contex
t, text, duration of the toast.


3.5

Multi selection Dialogs

Hers is short tutorial to create a multi selection dialogue with the press of a button.


Figure
6

Multi
-
selection dialogue

For the button we set onClickListener

method to detect the click of the button and in
it

we use
the
showDialog
(0) method to call the multi selection dialogue
method in our main class. We can modify
Figure
5

Toast message


Android GUI Devlopment

v1.0

Page
12

of
16


it

to include the list of the items we want t
o choose from. We also define a

list of Boolean va
lues of
the same length to check if the option has been selected.

Then we write
the onCreateDialogue method as following
:

@Override

protected Dialog onCreateDialog( int id )

{


return new AlertDialog.Builder( this )




.setTitle( "Groups" )





.setMultiChoiceItems( _options, _selections, new DialogSelectionClickHandler() )




.setPositiveButton( "OK", new DialogButtonClickHandler() )




.create();

}

In
the above code
, first we set
the

title, then we pass
our list of items for selections and also pass our
list of Boolean values.

And then we also have another button click handler to check which options have been selected and
perform certain actions on them.

public class DialogButtonClickHandler implements
DialogInterface.OnClickListener

{


public void onClick( DialogInterface dialog, int clicked ) {



switch( clicked ) {




case DialogInterface.BUTTON_POSITIVE:





addSelectedGroups();





break;



}

}

}

protected void addSelectedGroups()

{

//Perform action

on your selections


}


Android GUI Devlopment

v1.0

Page
13

of
16


3.6

Toggle buttons

Android toggle button sets the button as checked or unchecked. We can even change the text of the
button to change when the state changes. We can set the property of the toggle button such that by
default it is
checked or unchecked depending on our preference.


Figure
7

Toggle buttons

To include the button, we have to simply include a toggle button in our UI layout.


3.7

Option Menu

The options menu appears when we press the menu button of our android device. There are
a
couple of ways how we can use the code to display this option.

When

creating menu we need to override the onCreate
OptionsM
enu

which takes one parameter.
Either it’s a

string or a resource object.


Figure
8

Options Menu




Android GUI Devlopment

v1.0

Page
14

of
16


3.8

Expandable lists

Expandable list used on the contact and conversation tabs is based on BaseExpandableListAdapter
[ref].


Tentatives have first been made to use
SimpleExapandableListAdapter but issues were encountered
when dealing with checkboxes. Indead, they would not keep track of their state
(checked/unchecked) and would not refresh consistently.


It consists of groups (the expandable sub
-
lists) and childs. Gr
oups are groups of contacts or
conversations and childs are contacts or conversation members, for contact and conversation tabs
respectively.

The views for groups and childs are defined by the following functions:



View getGroupView(int groupPosition, boole
an isExpanded, View convertView, ViewGroup
parent)



View getChildView(int groupPosition, int childPosition, boolean isLastChild, View
convertView, ViewGroup parent)

a
nd by the GUI XML files:



group_row.xml (for group rows in contact tab)



conversation_row.xml

(for group rows in conversation tab)



contact_row.xml (for child rows in contact and conversation tab)


State of each group and child (checked checkbox, presence) is kept track in GroupRow,
ConversationRow, ContactRow and MemberRow classes.

All groups and
childs are instances of these above classes.


Groups and childs are reloaded every time an action occurs, such as moving to another tab, receiving
a presence event, modifying/deleting/adding contacts/groups/conversations.

However, connection to the Profile

Management Server is done only during the login process. After
that, data is updated as changes occur.



Here is how the expandable list is instantiated in the conversation tab:


expListAdapter
=

new

ConversationTabExpandableListAdapter
(
this
,


conversations
)
;

setListAdapter
(
expListAdapter
)
;


And the rendering:


Android GUI Devlopment

v1.0

Page
15

of
16




4

Testing device

You can test your android GUI on the Emulator and on your Android smart phone.

4.1

Emulator

A mobile device emulator is included in the Android SDK.
It’s

a virtual device which runs on
the

computer. We can test out application GUI on it. AVD is supported by the emulator and we can
choose the Android platform
on which

we
want to run

the emulator. Emulator i
ncludes the
debugging capabilities
.

4.2

Android Smartph
one

You can
also
test your GUI or android project on your Android smart phone. Connect your HTC smart
phone to the computer. It will be detected as a pen drive. Install the driver from HTC website.
Using
Eclipse, you can just run the project and it will au
tomatically be built and installed, and started on
the smart phone.









Android GUI Devlopment

v1.0

Page
16

of
16


5

References

[
1
]
Android Developers
,
User Interface

[
Online].
Available:


http://developer.android.com/guide/topics/ui/index.html

[
2
]
Android Developers
,
Declaring Layout

[
Online].
Available:

http://developer.android.com/guide/topics/ui/declaring
-
l
ayout.html

[
3
]
Android Developers
,
Hello, Spinner Tutorial

[
Online].
Available:

http://developer.android.com/guide/tutorials/views/hello
-
spinner.html

[
4
]
Android People
,
T
ab Bar

[
Online].
Available:
http://www.androidpeople.com/category/tabbar/

[
5
]
Android Developers
,
Creating Toast Notifications

[
Online].
Available:
http://developer.android.com/guide/topics/ui/notifiers/toasts.html