Creating a simple android app with 2 buttons

How do I build a very simple android app you ask? It's easy, building a basic android application is not that hard. Making something really useful, cool and bug free, now that takes a good developer. This is a brief tutorial will show you how to code a very basic two button android application (with a start button and a stop button). You can use this code as an android project template or starting point for simple projects.

Two Button Application Use Case

A simple two button application, can be your starting point for various android projects. It can be useful for example when you have an application that starts and stops a service from the click of a button Watch for tutorial on this soon. Note:This tutorial assumes you have completed the HelloWorld Tutorial in the Android docs and you are a little familiar with Eclipse and ADT. The tutorial is aimed at developers who are very new to Android.

Creating a two button app

1) Create the project
In Eclipse create a new Android project and define the properties as shown below. Feel free to use your own package names.

2) Create a simple layout

For our main activity we're going to define a very basic layout consisting of one TextView and two Buttons (a start button and a stop button). Modify your project/res/layout/main.xml file to this: ?

1 2

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"

3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="This is a simple two button app. \r\n \r\n Tell your user what your app does here \r\n \r\n \r\n \r\n" android:padding="10dp" android:textColor="#FFFFFF" /> <Button android:id="@+id/buttonStart" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Start"/> <Button android:id="@+id/buttonStop" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Stop"/> </LinearLayout>

If you run your project in the emulator it should look like this

3) Adding onClickListeners to the buttons

In order for the buttons to actually do something useful, and to provide a template for where you can put future functionality, we'll need to define onClickListeners for each button. Let's update the TwoButtonApp.java main activiy with the following code: ?

package com.idleworx.android.twobuttonapp;

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

import import import import import import import

android.app.Activity; android.os.Bundle; android.util.Log; android.view.View; android.view.View.OnClickListener; android.widget.Button; android.widget.Toast;

public class TwoButtonApp extends Activity { private static String logtag = "TwoButtonApp";//for use as the tag when logging /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button buttonStart = (Button)findViewById(R.id.buttonStart); buttonStart.setOnClickListener(startListener); // Register the onClick listener with the implementation above Button buttonStop = (Button)findViewById(R.id.buttonStop); buttonStop.setOnClickListener(stopListener); // Register the onClick listener with the implementation above } //Create an anonymous implementation of OnClickListener private OnClickListener startListener = new OnClickListener() { public void onClick(View v) { Log.d(logtag,"onClick() called - start button"); Toast.makeText(TwoButtonApp.this, "The Start button was clicked.", Toast.LENGTH_LONG).show(); Log.d(logtag,"onClick() ended - start button"); } };

34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

// Create an anonymous implementation of OnClickListener private OnClickListener stopListener = new OnClickListener() { public void onClick(View v) { Log.d(logtag,"onClick() called - stop button"); Toast.makeText(TwoButtonApp.this, "The Stop button was clicked.", Toast.LENGTH_LONG).show(); Log.d(logtag,"onClick() ended - stop button"); } };

@Override protected void onStart() {//activity is started and visible to the user Log.d(logtag,"onStart() called"); super.onStart(); } @Override protected void onResume() {//activity was resumed and is visible again Log.d(logtag,"onResume() called"); super.onResume(); } @Override protected void onPause() { //device goes to sleep or another activity appears Log.d(logtag,"onPause() called");//another activity is currently running (or user has pressed Home) super.onPause(); } @Override protected void onStop() { //the activity is not visible anymore Log.d(logtag,"onStop() called"); super.onStop(); } @Override protected void onDestroy() {//android has killed this activity Log.d(logtag,"onDestroy() called"); super.onDestroy();

66 67 68 69 70 71 72 73 74 75

} }

Notes
As you can see, each button (or any resource for that matter) can be retrieved by the id was associated with in the layout: @+id/buttonStart can be retreived with: Button buttonStart = (Button)findViewById(R.id.buttonStart); We have attached two anonymous OnClickListeners() to each of our two buttons Each listener displays a simple Toast (a brief message to the user). Logging is very important especially during debugging, so make sure you use it where ever you need Not the logtag variable defined in the very top. It's a quick shortcut to save time when logging statements in your app with the Log.X methods. I usually use the same name as the class name and use the Create Filter option in the LogCat view to filter my code out. For easier debugging I've added logging of all the other lifecycle methods in the Activity. When you do debugging of your apps it's very important to understand the lifecycle of an android app, and even more important to see how it's called in relation to your code. So this is it, Introduction to Android 101. You should now have a very basic android app running.

For reference here is how your AndroidManifest.xml file should look (you should not have had to modify this file so far if you have followed this tutorial): ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.idleworx.android.twobuttonapp" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="8" /> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".TwoButtonApp" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>