COMP4521

Mobile Application Development

Lecture 3
Event Handler / ImageButton | Edward Szeto
1
 Lesson Outline
• Common way to build an app
• Event Handler
• ImageButton

2
 Common way
to build an app

3
 Common way to build an app
General Steps
1. Create the related components (via UI or activity_main.xml file)
2. Modify the attributes of the component
(via UI or activity_main.xml file)
3. Add the code for your program logic
4. Adjust the Constraint for components

4
 Common way to build an app
General Steps TextView PlainText
1. Create the related components
(via UI or activity_main.xml file)
Button

TextView
(by default here for a
new project)

5
 Common way to build an app
General Steps
2. Modify the attributes of the component
(via UI or activity_main.xml file)
TextView
Attributes Value
id txvName
text Name:
PlainText
Attributes Value
id etName 6
text <empty>
 Common way to build an app
General Steps
2. Modify the attributes of the component
(via UI or activity_main.xml file)
TextView (i.e. HelloWorld)
Attributes Value
id txvDisplay
text <Remain Unchanged>

Button
Attributes Value
id btnGreet
text Greeting
7
onClick sayHi
 Common way to build an app
General Steps
3. Add the code for your
program logic

How to simplify
the coding?

8
 Common way to build an app
General Steps
4. Adjust the Constraint for
components
(use InferConstraint or drag
one-by-one)

“Remove the error

according to the
suggestions”

9
Event Handler

10
 Event
a user's interaction with interactive components of applications

Event Listener
• An interface in the View class that contains a single callback method
• These methods will be called by the Android framework when the View
to which the listener has been registered is triggered by user interaction
with the item in the UI

Event Handler
• The method that actually handles the event
• When an event happens & registered an event listener for the event, the
event listener calls the event handlers 11
 Event
a user's interaction with interactive components of applications

Event Listeners Registration

• Process by which an Event Handler gets registered with an Event Listener
• the handler is called when the Event Listener fires the event

Can you give some examples

of Event Listeners?

12
 Event
a user's interaction with interactive components of applications

Example

Register for
OnClickListener OnClickListener

OnClick Event
Handler
13
ImageButton

14
 Image Button

Features
• One of the UI components available in Android Studio

• Use an image instead of text for a button

• Available to be clicked by users

15
 Image Button
Let’s try to create an Android Application with Image Button

Image Button Example

• Copy the image files to res/drawable
• Add the Image Button
• Modify the attributes of the component
(via UI or activity_main.xml file)
• Add the code for your program logic
• Adjust the Constraint for components

16
 Image Button
Image Button Example
1. Copy the image files under the res/drawable

17
 Image Button
Image Button Example
1. - Remove the default TextView
- Drag the related components
(e.g. Buttons > ImageButton)
- Choose the appropriate image Image
Button

18
 Image Button
Image Button Example
2. Modify the attributes of the component
(via UI or activity_main.xml file)

Image Button
Attributes Value
id imgBtnMJ1
imgBtnMJ2
srcCompat @drawable/back
ScaleType <Try together>

19
 Image Button MainActivity.kt
Image Button Example
3. Add the code for your
program logic

Build.gradle.kts (:app)

More about ViewBinding 20

https://developer.android.com/topic/libraries/view-binding/migration#kts
 Image Button
Image Button Example
4. Adjust the Constraint
for components
• use InferConstraint or
by attributes

“Suggest modifying the

constraint by yourself”

21
Thanks!
22