ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Become An Android Developer: Creating The User Interface

Updated on September 16, 2012

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.

Comments

    0 of 8192 characters used
    Post Comment

    • sparkster profile imageAUTHOR

      Sparkster Publishing 

      5 years ago from United Kingdom

      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.

    • dwachira profile image

      [ Danson Wachira ] 

      5 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.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)