Create yourfirstandroidapppdf
- 1. Creating
your
first
app
(
Quiz)
In
this
tutorial,
you
will
build
your
first
application
for
Android
mobile
phones.
You
probably
won’t understand everything that
you are doing, and you may feel lost just going through the
steps. But going through the steps is enough for now. The
details will be explained later.
Our
first
application
is
a
simple
Quiz.
Users
will
be
prompted
to
answer
questions
and
the
app
(Quiz)
should
check
if
the
answer
is
correct
and
display
the
appropriate
message.
A
quick
sketch
of
how
the
app
might
look
like
is
shown
below.
Check Answer
Next Question
What is your best class?
Check Answer
Next Question
What is your best class?
IST380
Correct Answer
Type answer
click “Check Answer”
- 2. Create A New Android Project:
1. Click New in the toolbar.
2. In the window that appears, open
the Android folder, select Android Application
Project, and click Next.
- 3. Android
Project
File
Structure
For
more
details
please
see
(http://developer.android.com/guide/developing/projects/index.html)
Application Fundamentals
There
are
four
different
types
of
components
that
make
an
android
application.
Each
type
serves
a
distinct
purpose
and
has
a
distinct
lifecycle
that
defines
how
the
component
is
created
and
destroyed.
Please
see
http://developer.android.com/guide/topics/fundamentals.html
Here
are
the
four
types
of
application
components:
activities,
services,
content
providers
and
broadcast
receivers.
For
the
scope
of
this
tutorial,
we
will
focus
on
activities.
(From Android Developer Website)
Activities
An activity represents a single screen with a user interface. For example, an email
application might have one activity that shows a list of new emails, another activity to
compose an email, and another activity for reading emails. Although the activities work
together to form a cohesive user experience in the email application, each one is
independent of the others. As such, a different application can start any one of these
activities (if the email application allows it). For example, a camera application can start
the activity in the email application that composes new mail, in
order for the user to share a picture.
Creating the user interface
In android, user interface components can be created and
stored in an xml file which can be loaded to an activity at
runtime. For example, the Quiz application will start from
the main activity (Quiz class) which loads the interface
component stored in main.xml.
- 4. To create the required interface for our application, expand the folders “res” ,
then “layout” and double click on main.xml.
In the right, you can see a toolbox with many
view and elements you can add to your
interface. Select the “Hello World, Quiz!” text
in the black screen by clicking on it and then
delete it.
Now let’s add a text element to display the
questions. locate a TextView element from the
toolbox and drag it to the black screen. Right
click on it and select layout Width and set it to
“Match parent”. Then right click on it again and
select Show In -> Properties. When the
Properties window opens locate the “Id”
property and change its value
from @+id/TextView01
to @+id/QuestionTextView
Also, locate the Text property and empty its
value.
Drag an EditText element from the toolbox and place it below the TextView you
just added. Change its layout width to match parent and change its id
from @+id/EditText01
to @+id/AnswerText
Drag a button from the toolbox and place it below the AnswerText element you
just added. Change its layout width to match parent and change its id
from @+id/Button01
to @+id/AnswerButton
Change its text to “Check Answer”
Drag a TextView element from the toolbox and place it below the button you just
added. Change its layout width to match parent and change its id
from @+id/TextView01
to @+id/AnswerTextView
Locate the Text property and empty its value.
Drag a button from the toolbox and place it below the AnswerTextView element
you just added. Change its layout width to match parent and change its id
- 6. Creating Events and Functions
After creating the interface, we need to create functions to:
1. Initialize the questions and answers.
2. Handle use click on the buttons.
In Android, your application usually starts from your main Activity that you named
when creating the project. Our main activity is Quiz class located in the
scr/edu.cgu.ist380.[abedy].quiz folder. Double click the Quiz.java file. You should
see the following code:
This simply means that when this activity is created, it will load “main” as its
content. “main” here refers to the main.xml file we just modified when creating
our interface.
The first thing we need to do is to create properties and variables for :
3. Storing the questions and answers and current question index
4. Change the text for Question and Answer TextViews
5. Reading text on the answer TextEdit.
6. Registering events to the buttons
- 7. To accomplish this, copy and paste the following code before to OnCreate
method :
private int currentQuestion;
private String [] questions;
private String [] answers;
private Button answerButton;
private Button questionButton;
private TextView questionView;
private TextView answerView;
private EditText answerText;
Now, let’s create an init function that initializes
7. the two arrays that holds/stores our questions and answers.
8. Create reference to UI elements
9. Register click events to both buttons
To do this, copy and past the following method under the OnCreate method.
public void init()
{
questions = new String[]{"What is the capital of Egypt?",
"What class are you in right now?"};
answers = new String[]{"Cairo","IST380"};
currentQuestion = -1;
answerButton = (Button)findViewById(R.id.AnswerButton);
questionButton = (Button)findViewById(R.id.QuestionButton);
questionView = (TextView)
findViewById(R.id.QuestionTextView);
answerView = (TextView) findViewById(R.id.AnswerTextView);
answerText = (EditText) findViewById(R.id.AnswerText);
answerButton.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
checkAnswer();
}});
questionButton.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
showQuestion();
}});
}
/*
* This method
- 8. * 1: increment currentQuestion index
* 2: check if it is equal to the size of the array and rest
if necessary
* 3: display the question at currentQuestion index in
question view
* 4: Empty answer view
*/
public void showQuestion()
{
currentQuestion++;
if(currentQuestion == questions.length)
currentQuestion =0;
questionView.setText(questions[currentQuestion]);
answerView.setText("");
answerText.setText("");
}
/*
* This method return true if the answer equals to correct
answer
* (Ignoring case)
*/
public boolean isCorrect(String answer)
{
return (answer.equalsIgnoreCase(answers[currentQuestion]));
}
/* this method :
* 1: Read the text ( answer) from the answerTextEdit
* 2: call the isCorrect method
* 3: display the appropriate message.
*/
public void checkAnswer()
{
String answer = answerText.getText().toString();
if(isCorrect(answer))
answerView.setText("You're right!");
else
answerView.setText("Sorry, the correct answer is
"+answers[currentQuestion]);
}
Add a call to the init function inside the OnCreate method as shown below
- 9. Important Notes:
• How we find elements in the interface by using findViewById method.
• How text can be set and read from TextView and EditText elements.
- 10. Build and Run
To run your Android application, you can either install it on a
compatible android phone or through the Android Emulator
or AVD (Android Virtual Device). For this tutorial, we will run
our quiz application on the emulator.
Create an android emulator (ADT)
On Eclipse, click “Window” -> “Android SDK and ADT
Manager”. Then, click “New” to create an emulator as shown
in the screen below, and start your AVD.
- 11. Running the Quiz Application
On Eclipse, right click on the Quiz project in “Package
Explorer” and select Run As -> Android Application. Select
your AVD from the device list and click run. Your application
will start on the Emulator.
Don’t forget to commit your changes to your repository by
right clicking the Quiz project in “Package Explorer” and
select Team-> Remote -> Push…
- 12.
Test you knowledge!
Now that you have created your first application, try to :
• Answer some questions and check your answers
• Change the number of questions and answers
• Show the number of questions in the screen
• Find a way to calculate user scores