COLLEGE OF COMPUTER STUDIES

IT0079
(MOBILE APPLICATION DEVELOPMENT 1)

EXERCISE

6.2
Static Login Account

Student Name / Group Hanna Rose A. Galinato

Name:
Name Role
Members (if Group):

Section:

Professor:
I. PROGRAM OUTCOME/S (PO) ADDRESSED BY THE LABORATORY EXERCISE
 Understand best practices and standards and their applications. [PO: m]

II. COURSE LEARNING OUTCOME/S (CLO) ADDRESSED BY THE LABORATORY EXERCISE

 Program mobile applications for the Android operating system that use basic and advanced mobile
computing software framework [CLO: 2]

III. INTENDED LEARNING OUTCOME/S (ILO) OF THE LABORATORY EXERCISE

At the end of this exercise, students must be able to:
 Construct an application that will display responsive messages
 Manage toast view that will be display on the screen
 Create a customize dialog for user input and displaying messages
 Customize toast view and dialog message
 Design a good dialog interface and toast view

IV. BACKGROUND INFORMATION

A dialog is a small window that prompts the user to make a decision or enter additional information. A dialog
does not fill the screen and is normally used for modal events that require users to take an action before they
can proceed.

IT0079 Mobile Application Development 1 Page 2 of 16

 Dialog Design

1. Optional title region

The title introduces the content of your dialog. It can, for example, identify the name of a setting that the user is
about to change, or request a decision.

2. Content area

IT0079 Mobile Application Development 1 Page 3 of 16

 Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as sliders, text fields,
checkboxes, or radio buttons that allow the user to change app or system settings. In other cases, such as
alerts, the content may consist solely of text that provides further context for a user decision.

3. Action buttons
Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely action. However, if
the options consist of specific actions such as Close or Wait rather than a confirmation or cancellation of the
action described in the content, then all the buttons should be active verbs. Order actions following these rules:
• The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the
previous state.
• The affirmative actions are on the right. Affirmative actions continue progress toward the user goal
that triggered the dialog.

Alerts
Alerts inform the user about a situation that requires their confirmation or acknowledgement before
proceeding. They differ slightly in appearance based upon the severity and impact of the message conveyed.

Alerts without title bars

Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed up
succinctly in a sentence or two. The content area should either ask a question (such as "Delete this
conversation?") or make a clear statement whose relationship to the action buttons is obvious.

Alerts with title bars

IT0079 Mobile Application Development 1 Page 4 of 16

 Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving potential loss
of data, connectivity, extra charges, and so on requires a clear question or statement (the title) and some
additional explanation (in the content area).

Creating Dialog
The Dialog class is the base class for dialogs, but you should avoid instantiating Dialog directly. Instead, use
one of the following subclasses:
AlertDialog A dialog that can show a title, up to three buttons, a list of selectable items, or a custom layout.
DatePickerDialog or TimePickerDialog A dialog with a pre-defined UI that allows the user to select a date or
time

These classes define the style and structure for your dialog, but you should use a DialogFragment as a container
for your dialog. The DialogFragment class provides all the controls you need to create your dialog and manage
its appearance, instead of calling methods on the Dialog object.

Building an Alert Dialog

IT0079 Mobile Application Development 1 Page 5 of 16

 TitleThis is optional and should be used only when the content area is occupied by a detailed message, a list, or
custom layout. If you need to state a simple message or question (such as the dialog in figure 1), you don't need
a title.
Content areaThis can display a message, a list, or other custom layout.
Action buttonsThere should be no more than three action buttons in a dialog.

Toast
A toast provides simple feedback about an operation in a small popup. It only fills the amount of space
required for the message and the current activity remains visible and interactive. For example, navigating away
from an email before you send it triggers a "Draft saved" toast to let you know that you can continue editing later.
Toasts automatically disappear after a timeout.

IT0079 Mobile Application Development 1 Page 6 of 16

 Constructing Toast
First, instantiate a Toast object with one of the makeText() methods. This method takes three parameters: the
application Context, the text message, and the duration for the toast. It returns a properly initialized Toast object.
You can display the toast notification with show().

V. GRADING SYSTEM / RUBRIC

Program (50 pts) (Excellent) (Good) (Fair) (Poor)

Program execution Program executes Program executes Program executes Program does not

IT0079 Mobile Application Development 1 Page 7 of 16

(20pts) correctly with no with less than 3 with more than 3 execute (10 – 11)
syntax or runtime errors (15 – 17 ) errors (12 – 14)
errors (18 – 20)
Correct output Program displays Output has minor Output has Output is incorrect
(20pts) correct output with errors (15 – 17) multiple errors (12 (10 - 11)
no errors (18 – 20) – 14 )
Design of output Program displays Program displays Program does not Output is poorly
(10pts) more than minimally display the designed (5)
expected (10) expected output (8 required output (6-
– 9) 7)
Design of logic Program is Program has slight Program has Program is
(20pts) logically well logic errors that do significant logic incorrect (10 - 11)
designed (18 – 20) no significantly errors (12 – 14 )
affect the results
(15 – 17)
Standards Program is Few inappropriate Several Program is poorly
(20pts) stylistically well design choices inappropriate written (10 - 11)
designed (18 – 20) (i.e. poor variable design choices
names, improper (i.e. poor variable
indentation) (15 – names, improper
17) indentation) (12 –
14 )
Delivery The program was The program was The code was The code was
(10pts) delivered on time. delivered within a within 2 weeks of more than 2 weeks
(10) week of the due the due date. (6 – overdue (5)
date. (8 – 9) 7)

VI. LABORATORY ACTIVITY

1. Create a new Android Project.

Project Name: AndroidAppFive

Activity Name (Main): MainActivity

2. Design the main activity layout

a. Add string values in strings.xml (res/values folder).

IT0079 Mobile Application Development 1 Page 8 of 16

 b. Add a button in activity_main layout and set the id to btnShowLogin

Graphical Layout

xml Code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<Button
android:id="@+id/btnShowLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="19dp"
android:layout_marginTop="17dp"
android:text="@string/login"
android:onClick="showLogin"
/>

</RelativeLayout>

3. Create the customized xml layout for the dialog

a. Create a new xml layout under res/layout folder and name it

layout_login.xml

IT0079 Mobile Application Development 1 Page 9 of 16

 b. Write the code for layout_login as shown below

Graphical Layout

xml Code

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="@drawable/ic_launcher"
android:layout_width="match_parent"
android:layout_height="64dp"
android:scaleType="center"
android:background="#000"
android:contentDescription="@string/app_name" />
<EditText
android:id="@+id/username"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginBottom="4dp"
android:hint="@string/hint_username" />
<EditText
android:id="@+id/password"
android:inputType="textPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginBottom="16dp"
android:fontFamily="sans-serif"
android:hint="@string/hint_password"/>
</LinearLayout>

IT0079 Mobile Application Development 1 Page 10 of 16

 4. Write the java codes for the program

a. Create a context that will hold the main context of the program

b. Write the inner class defining the dialog fragment of the program as shown
below.

public static class LoginDialogFragment extends DialogFragment {

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// Use the Builder class for convenient dialog construction
AlertDialog.Builder builder = new
AlertDialog.Builder(getActivity());
LayoutInflater inflater = getActivity().getLayoutInflater();
View v = inflater.inflate(R.layout.layout_login, null);
final EditText etUsername = (EditText)
v.findViewById(R.id.username);
final EditText etPassword = (EditText)
v.findViewById(R.id.password);
builder.setView(v)
.setPositiveButton(R.string.login, new
DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int
id) {
String username, password;
username = etUsername.getText().toString();
password = etPassword.getText().toString();
String msg;
if(username.equalsIgnoreCase("abcd") &&
password.equalsIgnoreCase("1234")){
msg = "Access Granted";
} else {
msg = "Access Denied";
}
Toast.makeText(context, msg,
Toast.LENGTH_SHORT).show();
}
})
.setNegativeButton(R.string.cancel,
new DialogInterface.OnClickListener() {

IT0079 Mobile Application Development 1 Page 11 of 16

 public void onClick(DialogInterface dialog,
int id) {
// User cancelled the dialog
}
});
// Create the AlertDialog object and return it
return builder.create();
}
}

c. Write the method that will show the dialog fragment

public void showLogin(View v){

DialogFragment loginFragment = new LoginDialogFragment();
loginFragment.show(getFragmentManager(), "login");
}

For the complete code:

package com.example.androidappsix;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.app.DialogFragment;
import android.content.Context;
import android.content.DialogInterface;

public class MainActivity extends Activity {

static Context context;

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

public void showLogin(View v){

DialogFragment loginFragment = new LoginDialogFragment();
loginFragment.show(getFragmentManager(), "login");
}

IT0079 Mobile Application Development 1 Page 12 of 16

 //inner class
public static class LoginDialogFragment extends DialogFragment {
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// Use the Builder class for convenient dialog construction
AlertDialog.Builder builder = new
AlertDialog.Builder(getActivity());
LayoutInflater inflater = getActivity().getLayoutInflater();
View v = inflater.inflate(R.layout.layout_login, null);
final EditText etUsername = (EditText)
v.findViewById(R.id.username);
final EditText etPassword = (EditText)
v.findViewById(R.id.password);
builder.setView(v)
.setPositiveButton(R.string.login, new
DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int
id) {
String username, password;
username = etUsername.getText().toString();
password = etPassword.getText().toString();
String msg;
if(username.equalsIgnoreCase("abcd") &&
password.equalsIgnoreCase("1234")){
msg = "Access Granted";
} else {
msg = "Access Denied";
}
Toast.makeText(context, msg,
Toast.LENGTH_SHORT).show();
}
})
.setNegativeButton(R.string.cancel, new
DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int
id) {
// User cancelled the dialog
}
});
// Create the AlertDialog object and return it
return builder.create();
}
}

5. Test and run the program

Program Output 1: Program Output 2:

IT0079 Mobile Application Development 1 Page 13 of 16

 Valid Account Inavalid Account

VII. QUESTION AND ANSWER

IT0079 Mobile Application Development 1 Page 14 of 16

 Briefly answer the questions below. Avoid erasures. For group activity, specify the name of GROUP
MEMBER/s who answered the question. Do not forget to include the source for all NON-ORIGINAL
IDEAS.

 When do think that a dialog can be useful

dialog is a small window that prompts the user to make a decision or enter additional information.
A dialog does not fill the screen and is normally used for modal events that require users to take
an action before they can proceed. Dialogs inform users about a task and can contain critical
information, require decisions, or involve multiple tasks.

Dialogs |. (2021, October 27). Android Developers.

https://developer.android.com/guide/topics/ui/dialogs

 Explain in details how to customize a dialog

To add action buttons like those in figure 2, call the setPositiveButton() and setNegativeButton()
methods:
The set...Button() methods require a title for the button (supplied by a string resource) and a
DialogInterface.OnClickListener that defines the action to take when the user presses the button.

There are three kinds of lists available with the AlertDialog APIs:

A traditional single-choice list

A persistent single-choice list (radio buttons)
A persistent multiple-choice list (checkboxes)
To create a single-choice list like the one in figure 3, use the setItems() method

Dialogs |. (2021, October 27). Android Developers.

https://developer.android.com/guide/topics/ui/dialogs

 How many action button can a dialog have?

two actions - Dialogs should contain a maximum of two actions. If a single action is provided, it
must be an acknowledgement action.

IT0079 Mobile Application Development 1 Page 15 of 16

VIII. REFERENCES

 Horton, J. (2018). Android Programming for Beginners: Build in-depth, full-featured Android 9 Pie
apps starting from zero programming experience, 2nd Edition. Packt Publishing
 Franceschi, H. J. (2018). Android App Development 1st Edition.
 Iversen, J., Eierman, M. (2018). Mobile App Development for iOS and Android, Edition 2.0. Prospect
Press, Inc.
 Phillips, B., Stewart, C., Marsicano, K. (2017). Android Programming: The Big Nerd Ranch Guide
(3rd Edition) (Big Nerd Ranch Guides) 3rd Edition.
 Dawn, G. (2017). Head First Android Development: A Brain-Friendly Guide. O' Reilly Media, Inc.
 Drongelen, M., Dennis, A., Garabedian, R. (2017). Lean Mobile App Development: Apply Lean
startup methodologies to develop successful iOS and Android apps. Packt Publishing
 Miller, C. (2016), Cross-platform Localization for Native Mobile Apps with Xamarin
 Beer, Paula(2015), Hello app inventor: android programming for kids and the rest of us.
 Deborah Gonzalez (2015), Managing Online Risk: Apps, Mobile, And Social Media Security

Online Sources:
http://www.developer.android.com
http://www.android.com
http://www.onefeu.instructure.com

Courseware Materials available at http://www.onefeu.instructure.com

IT0079 Mobile Application Development 1 Page 16 of 16