Step By Step Guide to Building An Android App Using Eclipse

Discussion in 'Android' started by faribasiddiq, Jun 26, 2014.

  1. faribasiddiq

    faribasiddiq New Member

    Joined:
    Dec 22, 2013
    Messages:
    10
    Likes Received:
    12
    Trophy Points:
    0
    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

    [​IMG]
    Figure 1 : Create New Application

    Step 2: Select Android Application Project. Click Next.

    [​IMG]
    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.

    [​IMG]
    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.

    [​IMG]
    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.

    [​IMG]
    Figure 5 : Create Activity

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

    [​IMG]
    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.

    [​IMG]
    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.

    [​IMG]
    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 :

    [​IMG]
    Figure1: Start the application and display questions

    [​IMG]
    Figure 2 : Scroll down and display rest of the questions

    [​IMG]
    Figure 3 : Select answer

    [​IMG]
    Figure 4 : Select answer(scrolling down)

    [​IMG]
    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.
     
    Last edited by a moderator: Jan 21, 2017
    PREETHAMND and shabbir like this.
  2. Jayaprakash Rachcha

    Jayaprakash Rachcha New Member

    Joined:
    Dec 24, 2014
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Android step by by step program

    I liked a program written by Faribasiddiq. If=have some idea to write similar program other use.
     
  3. dhruvsahni

    dhruvsahni New Member

    Joined:
    Mar 25, 2016
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Hi I'm a newbie in android development.
    I want to create a quiz app, but this method is fine if there are few questions but could you please tell me how should I approach if I want an app with various quizzes and with large number of ques approx 50 questions each quiz.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice