Step By Step Guide to Building An Android App Using Eclipse

faribasiddiq's Avatar author of Step By Step Guide to Building An Android App Using Eclipse
In this tutorial, we will see how to get started with your first android project and understand the project structure in Eclipse with a basic quiz application..
Nowadays use of smartphones has become very popular among people as smartphones facilitate the use of numerous applications. This facilitates users in a diversified way and also creates a lot of entertainment options. Android is a famous smartphone operating system. So the skill of developing of android application is very useful to thrive working spheres. In this tutorial, we are going to discuss android project structure and a very basic quiz application.

Every android project contains source codes, resources, configuration files etc. The projects follow some directory structure to store these files. Now, we are going to create a new project and then discuss the project structure.

Creating project



Open eclipse editor. Then follow the steps given below:

Step 1: Select File > New > Other


Figure 1 : Create New Application

Step 2: Select Android Application Project. Click Next.


Figure 2 : Select android application project

Step 3: Name the application, project and package. Select Build SDK and Minimum Required SDK from dropdown list. Your project will be built in the selected built sdk version. Minimum required sdk is selected mainly for backward compatibility. Your application will need the selected sdk version or upper version than this to run. Then click Next.


Figure 3 : Input application name, project name , package name and sdk version

Here, we have named our application, package name under which the application will run, build sdk version and minimum sdk version. Minimum sdk version is required to make your application backward compatible, i.e. to run into previous android OS based device.

Step 4: Select launcher icon. For now, we will use the default icon. Click Next.


Figure 4: Select launcher icon

Step 5: Create activity. It is the place where your application starts. By default, a bank activity is selected. Click Next.


Figure 5 : Create Activity

Step 6: Name your activity and layout. Layout is the place where you make application interface design. Click finish.


Figure 6: Input activity name, layout name and title

Your application has been created. Now we shall look up to the structure of the project.

Understanding Project Structure



In this section, we will discuss about some basic structure we may need to follow.


Figure 7 : Project structure

You can see that the following folders have been created in your project path.
  • Src: This folder contains the java source files. The source files are under a package, which you configure while adding a new source file. So, this folder can have multiple packages, each of which can contain source files.
  • Gen: Android Development tool (ADT) generates some resource file in your project. The files are:
    • BuildConfig.java: It contains information of build configuration.
    • R.java: Every time you create an element for the application user interface, it is given an id for future use. This file contains the id for different elements.
  • Build SDK version: Remember, we have selected a build sdk version while creating the project. The android jar file to build your project according to the selected version remains here.
  • Assets: This folder contains the graphics, background music files.
  • Bin: This is build output directory. You can find the apk file of your application here.
  • libs: It contains third-party library.
  • Res: This folder contains resource files which are used in your application. It has some sub folder to manage these resources.
    • Drawable-hdpi: Stores high dpi images of the application.
    • Drawable-ldpi: Stores low dpi images of the application.
    • Drawable-mdpi: Stores medium dpi images of the application.
    • Drawable-xhdpi: Stores extra high dpi images of the application.
    • Layout: Stores the interface design of your application for different activities. The layout files are stored in xml format. You can see the design view of your application here.
    • Menu: Stores the design of application menus.
  • AndroidManifest.xml: It is the backbone of your application. The whole configuration of your application is described here.
    • Package: The package name of the application.
    • Uses-sdk: Minimum sdk version to run the application and target sdk version.
    • Resources: Application’s icon, name, theme path.
    • Activity: List of activities and their configuration.
Let’s look at the manifest file of our application we have just created.
Code:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.testquiz"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".TestQuizActivity"
            android:label="@string/title_activity_test_quiz" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>
Let’s try to understand the configuration stated here.
  • Package: Here remains the package name of the application
  • Uses-sdk: Contains the minimum sdk version and the target sdk version
  • activity: Contains the activity names and their configuration
proguard-project.txt: Code optimization is performed here. It also enhances the security of your application making it harder for reverse engineering.

Project.properties: Stores the information of target version of the application.

Sample: A Basic Quiz Application:



In this section, we will learn how to make a quiz application in android. A very basic approach will be discussed, which you can further customize according to your requirement.

Let’s go to our TestQuiz application. Already there is some default code and layout in this application. Right click on your application-> Run as-> Android Application.


Figure 8: Run application

See the output in emulator or android device. Till now, we have done no coding and no design, so there will be nothing in the screen except the default layout.

Consider the TestQuizActivity.java file in the src folder. Here is some default code.
Code:
public class TestQuizActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout. activity_test_quiz);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu. activity_test_quiz, menu);
        return true;
    }
}
This piece of code set activity_test_main.xml file of res-> layout as the layout of the application and activity_test_main.xml file of res->menu as menu of the application.
Now, come to our approach for the quiz application. We want to make an application with three (3) questions and let the user to choose the answer. After completing, the user will press submit button and we will show him/ her the score. The design will be something like the following:
  1. Who won the fifa world cup in 2002?
    • Germany
    • Brazil
    • Italy
  2. Who won the golden ball in fifa 2002 world cup?
    • Ronaldo
    • Jidane
    • Oliver Kann
  3. 3. Who won the golden boot in fifa 2002 world cup?
    • Ronaldo
    • Mireslov Klosa
    • Devor Sukar
Redesign layout file

To achieve our target, we need three (3) text views for three (3) questions, three (3) radio groups and nine (9) radio buttons (3 for each radio group). Consider our layout file:

Code:
<ScrollView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:scrollbars="vertical" >
<TableLayout            
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:shrinkColumns="*"  android:stretchColumns="*" android:background="#000000">
                        <!-- Row 1 with single column -->
                        <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent"
                            android:gravity="center_horizontal">
                            <TextView
                                android:layout_width="match_parent" android:layout_height="wrap_content"
                                android:textSize="18dp" android:text="1. Who won the world cup 2002?"  android:layout_span="4"
                                android:padding="18dip"
                                android:textColor="#ffffff"/>
                       </TableRow>
                        <!-- Row 2 with 3 columns -->
                        <TableRow
                            android:id="@+id/tableRow1"
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent">
                            <RadioGroup
            android:id="@+id/answer1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.4" >
            <RadioButton
                android:id="@+id/answer1A"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:text="Germany" />
            <RadioButton
                android:id="@+id/answer1B"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:text="Brazil" />
            <RadioButton
                android:id="@+id/answer1C"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:text="Italy" />
        </RadioGroup>
                        </TableRow>
                      <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent"
                            android:gravity="center_horizontal">
                            <TextView
                                android:layout_width="match_parent" android:layout_height="wrap_content"
                                android:textSize="18dp" android:text="2. Who won the golden ball in 2002 world cup?"  android:layout_span="4"
                                  android:padding="18dip"
                                android:textColor="#ffffff"/>
                       </TableRow>
                        <!-- Row 2 with 3 columns -->
                        <TableRow
                            android:id="@+id/tableRow1"
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent">
                            <RadioGroup
            android:id="@+id/answer2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.4" >
            <RadioButton
                android:id="@+id/answer2A"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:text="Ronaldo" />
            <RadioButton
                android:id="@+id/answer2B"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:text="Jidane" />
            <RadioButton
                android:id="@+id/answer2C"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:text="Oliver Kann" />
        </RadioGroup>
                        </TableRow>
                         <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent"
                            android:gravity="center_horizontal">
                            <TextView
                                android:layout_width="match_parent" android:layout_height="wrap_content"
                                android:textSize="18dp" android:text="3. Who won the golden boot in 2002 world cup?"  android:layout_span="4"
                                 android:padding="18dip"
                                android:textColor="#ffffff"/>
                       </TableRow>
                        <!-- Row 2 with 3 columns -->
                        <TableRow
                            android:id="@+id/tableRow1"
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent">
                            <RadioGroup
            android:id="@+id/answer3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.4" >
            <RadioButton
                android:id="@+id/answer3A"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:text="Ronaldo" />
            <RadioButton
                android:id="@+id/answer3B"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:text="Mireslov Klosa" />
            <RadioButton
                android:id="@+id/answer3C"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:text="Devor Sukar" />
        </RadioGroup>
                        </TableRow>
                         <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent"
                            android:gravity="center_horizontal">
                            <Button 
                                android:id="@+id/submit"
      							  android:layout_width="wrap_content"
      							  android:layout_height="wrap_content"
      							  android:layout_alignParentLeft="true"
       								 android:layout_alignParentTop="true"
       							 android:gravity="center"
        							android:text="Submit"
                              	  />
                       </TableRow>
      </TableLayout>
</ScrollView>
ScrollView is used to give the user scrolling facility. We have used Tablelayout here. There are 6 rows in the Tablelayout, tagged as TableRow. Every question is placed in a textview, and options are given in Radiobutton, every three Radiobuttons are grouped in a RadioGroup . One button, tagged as Button is added to handle the completion of the quiz.
So, our design is ready. We have to implement our code to handle this design.

TestQuizActivity.java

Declare four(4) variables to store score and answers of the question given by the user.

int score,ans1,ans2, ans3;

Create a radiogroup object and map it to the first radio group of the layout.

RadioGroup champ=(RadioGroup)findViewById(R.id.answer1);

Add check change listener event to the radio group. When any radio button is selected, the event is handled by this listener. Here, we keep track which option is selected by user.

Code:
champ.setOnCheckedChangeListener(new OnCheckedChangeListener() {
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		// TODO Auto-generated method stub
		switch(checkedId) {
			case R.id.answer1A:
			                                  ans1 =1;
			break;
			case R.id.answer1B:
			                                  ans1 =2;
			break;
			case R.id.answer1C:
			                                  ans1 =3;
			break;
		}
	}
});
In the switch option, selection is checked against three options. Id of the three options is answer1A, answer1B and answer1C, and these are referenced by R.id.answer1A, R.id.answer1B and R.id.answer1C respectively.

Similarly, two other radio group objects are created and mapped with the resource.
Code:
RadioGroup gBall=(RadioGroup)findViewById(R.id.answer2);
RadioGroup gBoot = (RadioGroup)findViewById(R.id.answer3);
Selection event of user for the two questions is handled and score is updated like the previous one.

Create a Button object
Code:
private Button btnSubmitQuiz;
Map the button object with the layout button

Code:
btnSubmitQuiz = (Button) findViewById(R.id.submit);
Add a listener event for the button object. When submit button is clicked, the listener event will be executed and perform operation according to our requirement. In this application, we have increased score if user selected the right option for each question. The right answers for the three questions are 2nd, 3rd and 1st option respectively.

Before that, initialize score to zero(0) value.

Code:
btnSubmitQuiz.setOnClickListener(new OnClickListener() {
	public void onClick(View v) {
		// TODO Auto-generated method stub
		score =0;
		if(ans1 == 2)
		                                  score++;
		if(ans2 == 3)
		                                  score++;
		if(ans3 == 1)
		                                  score++;
		Toast.makeText(TestQuizActivity.this, "Your score is:"+score+" out of 3", 5).show();
	}
});
Here is the full code of TestQuizActivity.java file.

Code:
package com.example.testquiz;
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
import android.widget.RadioGroup.OnCheckedChangeListener;
public class TestQuizActivity extends Activity {
	private Button btnSubmitQuiz;
	int score,ans1,ans2, ans3;
	@Override
	    public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_test_quiz);
		RadioGroup champ=(RadioGroup)findViewById(R.id.answer1);
		champ.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				// TODO Auto-generated method stub
				switch(checkedId) {
					case R.id.answer1A:
					                                  ans1 =1;
					break;
					case R.id.answer1B:
					                                  ans1 =2;
					//score++; 
					break;
					case R.id.answer1C:
					                                  ans1 =3;
					break;
				}
			}
		});
		RadioGroup gBall=(RadioGroup)findViewById(R.id.answer2);
		gBall.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				// TODO Auto-generated method stub
				switch(checkedId) {
					case R.id.answer2A:
					                                  ans2 = 1;
					break;
					case R.id.answer2B:
					                                  ans2 = 2;
					break;
					case R.id.answer2C:
					                                  ans2 = 3;
					break;
				}
			}
		});
		RadioGroup gBoot = (RadioGroup)findViewById(R.id.answer3);
		gBoot.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				// TODO Auto-generated method stub
				switch(checkedId) {
					case R.id.answer3A:
					                                  ans3 = 1;
					break;
					case R.id.answer3B:
					                                  ans3 = 2;
					break;
					case R.id.answer3C:
					                                  ans3 =3;
					break;
				}
			}
		});
		btnSubmitQuiz = (Button) findViewById(R.id.submit);
		btnSubmitQuiz.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				score =0;
				// TODO Auto-generated method stub
				if(ans1 == 2)
				                                  score++;
				if(ans2 == 3)
				                                  score++;
				if(ans3 == 1)
				                                  score++;
				Toast.makeText(TestQuizActivity.this, "Your score is:"+score+" out of 3", 5).show();
			}
		});
	}
	@Override
	    public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.activity_test_quiz, menu);
		return true;
	}
}
Output :


Figure1: Start the application and display questions


Figure 2 : Scroll down and display rest of the questions


Figure 3 : Select answer


Figure 4 : Select answer(scrolling down)


Figure5 : Show score

If you want to test your application in different devices, you can take the apk file of your project and install it in the device. The apk file will be found in TestQuiz->bin->res->TestQuiz.apk

We have discussed how to make a very basic quiz application in the section above. Hopefully you have got it well and will further customize it according to the requirement.
shabbir like this