onlyMobilePro

Welcome to the third part of “The Beginner’s Guide to Android Development“. In this tutorial, we will continue our tutorial, implementing click handler to the button that we added in previous tutorial. If you haven’t already, be sure to read the previous tutorial of this series first!

The source code we are going to use in today lesson is what we have working on the previous published post called “Android Beginner: Adding Button Using XML Layout“. Let’s open up the source code in Eclipse editor and start our tutorial!

Step 1: Set onClick Listener To Button

We will bind an onClick listener to the button and bring users to a new screen(activity) when users click on the button.

Choosing /src/com.tutorial.myapp/, then double click on the “myMainScreen.java” to open it. Then insert the following codes into the file:

package com.tutorial.myapp;

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

public class myMainScreen extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		Button button1 = (Button) findViewById(R.id.sound_efx);
		button1.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				startActivity(new Intent("com.tutorial.SOUND_EFFECTS_DETAILS"));
			}
		});
	}

}

Description:

• Line 4,6,7:
  Import the library of Intent, View and Button. This is required, because we have implemented related methods such as intended to start a new activity when click on the button.
• Line 17:
  We create an Instance of Button named “button1“. We ask Android system to find the button that has id “sound_efx“, which we defined in main.xml.
• Line 18:
  We bind an onClick listener to the button.
• Line 20-25:
  An onClick function will start a new activity named “SOUND_EFFECTS_DETAILS” when user click on the button.

Step 2: Creating A New XML Layout For Sound Effects Details Screen

Ok, now we need a XML layout for the sound effects details screen, which users come from clicking on the sound effects button. Right click /res/layout/ folder, and choose “New -> Android XML File”, then insert following details:

• Enter “sound.xml” for File
• Select Linear Layout as root element

Press “Finish” to complete the process. Then insert a Text View for displaying a message to users that this is sound effects details screen. Here is how we create a Text View for sound.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  
  <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/sound_details"
    />
</LinearLayout>

Then go to /res/values/ folder and open up strings.xml file. Insert the displaying message as shown below:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, MainActivity!</string>
    <string name="app_name">myApp</string>
    <string name="btn_sound_efx">Sound Effects!</string>
    <string name="sound_details">This is Sound Effects Details Screen!</string>
</resources>

Step 3: Creating A New Class For Sound Effects Details Screen

We have the XML layout for the sound effects details screen, but we need a Java class to set the content view for us. Creating a new class by choosing “File -> New -> Class”, then insert the following details into the dialog:

• Enter “myApp/src” for Source Folder
• Enter “com.tutorial.myapp” for Package
• Enter “soudnEfxDetailsScreen” for Name
• Choose “public” for Modifiers

You will see a new Java class created and placed under your /src/ folder when pressing “Finish” button. Open it up and set content view for the sound effects details screen using following codes:

package com.tutorial.myapp;

import android.app.Activity;
import android.os.Bundle;

public class soundEfxDetailsScreen extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.sound);
	}
}

First of all, import Activity and Bundle library. This is a new screen, so we want this class to extends Activity class. Next, we tells Android system to look for sound.xml file in /res/layout/ folder.

Step 4: Configuring New Activity in AndroidManifest.xml

Ok, now everything has ready, the last step is to tells Android system to start a new activity(sound effects details screen) based on the request named “SOUND_EFFECTS_DETAILS“, which we specified in “myMainScreen.java” class.

Open up AndroidManifest.xml and insert the following codes:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.tutorial.myapp"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MainActivity"
                  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=".myMainScreen"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="com.tutorial.CLEARSCREEN" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
        
        <activity
            android:name=".soundEfxDetailsScreen"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="com.tutorial.SOUND_EFFECTS_DETAILS" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>

    </application>


</manifest>

Save all the codes, run it in emulator and click on the button. Your app should works as the following picture:

Conclusion

You’ve just learned to add click handler and start a new activity for your Android application. In the next tutorial, we will learn to adding soudn effects that respond to user’s input. Stay tunes!

Previous Post Next Post