Other Language Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,152 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,699 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Android, Part II: A Simple UI with Events

Android, Part II: A Simple UI with Events

Options

gabehabe

6 Oct, 2009 - 09:47 AM

Post #1

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.

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.

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:

CODE

<?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)

CODE

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.

CODE

The next thing we need in our LinearLayout is an EditText. This is basically a TextBox.

CODE

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.

CODE

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:

CODE

</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:

CODE

package dreamincode.tutorials.part_two;

Next, we're going to import some stuff. The first two are nothing new:

CODE

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.

CODE

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.

CODE

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.

CODE

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!)

CODE

    /** 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!)

CODE

    @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!

CODE

}

Finally, here's the complete code. dic_tut2.java:

CODE

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:

CODE

<?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: