আগামী ৩০ নভেম্বর-২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML, CSS PHP,MySQL,JavaScript, AJAX, JQUERY, Bootstrap and Live Project কোর্সের ৮৭ তম ব্যাচ এবং ২৪ নভেম্বর-২০১৭ তারিখ থেকে শুরু হচ্ছে চার মাস ব্যাপী Zend PHP-7 Certified PHP Engineering (Advance PHP) কোর্সের ৩৫ তম ব্যাচ। প্রত্যেকটি কোর্স এর ফী নির্ধারণ করা হয়েছে ৩০,০০০/= আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722 81 75 91

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.

Android

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.

activity life cycle

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.

Android UI

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.

Leave a Reply

Your email address will not be published. Required fields are marked *