Lab Exercise

OBJECTIVES
• Objectives: Working with common widgets

INSTRUCTIONS
1. Create a new project, and add layouts based on the following hierarchy:

Details of the hierarchy:

o Main layout: default layout once project is created. The main layout shall have buttons to
navigate each of A, B, C and D
o A: a layout to demonstrate the imageView widget
▪ B layout have 2 images and a button
▪ Consider the following layout design:

ImageView

Button

▪ XML attributes
Widget/Layout Attributes
LinearLayout layout_width="match_parent"
layout_height="match_parent"
orientation="vertical"
padding="20dp"

Faculty of Engineering, Science & Technology | Mobile Programming | Page 1 of 5

Lab Exercise

ImageView layout_width="wrap_content"
layout_height="wrap_content"
*create an id for the ImageView
Button layout_width="wrap_content"
layout_height="wrap_content"
text="Change Image"
layout_gravity="center_horizontal"
*create an id for the Button

o B: a layout to demonstrate the radioButton and radioGroup widget

▪ C layout have 2 radioButtons, and a textView
▪ Consider the following layout design:

RadioButton

RadioButton

TextView

▪ XML attributes
Widget/Layout Attributes
LinearLayout layout_width="match_parent"
layout_height="match_parent"
orientation="vertical"
padding="16d
RadioGroup layout_width="match_parent"
layout_height="wrap_content"
background="#dbeceb"
padding="15dp"
*create an id for the RadioGroup
RadioButton layout_width="wrap_content"
layout_height="wrap_content"
text="Radio Button 1"
*create an id for the RadioButton

Faculty of Engineering, Science & Technology | Mobile Programming | Page 2 of 5

Lab Exercise

RadioButton layout_width="wrap_content"
layout_height="wrap_content"
text="Radio Button 2"
*create an id for the RadioButton
TextView layout_width="match_parent"
layout_height="wrap_content"
textAlignment="center"
textStyle="bold"
textSize="18dp"
padding="20dp"
*create an id for the TextView

o C: a layout to demonstrate the checkbox widget.

▪ D layout have 2 checkBox, a button and a textView
▪ Consider the following layout design:

CheckBox

CheckBox

Button

TextView

▪ XML attributes
Widget/Layout Attributes
LinearLayout layout_width="match_parent"
layout_height="match_parent"
orientation="vertical"
padding="16d
CheckBox layout_width="match_parent"
layout_height="wrap_content"
text="Check Box 1"
padding="16dp"
*create an id for the CheckBox

Faculty of Engineering, Science & Technology | Mobile Programming | Page 3 of 5

Lab Exercise

CheckBox layout_width="match_parent"
layout_height="wrap_content"
text="Check Box 2"
padding="16dp"
*create an id for the CheckBox
Button layout_width="wrap_content"
layout_height="wrap_content"
text="Show Text"
layout_gravity="center_horizontal"
*create an id for the Button
TextView layout_width="match_parent"
layout_height="wrap_content"
textAlignment="center"
textStyle="bold"
textSize="18dp"
padding="20dp"
*create an id for the TextView

2. Adding behavior in the class files

a. B layout:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
………
title = "Demo ImageView"
var resId = R.drawable.ic_launcher_background
binding.<ImageView id>.setImageResource(R.drawable.light_off)

binding. <Button id> .setOnClickListener {

resId =
if (resId == R.drawable.light_off)
R.drawable.light_on
else
R.drawable.light_off
binding. <ImageView id> .setImageResource(resId)
}
}
Note: to replace, eg: <ImageView id> by calling the id

Faculty of Engineering, Science & Technology | Mobile Programming | Page 4 of 5

Lab Exercise

b. C layout:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
………
title = "Demo RadioButton"
binding. <RadioGroup id> .setOnCheckedChangeListener(this)
}

override fun onCheckedChanged(group: RadioGroup?, p1: Int) {

var textMessage = if ( <RadioButton resource id> == p1 )
"radio button 1 selected"
else
"radio button 2 selected"
binding. <TextView id> .text = textMessage
}
Note: the <RadioButton resource id> is a resource id calling from the class R, eg:
R.id.radio1

c. D layout
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
………
title = "Demo CheckBox"

binding. <Button id> .setOnClickListener{

var msg = "You have checked on "
if(binding.cb1.isChecked)
msg += " combo 1"
if(binding.cb2.isChecked)
msg += " combo 2"
binding.textShow.text = msg
}
}

Faculty of Engineering, Science & Technology | Mobile Programming | Page 5 of 5