Page 1 of 1

Android, Part II: A Simple UI with Events

#1 gabehabe  Icon User is offline

  • GabehabeSwamp
  • member icon




Reputation: 1376
  • View blog
  • Posts: 10,951
  • Joined: 06-February 08

Posted 06 October 2009 - 10:47 AM

*
POPULAR

Basic Layouts and Events
Now that we got the basics done, it's time to get into developing our first app. It's not the most impressive application, but it's a great starting point.

This will most likely seem very familiar if you've learned programming on the console in the past. We're going to prompt for a name, and display a customised message. However, we'll have a user interface rather than printing on the console. :)
Attached Image

We're going to start with the XML. We need a layout which we can program around.

Step 0: Creating the project
So we're on the same wavelength, let's use the same project name, package, etc.
Attached Image

Step 1: Putting the UI XML together
I'll run through this one element at a time. it's all really simple, and you should recognise a lot of this from part 1.

To start, remember, it's XML:
<?xml version="1.0" encoding="utf-8"?>

We're going to use a linear layout, which fills the parent and has a vertical layout (again)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	>

Next, we're going to the first TextView. Remember, the TextView is like a "Label", from .NET. At this point, all we need to do is set the width, height, and set the text. This time, we're just going to use a static string, rather than linking into the ./res/values/strings.xml file.
	<TextView  
	  android:layout_width="fill_parent" 
	  android:layout_height="wrap_content" 
	  android:text="Enter your name:"
	/>

The next thing we need in our LinearLayout is an EditText. This is basically a TextBox.
	<EditText
	  android:layout_width="fill_parent"
	  android:layout_height="wrap_content"
	  android:id="@+id/txt_name"
	/>

Only one new thing here, we give it an ID. We need to give it an ID so that we can reference it in the actual Java application.
android:id="@+id/txt_name" -- I'll call it txt_name, I like to prefix my widgets so they're easier to remember and reference later on.
Only two things left now: The Button, and the TextView. Nothing new in either of these now.
	<Button
	  android:layout_width="fill_parent"
	  android:layout_height="wrap_content"
	  android:id="@+id/btn_confirm"
	  android:text="Confirm~"
	/>
	<TextView
	  android:layout_width="fill_parent"
	  android:layout_height="wrap_content"
	  android:id="@+id/tv_welcome"
	/>

Note that we don't set the android:text attribute in the final TextView? That's because we're going to give it its text when the user presses the "Confirm" button. (btn_confirm)

Lastly, we just need to close off our layout:
</LinearLayout>


Step 2: Bringing it all together in Java
This time we're going to write our own Java. We're going to use multiple inheritance (don't be put off, it's really very simple) so that we can make our class both an Activity (the main application) and an onclickListener (to listen for clicks on the button)

First up, remember we're working on a package:
package dreamincode.tutorials.part_two;

Next, we're going to import some stuff. The first two are nothing new:
import android.app.Activity;
import android.os.Bundle;

Remember we used both of these in part 1.

This is where it gets interesting, though. We're going to import three widgets.
import android.widget.TextView;
import android.widget.EditText;
import android.widget.Button;
I won't explain them... hopefully your memory is good enough to remember that we used these names in the XML layout earlier. :)

The next two will take a little explaining.
import android.view.View;
import android.view.View.onclickListener;

- We import the View because that's the parameter which our onclick event requires.
- We import the onclickListener because, well... we want our Activity to be an onclickListener, too.

This is where the multiple inheritance comes in. We're calling our class dic_tut2, and it's going to extend Activity, just like we did in part 1. It's also going to implement onclickListener because we're going to be listening for clicks on the button.
public class dic_tut2 extends Activity implements onclickListener {

Now it's time for the onCreate method. Just like we did in part 1, only with a few extra lines (explained afterwards!)
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		Button b = (Button)this.findViewById(R.id.btn_confirm);
		b.setonclickListener(this);
	}

Specifically, the last two lines are the new ones. We're going to create a Button from R.id.btn_confirm (remember, that's the ID we used in the XML!) Then we're simply going to set this as the onclickListener for said button. Simple stuff, eh? :)
NOTE: We need to cast the return value of findViewById() to a Button, by default it will return a View.

The very last thing we need to do is set our onclick method: the one which is called when the user clicks the button (after we set this as the onclickListener for said button!)
	@Override
	public void onclick(View v) {
		TextView tv = (TextView)this.findViewById(R.id.tv_welcome);
		EditText et = (EditText)this.findViewById(R.id.txt_name);

		String text = "Hello, " + et.getText().toString() + ".\n\n";
		text += "Welcome to android development. :)";
		
		tv.setText(text);
	}

Note that we use findViewById() again to get the TextView for which we're going to set the text, and also the EditText which contains the user's name. Then, all we do is create our string (I hope this is nothing new!) and simply setText() on our TextView which displays the final message.

Don't forget to close off your class!
}


Finally, here's the complete code. dic_tut2.java:
package dreamincode.tutorials.part_two;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
import android.widget.EditText;
import android.widget.Button;
import android.view.View;
import android.view.View.onclickListener;

public class dic_tut2 extends Activity implements onclickListener {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		Button b = (Button)this.findViewById(R.id.btn_confirm);
		b.setonclickListener(this);
	}
	
	@Override
	public void onclick(View v) {
		TextView tv = (TextView)this.findViewById(R.id.tv_welcome);
		EditText et = (EditText)this.findViewById(R.id.txt_name);

		String text = "Hello, " + et.getText().toString() + ".\n\n";
		text += "Welcome to android development. :)";
		
		tv.setText(text);
	}
}


And the layout, main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	>
	<TextView  
	  android:layout_width="fill_parent" 
	  android:layout_height="wrap_content" 
	  android:text="Enter your name:"
	/>
	<EditText
	  android:layout_width="fill_parent"
	  android:layout_height="wrap_content"
	  android:id="@+id/txt_name"
	/>
	<Button
	  android:layout_width="fill_parent"
	  android:layout_height="wrap_content"
	  android:id="@+id/btn_confirm"
	  android:text="Confirm~"
	/>
	<TextView
	  android:layout_width="fill_parent"
	  android:layout_height="wrap_content"
	  android:id="@+id/tv_welcome"
	/>
</LinearLayout>


Enjoy! :)

Here's the complete project:
Attached File  dic_tut2.zip (27.15K)
Number of downloads: 1188

Is This A Good Question/Topic? 5
  • +

Replies To: Android, Part II: A Simple UI with Events

#2 crummydo  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 06-January 09

Posted 19 June 2010 - 03:23 PM

I have had some issues with this tutorial. I had to remove the @Override's and a change onclickListener to onclickListener. Now for the Public Class line, the error help I am getting shows that my class "must implement the inherited abstract method View.onclickListener.onclick(View)" for which the two fixes can be to "add unimplemented methods" or "Make type 'DICTutorial' abstract". Also, R.id "can't be resolved".

What am I missing here? Is it a problem with the SDK version I chose (1.5 level 3)? I am using Eclipse 3.5 on Ubuntu 10.04
Was This Post Helpful? 0
  • +
  • -

#3 Theomi  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 88
  • Joined: 17-January 10

Posted 23 June 2010 - 06:54 AM

I have the same problems, would be great to know what im not seeing here...
Was This Post Helpful? 0
  • +
  • -

#4 Guest_steambrain*


Reputation:

Posted 04 November 2010 - 03:22 AM

Since nobody followed up on this I'll pitch in.

First of all, the XML goes in res/layout/main.xml and the Java in the class you are creating - dic_tut2, or whatever you call it.

Second, Java is case sensitive and you have to be careful:
1. The interface is called onclickListener
2. The method is onclick

Third, to implement an interface in Java is NOT the same as multiple inheritance, don't get confused that it says so in the tutorial.

Finally, the "R" is a class that gets generated for you when you build the project, so don't worry about the warnings that R.id (etc) can't be resolved, just build the project, and things should work out eventually.

Also, remember that you can edit and rebuild the code WITHOUT RESTARTING THE ANDROID EMULATOR, just leave it running. The Emulator is notoriously slow, especially when you start it up.
Was This Post Helpful? 0

#5 Guest_steambrain*


Reputation:

Posted 04 November 2010 - 03:24 AM

Aha, I should have known, there is something on this site that messes up the capitalization. It should be

onclickListener - upper case O, C, L
onclick - lower case o, upper case C
Was This Post Helpful? 0

#6 codeHammer  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 9
  • Joined: 27-November 10

Posted 01 December 2010 - 02:22 PM

I'll throw my 2 cents in. First when working with eclipse there is a bug, it is being worked, between eclipse and the sdk. If you modify a xml file, save and try to build usually you get an error about parsing. If you delete the error from the problems window, then modify a java file and save it. Now it should compile. When I say modify you can add a line and delete it then save it. If you save the java file after the xml file, it should compile.

Second there is an easier way to link a button to a method. Add the onclick:
<Button  
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:id="@+id/btn_confirm" 
android:text="Confirm~" 
android:onclick="myMethod"
/>  



The java method must have the View added as the only parameter
public void myMethod(View view){
/* my method does whatever
*/
}


Hope this helps someone.
Was This Post Helpful? 2
  • +
  • -

#7 DonalDuck  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 5
  • Joined: 28-March 12

Posted 28 March 2012 - 05:33 PM

View Postgabehabe, on 06 October 2009 - 10:47 AM, said:

The very last thing we need to do is set our onclick method: the one which is called when the user clicks the button (after we set this as the onclickListener for said button!)
	@Override
	public void onclick(View v) {
		TextView tv = (TextView)this.findViewById(R.id.tv_welcome);
		EditText et = (EditText)this.findViewById(R.id.txt_name);

		String text = "Hello, " + et.getText().toString() + ".\n\n";
		text += "Welcome to android development. :)/>";
		
		tv.setText(text);
	}


Thanks for the tutorial.
What does
String text = "Hello, " + et.getText().toString() + ".\n\n";
		text += "Welcome to android development. :)/>";
mean? Sorry if it's a stupid question.

Thanks,
DD
Was This Post Helpful? 0
  • +
  • -

#8 deaththekid111  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 02-August 12

Posted 02 August 2012 - 07:14 AM

View PostDonalDuck, on 28 March 2012 - 05:33 PM, said:

View Postgabehabe, on 06 October 2009 - 10:47 AM, said:

The very last thing we need to do is set our onclick method: the one which is called when the user clicks the button (after we set this as the onclickListener for said button!)
	@Override
	public void onclick(View v) {
		TextView tv = (TextView)this.findViewById(R.id.tv_welcome);
		EditText et = (EditText)this.findViewById(R.id.txt_name);

		String text = "Hello, " + et.getText().toString() + ".\n\n";
		text += "Welcome to android development. :)/>";
		
		tv.setText(text);
	}


Thanks for the tutorial.
What does
String text = "Hello, " + et.getText().toString() + ".\n\n";
		text += "Welcome to android development. :)/>";
mean? Sorry if it's a stupid question.

Thanks,
DD
String text = hello sets the String variable`s value to hello, + is to concatenate the function that receives the user input text to the variable Text"hello" and then prints it out :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1