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.
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
Hej, I’m from Bangladesh. Learning programming is one of the freaking decisions I have taken in my life. Because, it makes me and my life crazy. I have great weakness on open source technologies. Perhaps, that’s why I do not know any closed source language. I fall in love with programming, when I started my undergraduate in East West University. Till now, I can not live without it.