Mobile Computing Laboratory Course Code: CSL603

Experiment No. 6

Title: Develop an application that uses GUI

components.

Date ://

Subject In-charge Sign:

…………………………….

RIZVI COLLEGE OF ENGINEERING | Department of Computer

Engineering
Mobile Computing Laboratory Course Code: CSL603

Experiment No. 6
Aim: Develop an application that uses GUI components.
Software: Eclipse/Android Studio.
Theory: In android ui or input controls are the interactive or View components which
are used to design the user interface of an application. In android we have a
wide variety of UI or input controls available, those are TextView, EditText,
Buttons, Checkbox, Progressbar, Spinners, etc. Generally, in android the user
interface of an app is made with a collection of View and ViewGroup objects.
The View is a base class for all UI components in android and it is used to
create an interactive UI component such as TextView, EditText, Checkbox,
Radio Button, etc. and it responsible for event handling and drawing. The
ViewGroup is a subclass of View and it will act as a base class for layouts and
layout parameters. The ViewGroup will provide an invisible containers to hold
other Views or ViewGroups and to define the layout properties. In android, we
can define a UI or input controls in two ways, those are
• Declare UI elements in XML
• Create UI elements at runtime
Android Different Types of UI Controls
We have a different type of UI controls available in android to implement user
interface for our android applications.
Following are the commonly used UI or input controls in android applications.
TextView
EditText
AutoCompleteTextView
Button
ImageButton
ToggleButton
CheckBox
RadioButton
RadioGroup
ProgressBar
Spinner
TimePicker
DatePicker
SeekBar
AlertDialog
Switch

RIZVI COLLEGE OF ENGINEERING | Department of Computer

Engineering
Mobile Computing Laboratory Course Code: CSL603

RatingBar
In this experiment we will be implementing font and color changes of a text
using GUI components.

Program:
XML File :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:text="Experiment :- 4"
android:textSize="25sp"
android:textStyle="bold" />
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:text="Change font size"
android:textSize="25sp" />
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:text="Change color"
android:textSize="25sp" />
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"

RIZVI COLLEGE OF ENGINEERING | Department of Computer

Engineering
Mobile Computing Laboratory Course Code: CSL603

android:textSize="25sp" />
<Button
android:id="@+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:text="Change Text"
android:textSize="25sp" />
</LinearLayout>

Java Code:
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity
{
int ch=1;
float font=30;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextView t= (TextView) findViewById(R.id.textView);
Button b1= (Button) findViewById(R.id.button1);
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
t.setTextSize(font);
font = font + 5;
if (font == 50)
font = 30;
}
});
Button b2= (Button) findViewById(R.id.button2);
b2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
switch (ch) {
case 1:
t.setTextColor(Color.RED);
break;

RIZVI COLLEGE OF ENGINEERING | Department of Computer

Engineering
Mobile Computing Laboratory Course Code: CSL603

case 2:
t.setTextColor(Color.GREEN);
break;
case 3:
t.setTextColor(Color.BLUE);
break;
case 4:
t.setTextColor(Color.CYAN);
break;
case 5:
t.setTextColor(Color.YELLOW);
break;
case 6:
t.setTextColor(Color.MAGENTA);
break;
}
ch++;
if (ch == 7)
ch = 1;
}
});
Button b3 = (Button) findViewById(R.id.button3);
b3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
EditText et1 = (EditText) findViewById(R.id.editText);
String newText = et1.getText().toString();
t.setText(newText);
}
});
}
}

Output:

RIZVI COLLEGE OF ENGINEERING | Department of Computer

Engineering
Mobile Computing Laboratory Course Code: CSL603

Pre-Lab Questions:
1. Why do we require GUI components?

Post Lab Questions:

1. What additional changes can be made using GUI components?

Conclusion: Thorough knowledge of GUI components coding and its application has been
achieved. All the pre and post lab questions have been answered and understood.

RIZVI COLLEGE OF ENGINEERING | Department of Computer

Engineering