Programming with Android: Layouts, Widgets and Events Luca Bedogni Marco Di Felice Dipartimento di Scienze dell’Informazione Università di Bologna

Programming with Android: Layouts, Widgets and Events

Luca Bedogni Marco Di Felice Dipartimento di Scienze dell’Informazione

Università di Bologna

Luca Bedogni, Marco Di Felice - Programming with Android – ViewGroups, Views and Events 2

Outline

Event Management: Event Listeners

Widget: examples

Widget: definition

ViewGroup: examples

ViewGroup: definition

Components of an Activity

Event Management: Event Handlers


Android Applications Design

Developing an Android Application means using in a proper way the Android basic components …

ActivityActivity

LayoutLayout ViewsViewsFragmentFragment

IntentIntent

ServiceService BroadcastReceiverBroadcastReceiver

ContentProvidersContentProviders

Luca Bedogni, Marco Di Felice - Programming with Android – ViewGroups, Views and Events4

Android: Views and Layouts

Components of the User Interface (UI) of an ActivityComponents of the User Interface (UI) of an Activity

ViewGroupViewGroup ViewView

View container Responsible for placing

other Views on the display Every layout must extend a

ViewGroup

Basic component of the UI Can handle/produce

events Every new UI component

must extend a View


Android: ViewGroups

ViewGroup define the placement of the Views.ViewGroup define the placement of the Views.

Defined in Java code (within the Activity file)

Defined in XML (layout file)

Use XML tags to place a ViewGroup

Place a View within a ViewGroup using these XML attributes

android:layout_width

android:layout_height } match_parent|wrap_content


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation=”vertical" > <Button

android:id="@+id/button1"

android:layout_width=”match_parent"

android:layout_height="wrap_content"

android:text="@string/buttonString1" />

<Button


android:layout_width="wrap_content"



</LinearLayout>

ACTIVITY_MAIN.XML

Android: ViewGroups






android:orientation=”vertical" > <Button


android:layout_width=”match_parent"



<Button



android:layout_height=”match_parent"


</LinearLayout>

ACTIVITY_MAIN.XML

Android: ViewGroups


A Layout can be declared within another Layout

List of most common Layouts provided by Android List of most common Layouts provided by Android

Name XML Tag Description

LinearLayout <LinearLayout></LinearLayout>

arrange Views by aligning them on a single row or column

RelativeLayout <RelativeLayout></RelativeLayout>

arrange Views through relative positions

TableLayout <TableLayout></TableLayout>

arrange Views into rows and columns

FrameLayout <FrameLayout></FrameLayout>

arrange a single View within a Layout

AbsoluteLayout <AbsoluteLayout></AbsoluteLayout>

arrange Views through absolute positions

Android: ViewGroups















Android: ViewGroups


LinearLayout view group that aligns all children in a single direction, vertically or horizontally.LinearLayout view group that aligns all children in a single direction, vertically or horizontally.

Orientation can be declared through XML tagandroid:orientation= HORIZONTAL|VERTICAL

Orientation can also be declared in Java through setOrientation(int orientation)

Views has also other two attributes:

gravity

weigth How much space is assigned to the View

Align the View with its parent

Android: ViewGroups


ORIENTATIONVERTICAL

ORIENTATIONVERTICAL

ORIENTATIONHORIZONTALORIENTATIONHORIZONTAL

Android: ViewGroups






android:orientation="vertical" > <!-- Also horizontal

<Button





<Button





</LinearLayout>

Android: ViewGroups


For each View in a LinearLayout, we can set the

android:weight XML property (integer value)

Importance of a View, how much it can expandImportance of a View, how much it can expand

<LinearLayout><Button …android:layout_width=match_parent android:weight=1/><Button … android:layout_width=match_parent android:weight=1/></LinearLayout>

Android: ViewGroups



android:weight XML property (integer value)

Importance of a View, how much it can expandImportance of a View, how much it can expand

<LinearLayout><Button …android:layout_width=match_parent android:weight=1/><Button … android:layout_width=match_parent android:weight=2/></LinearLayout>

Android: ViewGroups



layout_gravity XML property

Align a View with its parent (LinearLayout)Align a View with its parent (LinearLayout)

<LinearLayout><Button …android:layout_width=match_parentandroid:weigth=1/><Button … android:layout_width=match_parent android:layout_gravity=“center_vertical”android:weight=2/></LinearLayout>

Android: ViewGroups















Android: ViewGroups


RelativeLayout View group that displays all Views based on relative positions.RelativeLayout View group that displays all Views based on relative positions.

RELATIVE= COMPARED to the PARENT LAYOUTRELATIVE= COMPARED to the PARENT LAYOUT

android:alignParentBottom=“true|false”android:alignParentTop=“true|false”android:alignParentLeft=“true|false”android:alignParentRight=“true|false”android:alignParentStart=“true|false”android:alignParentEnd=“true|false”…

Android: ViewGroups


RelativeLayout View group that displays all Views based on relative positions.RelativeLayout View group that displays all Views based on relative positions.

RELATIVE= COMPARED to SIBLING VIEWsRELATIVE= COMPARED to SIBLING VIEWs

android:toLeftOf= IDandroid:toRightOf= IDandroid:toStartOf= IDandroid:toEndOf= ID…

XML Identifierof the View

used as referencepoint

XML Identifierof the View

used as referencepoint

Android: ViewGroups



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent" android:layout_height="match_parent" >

<EditText

android:id="@+id/username" android:text="username"

android:inputType="text"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_toRightOf="@+id/usernameLabel" >

</EditText>

<TextView

android:id="@+id/usernameLabel"



android:layout_alignBaseline="@+id/username"

android:text="Username" />

CONTINUE

ACTIVITY_MAIN.XML

Android: ViewGroups


<EditText

android:id="@+id/password" android:text="password"

android:inputType="textPassword"

android:layout_below="@+id/username"



android:layout_alignLeft="@+id/username"

android:layout_alignParentRight="true"

android:layout_toRightOf="@+id/usernameLabel" >

</EditText>

<TextView

android:id="@+id/passwordLabel"



android:layout_alignBaseline="@+id/password"

android:text="Password" />

</RelativeLayout>

ACTIVITY_MAIN.XML

Android: ViewGroups















Android: ViewGroups


TableLayout View group that arranges all Views into rows and columns (as an HTML table).TableLayout View group that arranges all Views into rows and columns (as an HTML table).

1. Consists of a list of TableRaw objects, each defyining a raw of the Table.

2. The width of a column is defined by the row with the widest cell in that column.

3. Cells can be empty, or can span multiple columns (like in HTML).

4. Border lines of the cells are not displayed.

PROPERTIES

Android: ViewGroups


TableLayout View group that arranges all Views into rows and columns (as an HTML table).TableLayout View group that arranges all Views into rows and columns (as an HTML table).

android:layout_columnandroid:layout_spanandroid:collapsecolumnandroid:shrinkColumnsandroid:stretchColumns

ADDITIONAL XML attributes

} Apply only towidth

layout_width is always WRAP_CONTENTlayout_height is WRAP_CONTENT (default)

Android: ViewGroups



<TableLayout android:layout_width="fill_parent"

android:layout_height="fill_parent" xmlns:android=schemas.android.com/apk/res/android

android:id="@+id/tableLayout”>

<TableRow android:layout_width="wrap_content" android:layout_height="wrap_content“ android:id="@+id/firstRow">

<Button

android:id="@+id/button1“

android:layout_width="wrap_content“

android:layout_height="wrap_content“

android:text="Button" />

<Button android:id="@+id/button2“

android:layout_width="match_parent"

android:layout_height="match_parent"


<Button android:id="@+id/button3"

android:layout_width="match_parent"

android:layout_height="match_parent"


</TableRow>

ACTIVITY_MAIN.XML

CONTINUE

Android: ViewGroups

Luca Bedogni, Marco Di Felice - Programming with Android – ViewGroups, Views and Events

<TableRow



android:id="@+id/secondRow">

<Button

android:layout_column="1"

android:layout_span="2"




android:text="Button">

</Button>

</TableRow>

</TableLayout>

25

ACTIVITY_MAIN.XML

Android: ViewGroups















Android: ViewGroups


FrameLayout Block out an area on the screen to display a single item (i.e. a single View).FrameLayout Block out an area on the screen to display a single item (i.e. a single View).

It should be used to display a single View within the Layout

Multiple views can be controlled through android:layout_gravity

AbsoluteLayout Arrange Views on the screen by specifying absolute x-y positions of each View.AbsoluteLayout Arrange Views on the screen by specifying absolute x-y positions of each View.

Deprecated, since it is dependant of the screen resolution

Android: ViewGroups


Android: Views and Layouts

Components of the User Interface (UI) of an ActivityComponents of the User Interface (UI) of an Activity

ViewGroupViewGroup ViewView

View container. Responsible for placing

other Views on the display Every layout must extend a

ViewGroup

Basic component of the UI Can handle/produce

events Every new UI component

must extend a View


Android: Views objects

Views basic building blocks for user interface componentsViews basic building blocks for user interface components

Rectangular area of the screen Responsible for drawing Responsible for event handling

GoogleMap WebView Widgets topic of the day … User-defined Views

EXAMPLEs of VIEWS objects:EXAMPLEs of VIEWS objects:


Android: Views objects

Widget Pre-defined interactive UI components (android.view.widgets)Widget Pre-defined interactive UI components (android.view.widgets)

TextView

EditText

Button

ToggleButton

Spinner

DataPicker

Luca Bedogni, Marco Di Felice - Programming with Android – ViewGroups, Views and Events(c) Luca Bedogni 2012 31

Widgets can be defined in the XML layout filesWidgets can be defined in the XML layout files

Widgets: Java and XML code

< TextViewandroid:id="@+id/textLabel”android:layout_width="match_parent"

android:layout_height="wrap_content”android:visibility="visible”android:enabled="true”android:scrollbars="vertical”android:text=“Hello World”

/>

PROPERTIES, defined through android:… attributesPROPERTIES, defined through android:… attributes


Widgets can be defined in XML and accessed from JavaWidgets can be defined in XML and accessed from Java


< TextView android:id="@+id/name1” />

public TextView text;text=(TextView)findViewById(R.id.name1);

JAVA

XML

CAST REQUIREDCAST REQUIREDpublic TextView text;text=new TextView();


Each Widget can have a focus and a visibility, based on the user’s interaction.

The user can force a focus to a specific component through the requestFocus() method.

The user can modify the visibility of a specific component through the setVisibility(int) method.


public TextView text;text=(TextView) findViewById(R.id.name1);text.setVisibility(true)text.requestFocus();


Widgets are organized on a hierarchy of classes …

Widgets: Hierarchy of the classes …

ViewView

TextViewTextView

EditViewEditView

ImageViewImageView

ButtonButton CheckedTextViewCheckedTextView

AutoCompleteTextView

AutoCompleteTextView CompoundButtonCompoundButton

CheckBoxCheckBox RadioButtonRadioButton ToggleButtonToggleButton


XML tags: <TextView> </TextView>

Could be filled with strings or HTML markups Not directly editable by users Usually used to display static informations

Widgets: TextView

<TextView android:text=”@string/textWelcome" android:id="@+id/textLabel" android:layout_width="wrap_content" android:layout_height="wrap_content”/>


Methods to place some texts inside a TextView …

public void setText(CharSequence text) public CharSequence getText()public void setSingleLine(boolean singleLine)public void setHorizontallyScrolling(boolean enable)public void setLines(int lines)public void setEllipsize(TextUtils.TruncateAt where)public void setHints(CharSequence hints)

Widgets: TextView methods

TextUtils.TruncateAt.END TextUtils.TruncateAt.MARQUEE TextUtils.TruncateAt.MIDDLE TextUtils.TruncateAt.START


Simple strings could be linkified automatically. How? Pick a normal string, and use Linkify.addLinks() to define

the kind of links to be created. Could manage: Web addresses, Emails, phone numbers, Maps

Widgets: Linkify elements

TextView textView=(TextView) findViewById(R.id.output); Linkify.addLinks(textView, Linkify.WEB_URLS |

Linkify.WEB_ADDRESSES | Linkify.PHONE_NUMBERS );

Linkify.addLinks(textView, Linkify.ALL);

It is possible to define custom Linkify objects. ..


XML tags: <EditText> </EditText>

Similar to a TextView, but editable by the users An appropriate keyboard will be displayed

Widgets: EditText

<EditText android:text=”@string/textDefault" android:id="@+id/editText”

android:inputType= “textCapSentences” | “textCapWords” |

“textAutoCorrect” | “textPassword” |

“textMultiLane” />


CompoundButton: Button + state (checked/unchecked)

Widgets: Button

XML tags: <Button> </Button>

Subclass of a TextView, but not directly editable by usersCan generate events related to click, long click, etc

<Button android:text="@string/textButton" android:id="@+id/idButton" android:background="@color/blue”/>

<selector><item android:color="#ff819191” android:state_pressed="true”></item></selector>

res/color/blue.xml


Widgets: Button and CompoundButton

checkBox CompoundButton

XML tags: <checkBox>

<checkBox android:layout_width="wrap_content” android:layout_height="wrap_content”android:id="@+id/buttonCheck”android:text="CheckBox”android:checked="true”/>



checkBox CompoundButton

public boolean isChecked():Returns true if the button is

checked, false otherwise.

public boolean setChecked(bool)

Listener: onCheckedChangeListener



radioButton CompoundButton

XML tags: <RadioButton>

<RadioButton android:layout_width="wrap_content” android:layout_height="wrap_content”android:id="@+id/buttonRadio” android:text="ButtonRadio”android:checked="true”/>



radioButton CompoundButton

Define multiple (mutual-exclusive) options through a <RadioGroup> tag.

Only one button can be checked within the same RadioGroup.

Listener:OnCheckedChangeListener



<RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical”> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/buttonRadio1" android:text="Option 1" android:checked="true” />

<RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/buttonRadio2" android:text="Option 2” /> </RadioGroup>



toggleButton CompoundButton

It can assume only 2 states: checked/unchecked

Different labels for the states with: android:textOn and android:textOff XML attributes.

Listener:OnCheckedChangeListener



toggleButton CompoundButton

XML tags: <ToggleButton>

<ToggleButton android:layout_width="wrap_content” android:layout_height="wrap_content”android:id="@+id/toggleButtonId”android:textOn="Button ON”android:textOff="Button OFF”android:checked="false”/>


Widgets: Spinners

Spinner component

XML tags: <Spinner>

Provides a quick way to select values from a specific set.

The spinner value-set can be defined in XML (through the entries tag) or through the SpinnerAdapter in Java

Listener:OnItemSelectedListener


Widgets: Spinners

Spinner component

XML tags: <Spinner>

<Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/spinnerId" android:entries="@array/stringOptions">/>

<resources> <string-array name="stringOptions"> <item>Option 1</item> <item>Option 2</item> <item>Option 3</item> <item>Option 4</item></string-array></resources> res/values.xml



DataPicker component

XML tags: <DataPicker>

<DatePicker android:layout_width="wrap_content” android:layout_height="wrap_content”android:id=“@+id/datePickerId”android:endYear="1990”android:startYear="2014”android:maxDate="10/10/2014”/>


ImageView: subclass of View object.

Some methods to manipulate an image: void setScaleType(enum scaleType)

void setAlpha(double alpha)

void setColorFilter(ColorFilter color)

Widgets: ImageView

CENTER, CENTER_CROP, CENTER_INSIDE, FIT_CENTER, FIT_END, FIT_START, FIT_XY, MATRIX


Widgets: ImageView

ImageView component

XML tags: <ImageView>

<ImageView android:layout_width="wrap_content” android:layout_height="wrap_content”android:id="@+id/imageId”android:src="@drawable/android”/>

Source: android.jpg in drawable/


How to handle the events generated by a View?How to handle the events generated by a View?

Views and Events

1. Directly from XML

2. Through Event Listeners (general, recommended)

3. Through Event Handlers (general)

Views/Widgets are interactive components Upon certain action from the user, an appropriate event will be fired


click, long click, focus, items selected, items checked,drag, …


For a limited set of components, it is possible to manage the events through callbacks indicated in the XML layout.

Views and Events

<Buttonandroid:text="@string/textButton”android:id="@+id/idButton” android:onClick=”doSomething”/>

public void doSomething(View w) {

// Code to manage the click event}

XML Layout File

Java code



Views and Events








Each listener handles a single event…

Each listener contains a single callback method …

The callback is invoked at occurrence of the event.

Views and Events

ButtonButton

interface OnClickListener

public abstract void onClick(View v) {}

Each View contains a collection of nested interfaces (listeners). Each View contains a collection of nested interfaces (listeners).


Views and Events: ActionListener

public class ExampleActivity extends Activity implements OnClickListener {

…}

To handle events through the ActionListener mechanism:To handle events through the ActionListener mechanism:

1. Make the Activity implement the Listener Interface corrisponding to the Event generated by the View

1. Make the Activity implement the Listener Interface corrisponding to the Event generated by the View

(Click Event in this example)



public void onClick(View w) {…// Place here the code to manage the event

}


2. Implement the abstract method of the Listener this will be the callback method when the Event is fired2. Implement the abstract method of the Listener this will be the callback method when the Event is fired




Button mybutton=(Button) findViewById(R.id.button1);

mybutton.setOnClickListener(this);


3. Associate the ActionListener to the View through themethod setEVENTListener(this)

3. Associate the ActionListener to the View through themethod setEVENTListener(this)



interface OnClickListener

abstract method: onClick()interface OnLongClickListener

abstract method: onLongClick()interface OnFocusChangeListener

abstract method: onFocusChange()interface OnKeyListener

abstract method: onKey()interface OnCheckedChangeListener

abstract method: onCheckedChanged()


interface OnItemSelectedListener

abstract method: onItemSelected() interface OnCheckedChangeListener

abstract method: onCheckedChanged() interface OnItemSelectedListener

abstract method: onItemSelected() interface OnTouchListener

abstract method: onTouch() interface OnCreateContextMenuListener

abstract method: onCreateContextMenu()

LIST OF ACTIONLISTENER INTERFACESLIST OF ACTIONLISTENER INTERFACES

Luca Bedogni, Marco Di Felice – Events and Widgets(c) Luca Bedogni 2012

60

Can be done through performEVENT() eventsThe corresponding listener (if set) will be invoked…


…Button button=(Button)findViewById(R.id.buttonNext);button.performClick();…

// Callback methodpublic void onClick(View v) {

….}

// Callback methodpublic void onClick(View v) {

….}

It is also possible to fire an event directly from the Java code (without user’s interaction) … useful for debugging!It is also possible to fire an event directly from the Java code (without user’s interaction) … useful for debugging!



Views and Events








Event Handlers Some Views have callback methods to handle specific events (example: When a Button is touched onTouchEvent() called)

Event Handlers Some Views have callback methods to handle specific events (example: When a Button is touched onTouchEvent() called)

Views and Events: Event Handlers

PROBLEM: to intercept an event, you must extend the View class and override the callback method … not very practical!

Events Handlers are used for custom (user-defined) components …

Events Listeners are used for common View/Widget components …

Events Handlers are used for custom (user-defined) components …

Events Listeners are used for common View/Widget components …

IN PRACTICE:

Documents

Programming with Android: Layouts, Widgets and Events Luca Bedogni Marco Di Felice Dipartimento di Scienze dell’Informazione Università di Bologna