Create yourfirstandroidapppdf

  • View
    6.149

  • Download
    1

Embed Size (px)

DESCRIPTION

 

Text of Create yourfirstandroidapppdf

Microsoft Word - CreateYourFirstAndroidApp.docx

Creating your first app ( Quiz) In this tutorial, you will build your first application for Android mobile phones. You probably wont 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 lets 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, lets 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. Dont 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