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”

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.    

         

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.

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

from @+id/Button01 to @+id/QuestionButton Change its text to “Show Next Question”. Now that you are done creating the interface for the quiz application, your application should look similar to the screenshot to right.

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

 

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

* 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

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.

 

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.

 

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…

                         

 

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