college/Summer-2024/CS-3443/Slides/txt/17_Android App Development - Rowdy Quiz V1.txt

Application
Programming
Hend Alkittawi

Android Development
Building Our First Android App

OUR FIRST ANDROID APPLICATION
-

What do you think we need to build this app?

Rowdy Quiz

Trivia Question Here

True

False
Next

OUR FIRST ANDROID APPLICATION
-

What do you think we need to build this app?
-

-

Model Objects
-

Question.java

-

QuizBank.java

View Objects
-

-

Rowdy Quiz

layout xml file

Controller Objects
-

Trivia Question Here

MainActivity.java
True

False
Next

OUR FIRST ANDROID APPLICATION

Rowdy Quiz

Trivia Question Here

True

False
Next

OUR FIRST ANDROID APPLICATION
-

Model Objects
-

After you create the project in Android
Studio, create a model package

-

In edu.usta.cs3443.projectname
-

right-click on the package

-

select New > Package

-

set the package name to model

-

create/place the model classes within
the model package

OUR FIRST ANDROID APPLICATION
-

View Objects
-

layout xml file

-

Set up the layout (xml or drag and drop)
-

Rowdy Quiz

LinearLayout (Vertical)
-

TextView - for Rowdy Quiz

-

TextView - for Trivia Question

-

LinearLayout (Horizontal)

-

-

Button - for True

-

Button - for False

Trivia Question Here

True

False

Button - for Next

Next

TIPS FOR WORKING WITH LAYOUT XML FILES
-

Views may have an integer id associated with them. These ids
are typically assigned in the layout XML files, and are used
to find specific views within the view tree.

-

Add id attributes for views that your code will be
interacting with
<TextView
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:padding ="24dp"
android:text="trivia question here!"
android:id="@+id/question_text"
/>

TIPS FOR WORKING WITH LAYOUT XML FILES
-

Add strings to the string.xml resource file

-

res > values > strings.xml
<resources >
<string name="app_name" >Rowdy Quiz</ string>
<string name="false_button" >False</ string>
<string name="true_button" >True</string>
<string name="next_button" >Next</string>
</resources >

-

Use these strings with your views
<TextView
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:padding ="24dp"
android:text="@string/app_name"
/>

<LinearLayout 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:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
android:text="@string/app_name" />
<TextView
android:id="@+id/question_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
android:text="trivia question here!" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/true_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
android:text="@string/true_button" />
<Button
android:id="@+id/false_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
android:text="@string/false_button" />
</LinearLayout>
<Button
android:id="@+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
android:text="@string/next_button" />
</LinearLayout>

activity_main.xml

Rowdy Quiz

Trivia Question Here

t

ex
n_t

tio

id:

s
que

to
but

True

n

ton

_

id:

e
tru

ut
e_b

als

f
id:

Next
on

id:

False

nex

t

tt
_bu

OUR FIRST ANDROID APPLICATION
-

Controller Objects
-

GUIs are built from GUI components called
views

-

A controller class manages the flow of data

Rowdy Quiz

between the model layer and the view layer
-

When the user interacts with GUIs, an event
object is create
-

The event object is dispatched to an event
handler (listener)

-

Trivia Question Here

A controller object listens and responds to
these events

True

False
Next

OUR FIRST ANDROID APPLICATION
-

Controller Objects
-

An Activity (controller) class utilizes the following to be
able to manage the flow of data, listen and respond to events
-

findViewById() method to get references to the inflated View
objects

-

getId() method to get the ID of a view

-

OnClickListener interface to set listeners on View objects to
respond to user actions

-

Rowdy Quiz
-

// some code is omitted, refer to full code on Github
public class MainActivity extends AppCompatActivity {
private QuizBank quizBank;

Controller Objects

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
createQuizBank();
displayQuestion();

manage data flow

Button trueButton = findViewById(R.id.true_button);
Button nextButton = findViewById(R.id.next_button);
trueButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(getAnswer())
// display a “Yay!” message
else
// display a “Try again!” message
} });
nextButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) { displayQuestion(); }
});

listen to events
respond to events

}
private void createQuizBank(){
quizBank = new QuizBank();
quizBank.loadQuestions();}

manage data flow

private void displayQuestion(){
quizBank.getCurrentQuestion();
TextView questionText = findViewById(R.id.question_text);
questionText.setText( getQuestion() ); }

manage data flow

private String getQuestion(){
return quizBank.getCurrentQuestionText(); }
private boolean getAnswer(){
return quizBank.getCurrentQuestionAnswer(); }
}

// some code is omitted, refer to full code on Github
public class MainActivity extends AppCompatActivity {
private QuizBank quizBank;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

nts

createQuizBank();
displayQuestion();

ve
o e
t
n

Button trueButton = findViewById(R.id.true_button);
te
lis
Button nextButton = findViewById(R.id.next_button);
trueButton.setOnClickListener(new View.OnClickListener() {
ts
ven
@Override
e
o
public void onClick(View view) {
d t
n
o
if(getAnswer())
p
res
// display a “Yay!” message
else
// display a “Try again!” message
} });
nextButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) { displayQuestion(); }
});
w

}
private void createQuizBank(){
quizBank = new QuizBank();
quizBank.loadQuestions();}

age

man

a
dat

flo

low

age

private void displayQuestion(){
man
quizBank.getCurrentQuestion();
TextView questionText = findViewById(R.id.question_text);
questionText.setText( getQuestion() ); }
private String getQuestion(){
return quizBank.getCurrentQuestionText(); }
private boolean getAnswer(){
return quizBank.getCurrentQuestionAnswer(); }
}

a f
dat

Rowdy Quiz

Trivia Question Here

t

ex
n_t

tio

id:

s
que

e_b

tru
:
d
i

id:

True

on
utt
id:

n

tto

bu
se_

fal

ton

ut
t_b

nex

False
Next

OUR FIRST ANDROID APPLICATION
-

Working with Toasts
-

a Toast is a pop-up message that informs
the user of something but does not require
any input or action

-

to create a Toast message use the makeText()
method

-

the show() method shows the Toast view on the
screen

Toast.makeText(view.getContext(), "Yaaay!", Toast.LENGTH_LONG).show();

// some code is omitted, refer to full code on Github
public class MainActivity extends AppCompatActivity {
private QuizBank quizBank;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// some code is omitted, refer to full code on Github
public class QuizBank {
private ArrayList<Question> questions;
private int qIndex;
private Question currentQuestion;
public QuizBank(){
questions = new ArrayList<Question>();
qIndex = 0;
currentQuestion = null; }

createQuizBank();
displayQuestion();
Button trueButton = findViewById(R.id.true_button);
Button nextButton = findViewById(R.id.next_button);
trueButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(getAnswer())
// display a “Yay!” message
else
// display a “Try again!” message
} });
nextButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) { displayQuestion(); }
});

public int getqIndex() { return qIndex; }
public void setqIndex(int qIndex) { this.qIndex = qIndex; }
public Question getCurrentQuestion(){
if(getqIndex() >= 0 && getqIndex() < questions.size() ) {
currentQuestion = questions.get(getqIndex());
setqIndex(getqIndex() + 1);
} else{
setqIndex(0);
currentQuestion = questions.get(getqIndex());
}
return currentQuestion;
}

}
private void createQuizBank(){
quizBank = new QuizBank();
quizBank.loadQuestions();}

public String getCurrentQuestionText(){
return currentQuestion.getQuestion();}
public boolean getCurrentQuestionAnswer(){
return currentQuestion.getAnswer(); }

private void displayQuestion(){
quizBank.getCurrentQuestion();
TextView questionText = findViewById(R.id.question_text);
questionText.setText( getQuestion() ); }

public void loadQuestions() {
addQuestion(new Question("Is our mascot a roadrunner", true));
addQuestion(new Question("Is UTSA in San Antonio", true));
}

private String getQuestion(){
return quizBank.getCurrentQuestionText(); }
private boolean getAnswer(){
return quizBank.getCurrentQuestionAnswer(); }
}

public void addQuestion(Question question){
questions.add(question);
}
}

CODE DEMO
-

Create and run the
Rowdy Quiz App in
Android Studio

DO YOU HAVE ANY
QUESTIONS?

THANK
YOU!

@

hend.alkittawi@utsa.edu

By Appointment
Online