Federal TVET Institute

Department of Information Communication Technology

Master of ICT Teachers Education

Learning Guide 3: Learning

Guide 3: Advance User
Interface Control, Event
Handling, Styles and Themes

Operation Sheet 3.3: Using

RadioButton, Checkbox and
Progress bar

Dr. Patrick D. Cerna (Associate Professor)

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 1

Procedure:

PART I: RADIO BUTTON EXAMPLE

Step 1. Create Android Application
The first step is to create a simple Android Application using Android studio. Search
for android in the program menu. When you click on Android studio icon, then click
“Start a new Android Studio Project”it will show screen as shown below:

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 2

Step 2: Type the application name

You can start your application development by calling start a new android studio
project. in a new installation frame should ask Application name, package
information and location of the project. Type the application name “RadioButton”

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 3

Step 3: Select Target Android Device

After entered application name, it going to be called select the form factors your
application runs on, here need to specify Minimum SDK, in our tutorial, I have
declared as API23: Android 6.0(Mashmallow) −

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 4

Step 4: Choose an Activity

The next level of installation should contain selecting the activity to mobile, it
specifies the default layout for Applications.

Step 5: Getting Ready for writing the application code

At the final stage it going to be open development tool to write the application code.

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 5

Step 6: After Click on a virtual device icon, it going to be shown by default virtual
devices which are present on your SDK, or else need to create a virtual device by
clicking Create new Virtual device button

If your AVD is created successfully it means your environment is ready for Android
application development.

Step 7: Design the User Interface

Before Writing a Hello word code, you must know about XML tags.To write hello
word code, you should redirect to App>res>layout>Activity_main.xml. Drag the
RadioButton on the Activity.

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 6

Step 8: Modify the MainActivity.java

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 7

 A. Import necessary libraries

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.Toast;

B. Declare and Create a variable. Add the following code to main function.

RadioButton johnCena, randyOrton, goldBerg, romanReigns,

sheamus;
String selectedSuperStar;
Button submit;

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 8

 C. Add the code in the onCreate() Function

ohnCena = (RadioButton) findViewById(R.id.johnCena);

randyOrton = (RadioButton) findViewById(R.id.randyOrton);
goldBerg = (RadioButton) findViewById(R.id.goldBerg);
romanReigns = (RadioButton) findViewById(R.id.romanReigns);
sheamus = (RadioButton) findViewById(R.id.sheamus);
submit = (Button) findViewById(R.id.submitButton);
submit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (randyOrton.isChecked()) {
selectedSuperStar = randyOrton.getText().toString();
} else if (sheamus.isChecked()) {
selectedSuperStar = sheamus.getText().toString();
} else if (johnCena.isChecked()) {
selectedSuperStar = johnCena.getText().toString();
} else if (romanReigns.isChecked()) {
selectedSuperStar = romanReigns.getText().toString();
} else if (goldBerg.isChecked()) {
selectedSuperStar = goldBerg.getText().toString();
}
Toast.makeText(getApplicationContext(), selectedSuperStar,
Toast.LENGTH_LONG).show(); // print the value of selected
super star
}
});
}

D. Open res -> values -> strings.xml. In this step we open String file which
is used to store string data of the app.

<resources>

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 9

 <string name="app_name">RadioButtonExample</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="randyOrton">Randy Orton</string>
<string name="johnCena">John Cena</string>
<string name="romanReigns">Roman Reigns</string>
<string name="goldBerg">Gold Berg</string>
<string name="sheamus">Sheamus</string>
</resources>

Full MainActivity.java file code

Step 9: Running the Application.

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 10

Now run the App in Emulator and it will show you name of countries along with flags.
Below is the output screen:

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 11

PART II: CHECKBOX EXAMPLE

In this operation sheet, we display two Switches and one “submit”

button using background & other attributes as discussed earlier in this post. Whenever
you click on submit button the current state for both the Switch’s is displayed in
a Toast. Below is the final output, code and exampleexplained step by step:

Step 1. Create Android Application

The first step is to create a simple Android Application using Android studio. Search
for android in the program menu. When you click on Android studio icon, then click
“Start a new Android Studio Project”it will show screen as shown below:

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 12

Step 2: Type the application name

You can start your application development by calling start a new android studio
project. in a new installation frame should ask Application name, package
information and location of the project. Type the application name
“CheckboxExample”

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 13

Step 3: Select Target Android Device

After entered application name, it going to be called select the form factors your
application runs on, here need to specify Minimum SDK, in our tutorial, I have
declared as API23: Android 6.0(Mashmallow) −

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 14

Step 4: Choose an Activity

The next level of installation should contain selecting the activity to mobile, it
specifies the default layout for Applications.

Step 5: Getting Ready for writing the application code

At the final stage it going to be open development tool to write the application code.

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 15

Step 6: After Click on a virtual device icon, it going to be shown by default virtual
devices which are present on your SDK, or else need to create a virtual device by
clicking Create new Virtual device button

If your AVD is created successfully it means your environment is ready for Android
application development.

Step 7: Design the User Interface

Before Writing a Hello word code, you must know about XML tags.To write hello
word code, you should redirect to App>res>layout>Activity_main.xml. Drag the
CheckBox on the Activity.

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 16

Step 8: Modify the MainActivity.java

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 17

 A. Import necessary libraries

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.Toast;

B. Declare and Create a variable. Add the following code to main function.

CheckBox android, java, python, php, unity3D;

C. Add the code in the onCreate() Function

// initiate views
android = (CheckBox) findViewById(R.id.androidCheckBox);
android.setOnClickListener(this);
java = (CheckBox) findViewById(R.id.javaCheckBox);
java.setOnClickListener(this);
python = (CheckBox) findViewById(R.id.pythonCheckBox);
python.setOnClickListener(this);
php = (CheckBox) findViewById(R.id.phpCheckBox);
php.setOnClickListener(this);
unity3D = (CheckBox) findViewById(R.id.unityCheckBox);
unity3D.setOnClickListener(this);
}

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 18

@Override
public void onClick(View view) {

switch (view.getId()) {

case R.id.androidCheckBox:

if (android.isChecked())
Toast.makeText(getApplicationContext(), "Android",
Toast.LENGTH_LONG).show();
break;

case R.id.javaCheckBox:
if (java.isChecked())

Toast.makeText(getApplicationContext(), "Java",
Toast.LENGTH_LONG).show();
break;

case R.id.phpCheckBox:
if (php.isChecked())
Toast.makeText(getApplicationContext(), "PHP",
Toast.LENGTH_LONG).show();

break;
case R.id.pythonCheckBox:
if (python.isChecked())
Toast.makeText(getApplicationContext(), "Python",
Toast.LENGTH_LONG).show();
break;

case R.id.unityCheckBox:
if (unity3D.isChecked())
Toast.makeText(getApplicationContext(), "Unity 3D",
Toast.LENGTH_LONG).show();
break;
}
}

D. Open res -> values -> strings.xml. In this step we open String file which
is used to store string data of the app.

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 19

 <resources>
<string name="app_name">RadioButtonExample</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="randyOrton">Randy Orton</string>
<string name="johnCena">John Cena</string>
<string name="romanReigns">Roman Reigns</string>
<string name="goldBerg">Gold Berg</string>
<string name="sheamus">Sheamus</string>
</resources>

Full Code of MainActivity.java

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 20

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 21
Step 8: Run the Android Application

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 22

PART III: PROGRESSBAR EXAMPLE

Step 1. Create Android Application

The first step is to create a simple Android Application using Android studio. Search
for android in the program menu. When you click on Android studio icon, then click
“Start a new Android Studio Project”it will show screen as shown below:

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 23

Step 2: Type the application name

You can start your application development by calling start a new android studio
project. in a new installation frame should ask Application name, package
information and location of the project. Type the application name “ProgressBar”

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 24

Step 3: Select Target Android Device

After entered application name, it going to be called select the form factors your
application runs on, here need to specify Minimum SDK, in our tutorial, I have
declared as API23: Android 6.0(Mashmallow) −

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 25

Step 4: Choose an Activity

The next level of installation should contain selecting the activity to mobile, it
specifies the default layout for Applications.

Step 5: Getting Ready for writing the application code

At the final stage it going to be open development tool to write the application code.

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 26

Step 6: After Click on a virtual device icon, it going to be shown by default virtual
devices which are present on your SDK, or else need to create a virtual device by
clicking Create new Virtual device button

If your AVD is created successfully it means your environment is ready for Android
application development.

Step 7: Design the User Interface

Before Writing a Hello word code, you must know about XML tags.To write hello
word code, you should redirect to App>res>layout>Activity_main.xml. Drag the
ProgressBar on the Activity Screen.

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 27

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 28
Step 8: Modify the MainActivity.java

A. Import necessary libraries

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.Button;

B. Add the code in the onCreate() Function

// initiate progress bar and start button

final ProgressBar simpleProgressBar = (ProgressBar)
findViewById(R.id.simpleProgressBar);
Button startButton = (Button)
findViewById(R.id.startButton);
// perform click event on button
startButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// visible the progress bar

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 29

simpleProgressBar.setVisibility(View.VISIBLE);
}
});
}

Full MainActivity.java file code

Step 9: Running the Application.

Now run the App in Emulator and it will show you name of countries along with flags.
Below is the output screen:

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 30

Operation Sheet 3.4 Dr. Patrick D. Cerna Page 31