Mobile Application Development (22617) Practical No.

Practical No. 9: Develop a program to implement Button, Image Button and Toggle
Button

I. Practical Significance
In this practical, UI controls in android like Buttons are studied. There are various types of
buttons like Image button and toggle button which is studied.

II. Relevant Program Outcomes (POs)

PO 1. Basic knowledge
PO 2. Discipline knowledge
PO 3. Experiments and practice
PO 4. Engineering tools
PO 7. Ethics
PO 10. Life-long learning

III. Competency and Practical Skills

“Create simple Android applications.”
This practical is expected to develop the following skills
1. Able to develop UI controls like various types of buttons.
2. Able to use buttons which handles events.
3. Able to build Passive and Active UI controls.

IV. Relevant Course Outcome(s)

1. Develop rich user Interfaces by using layouts and controls.
2. Use User Interface components for android application development.

V. Practical Outcome (PrOs)

Develop a program to implement Button, Image Button and Toggle Button.

VI. Relevant Affective Domain Related Outcome(s) 1.

Work collaboratively in team
2. Follow ethical Practices.

VII. Minimum Theoretical Background

1. Buttons-
In Android, Button represents a push button. The android. widget. Button is subclass of
Text View class and Compound Button is the subclass of Button class. A Push buttons can
be clicked, or pressed by the user to perform an action. There are different types of
buttons used in android such as Compound Button, Toggle Button, Radio Button. Button
is a subclass of Text View class and compound button is the subclass of Button class. On a
button we can perform different actions or events likeclick event, pressed event, touch
event etc. Android buttons are GUI components which are sensible to taps (clicks) by the
user. When the user taps/clicks on button in an Android app, the app can respond to the
click/tap. These buttons can be divided into two categories: the first is Buttons with text
on, and second is buttons with an image on.

Maharashtra State Board of Technical Education 1

 Mobile Application Development (22617) Practical No. 9

2. Types of buttons–
Buttons can be divided into two categories the first is Buttons with text on, and second is
buttons with an image on.

3. Image Button –
A button with images on can contain both an image and a text. Android buttons with
images on are also called Image Button. In Android, Image Button is used to display a
normal button with a custom image in a button. In simple words we can say, Image Button
is a button with an image that can be pressed or clicked by the users. By default it looks
like a normal button with the standard button background that changes the color during
different button states. An image on the surface of a button is defined within a xml (i.e.
layout ) by using src attribute or within java class by using setImageResource() method.
We can also set an image or custom drawable in the background of the image button .
Image Button has all the properties of a normal button so you can easily perform any event
like click or any other event which you can perform on a normal button.
Note: Standard button background image is displayed in the background of button
whenever you create an image button. To remove that image, you can define your own
background image in xml by using background attribute or in java class by using
setBackground() method.

Maharashtra State Board of Technical Education 2

 Mobile Application Development (22617) Practical No. 9

4. Toggle Button
A toggle button allows the user to change a setting between two states. You can add a
basic toggle button to your layout with the Toggle Button object. If you need to change
a button's state yourself, you can use the Compound Button.setChecked() or
Compound Button.toggle() method. To detect when the user activates the button or
switch, create a Compound Button. OnCheckedChangeListener object and assign it to
the button by calling setOnCheckedChangeListener().
It is beneficial if user have to change the setting between two states. It can be used to
On/Off Sound, Wi-Fi, Bluetooth etc. By default, the android Toggle Button will be in OFF
(Unchecked) state. We can change the default state of Toggle Button by using
android:checked attribute. In case, if we want to change the state of Toggle Button to
ON (Checked), then we need to set android:checked = “true” in our XML layout file.

VIII. Resources required (Additional)

Sr. Instrument /Object Specification Quantity Remarks

No.
Android enabled 2 GB RAM 1 Data cable is
smartphone / Android mandatory for
1
version supporting emulators
emulator

Maharashtra State Board of Technical Education 3

 Mobile Application Development (22617) Practical No. 9

IX. Practical related Questions

Note: Below given are few sample questions for reference. Teachers must design more
such questions to ensure the achievement of identified CO.
1. Write a piece of code to set id of the button.
2. How to add image to resources file?
3. List four Android Toggle Button control attributes.

(Space for answers)

1.
<Button

android:id="@+id/okbutton" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />

2.
Right click res > drawable folder, select “Open In > Explorer”, explorer will open, paste the image
e.g. myphoto.jpg.

3.
android:id
android:textOff The text for the button when it is not checked.
android:textOn The text for the button when it is checked.
android:text Text to display.

X. Exercise
Note: Faculty must ensure that every group of students use different input
value.
(Use blank space for answers or attach more pages if needed)
1. Write a program to create a toggle button to display ON / OFF Bluetooth on the display
screen.
2. Write a program to create a simple calculator.

(Space for answers)

1.
//MainActivity.java
package com.jamiapolytechnic.experiment91;

Maharashtra State Board of Technical Education 4

 Mobile Application Development (22617) Practical No. 9

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ToggleButton tb1 = (ToggleButton)findViewById(R.id.toggle1);

tb1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), tb1.getText().toString()
,Toast.LENGTH_SHORT).show();
}
});
}
}

//=====================================================================
//activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<ToggleButton
android:id="@+id/toggle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:checked="true"
android:textOff="Blutooth OFF"
android:textOn="Blutooth ON"/>
</RelativeLayout>

========================================================================
2.
//MainActivity.java
package com.jamiapolytechnic.experiment92;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

Maharashtra State Board of Technical Education 5

 Mobile Application Development (22617) Practical No. 9

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

//=====================================================================
//activity_main.xml
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="25dp" >

<TableRow>
<EditText
android:id="@+id/txtScreen"
android:enabled="false"
android:text="0"
android:padding="5dp"
android:textColor="#000"
android:background="#4444"
android:textSize="50sp"
android:gravity="right"
android:layout_column="1"
android:layout_span="4"/>
</TableRow>

<TableRow>
<Button
android:id="@+id/seven"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="7"
android:layout_column="1" />
<Button
android:id="@+id/eight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"

Maharashtra State Board of Technical Education 6

 Mobile Application Development (22617) Practical No. 9

android:text="8"
android:layout_column="2" />
<Button
android:id="@+id/nine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="9"
android:layout_column="3" />
<Button
android:id="@+id/divide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="/"
android:layout_column="4" />
</TableRow>

<TableRow>
<Button
android:id="@+id/four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="4"
android:layout_column="1" />
<Button
android:id="@+id/five"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="5"
android:layout_column="2" />
<Button
android:id="@+id/six"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="6"
android:layout_column="3" />
<Button

Maharashtra State Board of Technical Education 7

 Mobile Application Development (22617) Practical No. 9

android:id="@+id/multiply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="*"
android:layout_column="4" />
</TableRow>

<TableRow>
<Button
android:id="@+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="1"
android:layout_column="1" />
<Button
android:id="@+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="2"
android:layout_column="2" />
<Button
android:id="@+id/three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="3"
android:layout_column="3" />
<Button
android:id="@+id/minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="-"
android:layout_column="4" />
</TableRow>

<TableRow>
<Button

Maharashtra State Board of Technical Education 8

 Mobile Application Development (22617) Practical No. 9

android:id="@+id/zero"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="0"
android:layout_column="1" />
<Button
android:id="@+id/point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="."
android:layout_column="2" />
<Button
android:id="@+id/equal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="="
android:layout_column="3" />
<Button
android:id="@+id/plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="25sp"
android:text="+"
android:layout_column="4" />
</TableRow>

</TableLayout>

Maharashtra State Board of Technical Education 9

Mobile Application Development (22617) Practical No. 9

XI. References / Suggestions for further Reading

1. https://www.tutorialspoint.com/android
2. https://stuff.mit.edu
3. https://www.tutorialspoint.com/android/android_advanced_tutorial.pdf
4. https://developer.android.com

XII. Assessment Scheme

Performance indicators Weightage

Process related (10 Marks) 30%

1. Logic Formation 10%

2. Debugging ability 15%
3. Follow ethical practices 5%
Product related (15 Marks) 70%

4. Interactive GUI 20%

5. Answer to Practical related questions 20%
6. Expected Output 20%
7. Timely Submission 10%
Total (25 Marks) 100%

List of student Team Members

1

Marks Obtained Dated signature of

Teacher
Process Product Total
Related(10) Related(15) (25)

Maharashtra State Board of Technical Education

10