CSC445

Modern Programming Languages

Week 2
Lecture 3

Android Applications
Development - Events
CSC445, Modern Programming Languages, Dr.
Mubeen Ghafoor, COMSATS
 ‘OnClick’ Event

• Create ‘OnClick’ Event on Button Widget in Android

Studio
 findViewById
findViewById(int):
This function is used to retrieve the widgets in the UI that you need to
interact with programmatically.

• findViewById(int id) is a method of the View.

• This method will take a resource Id usually in the form of
R.id.mView and will return to you a View object that is a reference
to that View.
• The returned object needs to be type casted to the correct type of
View before you can start interacting with it.

• Example:

TextView answerLabel = (TextView) findViewById(R.id.textView1);

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

 Events
● event: An external stimulus your program can respond to.
● Common kinds of events include:
– Mouse click/motion / tapping, Keys pressed, Timers
expiring, Network data available

● To respond to events in a program, you must:

– Write methods to handle each kind of event ("listener"
methods).
– Attach those methods to particular GUI widgets.
 OnClickListener
OnClickListener
Interface definition for a callback to be invoked when a view
is clicked.

onClick(View v):
Called when a view has been clicked.

setOnClickListener():
Register a callback to be invoked when this view is clicked.
 Button
A clickable widget with a text label

● key attributes:
android:clickable="bool" set to false to disable the button
android:id="@+id/theID" unique ID for use in Java code
android:onClick="function" function to call in activity when clicked
(must be public, void, and take a View arg)
android:text="text" text to put in the button

● represented by Button class in Java code

Button b = (Button) findViewById(R.id.theID);
...
 OnClickListener for Button
public class MainActivity extends ActionBarActivity implements OnClickListener {
Button myButton1 = null;
TextView myTextView = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
.
.
myTextView = (TextView) findViewById(R.id.textView1);
myButton1 = (Button) findViewById(R.id.button1);
myButton1.setOnClickListener(this);
}

@Override
public void onClick(View v) {
if(v.getId() == myButton1.getId()){
myTextView.setText("Button 1 Clicked");
}
}
 ImageButton
A clickable widget with an image label

● key attributes:
android:clickable="bool" set to false to disable the button
android:id="@+id/theID" unique ID for use in Java code
android:onClick="function" function to call in activity when clicked
(must be public, void, and take a View arg)
android:src="@drawable/img" image to put in the button
(must correspond to an image resource)

● to set up an image resource:

– put image file in project folder app/src/main/res/drawable
– use @drawable/foo to refer to foo.png
● use simple file names with only letters and numbers
 ImageView
Displays an image without being clickable

● key attributes:

android:id="@+id/theID" unique ID for use in Java code

android:src="@drawable/img" image to put in the screen

(must correspond to an image resource)

●
to change the visible image, in Java code:

– get the ImageView using findViewById

– i.e. ImageView image = (ImageView) findViewById(R.id.imageView1);
– call its setImageResource method and pass R.drawable.filename
– i.e. image.setImageResource(R.drawable.Img1);
 EditText
An editable text input box

● key attributes:
android:hint="text" gray text to show before user starts to type
android:id="@+id/theID" unique ID for use in Java code
android:inputType="type" what kind of input is being typed;
number,phone,date,time,...
android:lines="int" number of visible lines (rows) of input
android:maxLines="int" max lines to allow user to type in the box
android:text="text" initial text to put in box (default empty)
android:textSize="size" size of font to use (e.g. "20dp")

– others: capitalize, digits, fontFamily, letterSpacing,

minLines, numeric, password, phoneNumber, textAllCaps,
textColor
 CheckBox
An individual toggleable on/off switch

● key attributes:
android:checked="bool" set to true to make it initially checked
android:clickable="bool" set to false to disable the checkbox
android:id="@+id/theID" unique ID for use in Java code
android:onClick="function" function to call in activity when clicked
(must be public, void, and take a View arg)
android:text="text" text to put next to the checkbox

● In Java code:
CheckBox cb = (CheckBox) findViewById(R.id.theID);
cb.toggle(); //Change the checked state of the view to the
//inverse of its current state

cb.setChecked(true) ; // Changes the checked state of this button

 Exercise: Number game
● New let's build that "Bigger Number"
game! :
– user is shown two numbers
– must choose which one is bigger by
clicking on the appropriate button
– game pops up brief "correct" /
"incorrect" message after each guess
– get points for each correct answer (lose
points for incorrect answers)
 Displaying Toasts
Toast.makeText(this, "message", duration).show();

– where duration is Toast.LENGTH_SHORT or LENGTH_LONG

● A "Toast" is a pop-up message that appears for a short

time.
● Useful for displaying short updates in response to events.
 RadioButton
A toggleable on/off switch; part of a group

● key attributes:
android:checked="bool" set to true to make it initially checked
android:clickable="bool" set to false to disable the button
android:id="@+id/theID" unique ID for use in Java code
android:onClick="function" function to call in activity when clicked
(must be public, void, and take a View arg)
android:text="text" text to put next to the button

● need to be nested inside a RadioGroup tag in XML

so that only one can be selected at a time
 RadioGroup example
<LinearLayout ...
android:orientation="vertical"
android:gravity="center|top">
<RadioGroup ...
android:orientation="horizontal">
<RadioButton ... android:id="@+id/lions"
android:text="Lions"
/>
<RadioButton ... android:id="@+id/tigers"
android:text="Tigers"
android:checked="true"
/>
<RadioButton ... android:id="@+id/bears"
android:text="Bears, oh my!"
/>
</RadioGroup>
</LinearLayout>
OnClickListener for RadioButton
public class MainActivity extends ActionBarActivity implements OnClickListener {
RadioButton myRadioBtn1 = null;
RadioButton myRadioBtn2 = null;
TextView myTextView = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
....
myTextView = (TextView) findViewById(R.id.textView1);

myRadioBtn1 = (RadioButton)findViewById(R.id.radioButton1);
myRadioBtn2 = (RadioButton)findViewById(R.id.radioButton2);

myRadioBtn1.setOnClickListener(this);
myRadioBtn2.setOnClickListener(this);
}
@Override
public void onClick(View v) {
if(v.getId() == myRadioBtn1.getId()){
myTextView.setText("Radio Button 1 Clicked"); }
else if(v.getId() == myRadioBtn2.getId()){
myTextView.setText("Radio Button 2 Clicked"); }
}
 Spinner
A drop-down menu of selectable choices

● key attributes:
android:clickable="bool" set to false to disable the spinner
android:id="@+id/theID" unique ID for use in Java code
android:entries="@array/array" set of options to appear in spinner
(must match an array in strings.xml)
android:prompt="@string/text" title text when dialog of choices pops up

● also need to handle events in Java code

– must get the Spinner object using findViewById
– then call its setOnItemSelectedListener method (see example)
 String resources
● Declare constant strings and arrays in res/values/strings.xml:
<resources>
<string name="name">value</string>
<string name="name">value</string>

<string-array name="arrayname">
<item>value</item>
<item>value</item>
<item>value</item> <!-- must escape ' as \' in values -->
...
<item>value</item>
</string-array>
</resources>

●
 Spinner example
<LinearLayout ...>
<Spinner ... android:id="@+id/tmnt"
android:entries="@array/turtles"
/>
<TextView ... android:id="@+id/result" />
</LinearLayout>

● in res/values/strings.xml:
<resources>

<string-array name="turtles">
<item>Leonardo</item>
<item>Michelangelo</item>
<item>Donatello</item>
<item>Raphael</item>
</string-array>
</resources>
 Spinner event example
public class MainActivity extends ActionBarActivity implements OnClickListener,
OnItemSelectedListener{
.
.
Spinner myspinner = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
.
.
myspinner = (Spinner)findViewById(R.id.spinner1);
myspinner.setOnItemSelectedListener(this);
}
@Override
public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {

myTextView.setText("Selected Value is Hello"+ arg2);

}

@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub
}
}
 ScrollView
A container with scrollbars around
another widget or container

<LinearLayout ...>
...
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView ... android:id="@+id/turtle_info" />
</ScrollView>
</LinearLayout>