Designing Programming the Android SDK - Part 3

Go back - Designing Programming the Android SDK - Part 2

Adding a button

Let’s add a button to our app and then make that button control some text on our screen. To add a button we should first go to our main.xml file located in the res/layout folder. We can click on the Graphical Layout tab on the bottom of the window. Then under Form Widgets we can see Button. Drag this button onto the screen picture to the right. Now there is a button in our app.

We can customize a lot with this basic button. From the main.xml file we can click on the main.xml tab on the bottom to see the code. To see a list of available options on an xml element, we can often use Eclipse’s auto-suggest feature.

TIP: Press control-space on the keyboard to see a list of auto-fill suggestions in Eclipse.

If we go into the button code and create a new line, pressing control-space gives us a list of settings that we can customize for that element. We can click on the android:layout_gravity tag and type in “center” in the quotes. This will center the button element within the screen.

Next we can add a string resource to our strings.xml file to customize the text on the button. In the strings.xml file click the Resources tab; then click the Add button; click OK, making sure the string element is highlighted in the window that popped up. Now we can give the string a name and a value.

I am giving the string the name “button” with the value “Press Me” So if we go to the strings.xml tab, the line of code that has been added should look like this:

<string name=”button”>Press Me</string>

Now we can go back to our main.xml file and tell it to reference the value we just created by changing the name element of our button to read:

android:text=”@string/button”

Customizing our TextView

We can customize our TextView myriad ways. Try using the following code for the TextView:

<TextView
                android:id=”@+id/textView1”
                android:layout_width=”fill_parent”
                android:layout_height=”wrap_content”
                android:layout_marginTop=”100dp”
                android:layout_marginBottom=”30dp”
                android:gravity=”center”
                android:text=”@string/text” />

Make sure that there is an id for the TextView, this can be changed from textView1 to whatever you like. The width of the layout is set to fill the width of the parent layout – which should be the whole screen width in this case. The height is set to be only as tall as the content we have in this View. We set a top and bottom margin to give some breathing room for the View. We use density independent pixels here abbreviated dp (dip can also be used). These density independent pixels make it so that the same amount of space will be used regardless of the pixel density of the device being used.

We also set the gravity to center here so that the text will shop-up in the center of our view. This is different than how we centered the button. Here the width of the View is the entire width of the screen and we want to center our text inside the view. For the button, the view was only as big as the content and we wanted to center the layout within the parent layout. If you like, you can try to set the width of the TextView to wrap_content and then use the layout_gravity tag instead of the gravity tag shown here. You should get the same results.

We set the text of our TextView by using the strings.xml file again, this time using “The button has not been pressed.” as our text.

Changing TextView Text Programmatically

So now that we have a button and some text, let’s get the button to change what the text says. Let’s go back to our Activity.java file. This is what the code for that file should look like after we make our changes:

package com.mysite.TestProject;

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

public class TestProjectActivity extends Activity implements OnClickListener{
    private Button button;
    private TextView textView;
    private int counter;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initLayout();
    }
    private void initLayout() {
        button = (Button) findViewById(R.id.button1);
        button.setOnClickListener(this);
        textView = (TextView) findViewById(R.id.textView1);
        counter = 0;
    }
    @Override
    public void onClick(View arg0) {
        if (arg0.getId() == R.id.button1){
          counter++;
            if (counter == 1){
              textView.setText(“The button has been pressed “ +counter +” time”);
            }
            else{
              textView.setText(“The button has been pressed “ +counter +” times”);
            }
        }
    }
}

Now I will go through the items to add to our Activity file one-by-one. In our onCreate method there is an added reference to an initLayout method.

In the initLayout() method, we set a button field variable to the button that is defined in our layout as button1.

We then set the onClickListener for the button to “this.” “This” refers to the line of code near the top where we have our class implement onClickListener.

In order to do this, we have to override the onClick method. (There is a different way to this with anonymous inner classes where you don’t have to implement the onClickListener. If you are interested the code is below.)

button.setOnClickListener(newOnClickListener() {
    @Override
    public void onClick(View) {
    // you can put the onClick code here
    }
});

TIP: Typing control-shift-o or command-shift-o depending on what OS your computer is running will automatically add import statements to your file.

In our initLayout() method, we also define a textView field variable referencing the TextView in our main.xml file. We also initialize a counter integer field to 0.

When the button in our app is pressed, the onClick method will be called. In this method, we first check that the element being clicked is in fact the button. Then we increase the counter by one. Then if the counter is one we use the singular statement, “The button has been pressed 1 time.” Otherwise, we can use the plural, “The button has been pressed X times.” Where X is the actual number of times the button has been pressed.

Now you can test this app on your device or emulator the same way we did before. If you want to send the app to someone else, you can export the file and sign it like we did earlier.

I hope that you enjoyed the process.

There are a lot of resources available to you to help you succeed in your Android app programming goals. The android website has the details of every Android component here:
http://developer.android.com/reference/packages.html.

If you explore that site you will also find tutorials and guides to help you along your Android Programming journey.

Read Back Designing Programming the Android SDK - Part 1