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.