Become An Android Developer: Creating The User Interface

Making Buttons Functional

If you have followed my previous tutorial on how to get started in Android development, then you will by now have managed to create a screen which presents a small bit of text and the three images which you have drawn to be used as menu buttons. Next we are going to make these buttons functional by assigning each button it's own unique ID and using the 'onClick' method along with something called an Intent.

To explain, every button is intended to have a function, therefore it has an Intent. Just as with activities, all intents must be declared in the AndroidManifest.xml file via something called an intent filter or they will not work. Each intent filter must be declared inside it's relevant activity tag - if you do not understand what I mean by this then please go back and read part one.

Assign Each Button An ID

To assign an ID to each button we will do this in the main.xml file, located in the 'res' folder. If you followed my previous article then your main.xml code should look like this:

main.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"
    android:orientation="vertical" >
 
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@String/hello" />

    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/start" />
 
    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/options" />
 
    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/quit" />

</LinearLayout>

Assigning an ID to each button is simple. All you need to do is add the following lines of code to their relevant ImageButton tag:

android:id="@+id/startbutton"

android:id="@+id/optionsbutton"

android:id="@+id/quitbutton"

Once you've added the lines of code in their relevant positions your main.xml code should look like this:

main.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"
    android:orientation="vertical" >
 
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@String/hello" />

    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/start"
	android:id="@+id/startbutton" />
 
    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/options"
	android:id="@+id/optionsbutton" />
 
    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/quit"
	android:id="@+id/quitbutton" />

</LinearLayout>

Using onClick

The next step in making the buttons functional is by using the onClick command to tell the mainactivity class which method should be called when the button is clicked. To do this you need to add the following relevant line of code to each button:

android:onClick="startthegame"

android:onClick="displaytheoptions"

android:onClick="quittheapp"

Now your main.xml code will look like this:

main.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"
    android:orientation="vertical" >
 
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@String/hello" />

    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/start"
	android:id="@+id/startbutton"
	android:onClick="startthegame" />
 
    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/options"
	android:id="@+id/optionsbutton"
	android:onClick="displaytheoptions" />
 
    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/quit"
	android:id="@+id/quitbutton"
	android:onClick="quittheapp" />

</LinearLayout>

Although the main.xml now tells the mainactivity class which method should be called for each button, those methods don't actually yet exist so we now need to create them. Upon opening the mainactivity.java file you should be presented with code that looks like this:

package com.companyname.appname
 
import android.app.*;
import android.os.*;
import android.os.*;
import android.view.*;
import android.widget.*;
 
public class MainActivity extends Activity
 
    {
        /** Called when the activity is first created. */
        @override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
        }
    }

Now we need to set up the methods that are to be called by the onClick command when each button is pressed. This is done by adding the following code to the mainactivity.java code before the close tag We'll call each intent begin, menu and end:

public void startthegame(View startbutton)

{

Intent begin = new Intent(MainActivity.this,MainActivity2.class);

startActivity(begin);

finish();

}

This code creates a new intent named 'begin' then tells MainActivity to launch MainActivity2 and close itself when the start button is pressed. You need to do this for each button and each intent must have it's own unique name. You will also need to create all the other activities which are going to be needed by your app before it will work. Also note that you will not need to use an intent for the quit button. Once you've implemented the above code for each button your code should look like this:

MainActivity.java

 
import android.app.*;
import android.os.*;
import android.os.*;
import android.view.*;
import android.widget.*;
 
public class MainActivity extends Activity
 
    {
        /** Called when the activity is first created. */
        @override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
        }

public void startthegame(View startbutton)

    {

Intent begin = new Intent(MainActivity.this,MainActivity2.class);
startActivity(begin);
finish();

     }

public void displaythemenu(View optionsbutton)
    
    {
Intent menu = new Intent(MainActivity.this,MainActivity3.class);
startActivity(menu);
finish();
    }

public void quittheapp(View quitbutton)

{
finish();
}

 }

Notice that the third method which is called (ie to quite the app) does not use an intent. Instead it simply tells the activity to close itself. There is now just one step left in order to make the buttons completely functional - to declare them in the AndroidManifest.xml file. This is simple enough.

Where each activity of your app is referenced in the AndroidManifest.xml file, each intent must also be referenced inside each activity. The code to declare an intent in the AndroidManifest file is as follows:

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

As long as the above code is present for each intent and located correctly within each of the activity tags then the buttons in your app should now be fully functional. Be sure to note that your app will not be functional unless all of the activities utilized by your app actually exist and everything is correctly referenced in the AndroidManifest file.

More by this Author


Comments 2 comments

dwachira profile image

dwachira 4 years ago from Nairobi, Kenya

Hi sparkster,

This is a well detailed write up on how to start on being an Android Developer. If one can have the skills on working with controls and methods then other skills may fall into place. Android is the in-thing nowadays especially on mobile Android Development and this will surely benefit the would be Android Developers. Voted up, useful and shared.


sparkster profile image

sparkster 4 years ago from United Kingdom Author

Hi dwachira,

Thanks for the comment. It actually took me quite a while to start getting my head around Android but as you said, if one can have the skills on working with controls and methods then other skills start falling into place. I've also taken some great tips from your work on Java which I found to be very useful.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working