Android UI

Hope you have already installed Android in your workstation. So you are ready to write some code. In this tutorial, we will be familiar with different Android UI elements. For this purpose we will create a “General Knowledge Test” app for our Android device. It can ask you some questions and show you the result. I hope you already know how to create a project with Eclipse ADT, if don’t please read previous tutorial first. And it would be better if you have some Java experience. Because, Android has built with Java, on Linux kernel.

Before start we need to clear about some terms of Android. We will only discuss in short, what we will need to know for our tutorial.

Activity: An activity is a single class or you can say single user interface by which you can do a single task. To run on activity we have to have one Java class and a layout. If you have 5 activities, you will have 5 screen or window in your android device.

Intent: Intent is an abstract description of an operation to be performed. It can be used with startActivity. Intent provides a facility for performing late runtime binding between the code in different applications. Its most significant use is in the launching of activities, where it can be thought of as the glue between activities.

Activity Life Cycle: Activities in the system are managed as an activity stack. When a new activity is started, it is placed on the top of the stack and becomes the running activity — the previous activity always remains below it in the stack, and will not come to the foreground again until the new activity exits.

Step 1:

First create an Android project named AndroidUIActivity. Open res/values/strings.xml file.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">GK Test</string>
    <string name="app_heading">General Knowledge Test</string>
    <string name="app_intro">This is an example app, which test your general knowledge. General knowledge has been defined in differential psychology as "culturally valued knowledge communicated by a range of non-specialist media" and encompassing a wide subject range.</string>
	<string name="starttest_btn">Start Test</string>
	<string name="score_txt">Your Score: </string>
	
	<string name="que1">1. Longest natural sandy sea beach?</string>
	<string name="que1_ans1">Cox\'s_Bazar, Bangladesh</string>
	<string name="que1_ans2">Marina Beach, India</string>
	
	<string name="que2">2. Largest mangrove forest?</string>
	<string name="que2_ans1">Palawan, Philippines</string>
	<string name="que2_ans2">The Sundarbans, Bangladesh</string>
	
	<string name="que3">3. The largest structures volcano?</string>
	<string name="que3_ans1">Koryaksky volcano, Russia</string>
	<string name="que3_ans2">Mud volcanoes, Azerbaijan</string>
	
	<string name="submit_btn">Submit</string>
</resources>

Now, open the res/layout folder and create a new layout xml file called exam_ui.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:text="@string/que1"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginLeft="18dp" >

        <RadioButton
            android:id="@+id/que1_ans1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/que1_ans1" />

        <RadioButton
            android:id="@+id/wrongRadio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/que1_ans2" />
    </RadioGroup>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/radioGroup1"
        android:layout_marginTop="30dp"
        android:text="@string/que2"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <RadioGroup
        android:id="@+id/radioGroup2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/radioGroup1"
        android:layout_below="@+id/textView2"
        android:layout_marginTop="10dp" >

        <RadioButton
            android:id="@+id/wrongRadio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/que2_ans1" />

        <RadioButton
            android:id="@+id/que2_ans2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/que2_ans2" />
    </RadioGroup>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/radioGroup2"
        android:layout_marginTop="30dp"
        android:text="@string/que3"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <RadioGroup
        android:id="@+id/radioGroup3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/radioGroup2"
        android:layout_below="@+id/textView3"
        android:layout_marginTop="14dp" >

        <RadioButton
            android:id="@+id/wrongRadio3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/que3_ans1" />

        <RadioButton
            android:id="@+id/que3_ans2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/que3_ans2" />
    </RadioGroup>

    <Button
        android:id="@+id/submitButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="22dp"
        android:text="@string/submit_btn" />

</RelativeLayout>

Open, activity_android_ui.xml file from the same folder and add the missing code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:text="@string/app_heading"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="58dp"
        android:gravity="center"
        android:text="@string/app_intro" />

    <Button
        android:id="@+id/startTestButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="78dp"
        android:text="@string/starttest_btn" />

    <TextView
        android:id="@+id/score_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="73dp"
        android:gravity="center"
        android:text="@string/score_txt"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Step 2:
Open AndroidUIActivity.java from the res/ folder and add the following code –

package com.example.androiduiactivity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class AndroidUIActivity extends Activity {
	
	Button startTestButton;
	TextView score_txt;
	
	int score = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_android_ui);
        
        score_txt = (TextView)findViewById(R.id.score_txt);
        startTestButton = (Button)findViewById(R.id.startTestButton);
        
        score_txt.append(Integer.toString(score));
        
        startTestButton.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				Intent myIntent = new Intent(AndroidUIActivity.this, ExamActivity.class);
				
				AndroidUIActivity.this.startActivityForResult(myIntent, 1);
			}
		});
        
    }
    
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    	// TODO Auto-generated method stub
    	
    	if(requestCode == 1){
    		if(resultCode == RESULT_OK){
    			score_txt.setText("Your Score: "+data.getStringExtra("score"));
    		}
    	}
    }
}

Now create a new class called ExamActivity.java inside the same package –

package com.example.androiduiactivity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RadioButton;

public class ExamActivity extends Activity{

	int score = 0;
	
	RadioButton que1_ans1, que2_ans2, que3_ans2;
	RadioButton wrongRadio1, wrongRadio2, wrongRadio3;
	
	Button submitButton;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.exam_ui);
		
		score = 0;
		
		OnClickListener rightRadioListener = new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				score++;
			}
		};
		
		OnClickListener wrongRadioListener = new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				score--;
				
				if(score < 0){
					score = 0;
				}
			}
		};
		
		//If you choose right answer
		que1_ans1 = (RadioButton)findViewById(R.id.que1_ans1);
		que1_ans1.setOnClickListener(rightRadioListener);
		
		que2_ans2 = (RadioButton)findViewById(R.id.que2_ans2);
		que2_ans2.setOnClickListener(rightRadioListener);
		
		que3_ans2 = (RadioButton)findViewById(R.id.que3_ans2);
		que3_ans2.setOnClickListener(rightRadioListener);
		
		
		//If you choose wrong answer
		wrongRadio1 = (RadioButton)findViewById(R.id.wrongRadio1);
		wrongRadio1.setOnClickListener(wrongRadioListener);
		
		wrongRadio2 = (RadioButton)findViewById(R.id.wrongRadio2);
		wrongRadio2.setOnClickListener(wrongRadioListener);
		
		wrongRadio3 = (RadioButton)findViewById(R.id.wrongRadio3);
		wrongRadio3.setOnClickListener(wrongRadioListener);
		
		
		submitButton = (Button)findViewById(R.id.submitButton);
		submitButton.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Intent returnIntent = new Intent();
				returnIntent.putExtra("score", Integer.toString(score));
				setResult(RESULT_OK, returnIntent);
				finish();
			}
		});
		
	}
}

Step 3:
We have two activities in our app. We need to add it to our AndroidManifest.xml file –

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.androiduiactivity"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="11"
        android:targetSdkVersion="18" />

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

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".ExamActivity">
        </activity>
    </application>

</manifest>

We are all done. Right click on the project, click Run As > Android Application. The app will run on the emulator.

Download Source

Conclusion:
You already know some Android UI Element like TextView, Button, Radio button etc. As much as you spend time with Android, you will get more chance to learn.

Happy Coding… 🙂

Android UI