652 lines
9.6 KiB
Plaintext
652 lines
9.6 KiB
Plaintext
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
|
||
|
||
|