Today I thought I might as well show you something a little bit more useful.
First we need to create an application, we should call this application something along the lines of "Hello math", if you don't remember how visit my last post here.
Once created head over to the file res > layout > main.xml, we are going to make a layout.
Lets create a couple of EditText views, remember how in the last post we used a TextView and put some text into it? We are going to allow the user to edit the text in it, hence the name EditText.
First we need to delete the TextView that is automatically put there, we will put a new one in later.
There are two ways of doing this, you can either use the drag and drop way, or you can type it in, which ever one you prefer, both are equally as good in my eyes.
To use the drag system open the Graphical Layout and then find the EditText in the text fields panel and then drag it into the black screen.
We need two of them so drag two in.
For people who want to write it in you can just copy and paste this code.
<?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" >
<EditText
android:id="@+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
<EditText
android:id="@+id/editText2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10" />
</LinearLayout>
Every view should have a ID, as seen above on the line with andorid:id="@+id/editText" this is so you can reference them in your activity. To define an ID you need to write inside of your view android:id="" Inside the quote marks is where the ID should go, you need to first write @id/ inside the quotes and then after that you can write in the ID.
For the two EditText views make the top views ID edit1 and the second view edit2. Dont forget the @id/ part.
Now we need to add a button, for the people using the graphical layout go into form widgets and find the button and then drag it in, for people using the text system you can put this code underneath the second EditText view.
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
After this change the id of the button to button
Do you remember how to set a string?
Open up the file res > values > strings and then click on add then select string and then press okay.
A panel should open up on the side of that view, you should have seen this one before, what you need to do is in the name field write in buttonText and in the value field write Read and Place. Save this file and then press CTRL-B or Project > Build Project this will build everything in the work-space.
Head back to the res > layout > main.xml file and in the buttons text field (android:text="Button") write in @string/buttonText this will set the text to the string value we just set.
It should look something like this in the text editor
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/buttonText" />
The reason we but the text into a string and not straight into the layout is that is more efficient and it is a better practice.
Now that we have all the layout done we can start playing around with it, head over to src > package > HelloMathActivity
Inside the class above the onCreate method we need a few things, called variables, one for each view. Remember to press CTRL+Shift+O to organize the imports and those errors should go away.
It should be looking like this
package nz.thesmartlemon.hellomath;
import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
public class HelloMathActivity extends Activity {
private EditText edit1;
private EditText edit2;
private Button button;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
Now inside the onCreate method you need to set the variables up.
All you need to do is write variable = (View) findViewById(R.id.id); this will set that view as that ID so you can reference it later.
We need one for every view.
It should look like this
package nz.thesmartlemon.hellomath;
import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
public class HelloMathActivity extends Activity {
private EditText edit1;
private EditText edit2;
private Button button;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
edit1 = (EditText) findViewById(R.id.edit1);
edit2 = (EditText) findViewById(R.id.edit2);
button = (Button) findViewById(R.id.button);
}
}
Notice how when I say to put it in the onCreate method I put it in side the little curly brackets? This is because a method is contained in curly brackets, when creating a method its set out like this
void methodName(){
}
Everything inside the curly brackets are the instructions to perform. In this case we are telling the method to assign these variables to these views.
The next thing we want to do is have something called a listener for the button, a listener listens for things, who knew.
Since we want to listen for a click we want a click listener, to use this you need to write variable.setOnClickListener(variable); this will listen for a click and when the button has been pressed it will carry out the variable defined in the brackets.
Since it is going to call a variable we want to create a new variable. This variable is a little bit different, it wants to be a listener, not a view, so what we need to do is make it create a new listener, and inside this listener have a method called onClick(View v) inside of it, the onClick method is what is going to run when the button has been clicked.
The variable looks like something like this .
private OnClickListener Listener = new OnClickListener() {
@Override
public void onClick(View v) {
//stuff to do goes here
}
};
You can put that anywhere inside the class, it should look something like this
package nz.thesmartlemon.hellomath;
import com.sirtrack.serial.Client.ClientThread;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
public class HelloMathActivity extends Activity {
private EditText edit1;
private EditText edit2;
private Button button;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
edit1 = (EditText) findViewById(R.id.edit1);
edit2 = (EditText) findViewById(R.id.edit2);
button = (Button) findViewById(R.id.button);
button.setOnClickListener(Listener);
}
private OnClickListener Listener = new OnClickListener() {
@Override
public void onClick(View v) {
//stuff to do goes here
}
};
}
Now that we have the method to put instructions in for when the button is pressed we can do something with it, what we are going to do is get the text from the first EditText view and put it in the second, I know it seems simple but we have to start the ball rolling somehow.
To do this first we need to get the text from the EditText view. This is a pretty straight foward part, what we want to use is variabale.getText().toString(); the variable is the view we want to get the text from, so in this case edit1 and .getText() gets the text and then .toString() turns it into a String; since we are turning it into a String we need a variable to store it in, this variable is going to be called text and is going to be a String. To make a String in code you do the same thing you would for the views, String variable; Since we are setting this variable to a the text we just got we can write String variable = variable.getText().toString(); since the right side of the equals side returns a string.
In context it looks like this (it should be in your onClick method)
@Override
public void onClick(View v) {
String text = edit1.getText().toString();
}
Now we have to do something with the string, we want to put it into the other EditText right? Its just the other way round, instead of calling .getText() on the EditText view you just need to call .setText(String string); on the EditText view.
What I mean by call it on the view is that we are calling a method called getText() or toString() on that view. It could be a bit confusing for now but over the next few tutorials you should understand.
In context it looks like this
@Override
public void onClick(View v) {
String text = edit1.getText().toString();
edit2.setText(text);
}
So now we get the text and then set it.
And look at that, we are doing something now. If you save it and then press CTRL+B then you should be able to press the green run button and run it, if you don't know how to run it read through this here. (just scroll down a bit till you see the image below).
This is what should happen when you type something in and then press the button.
Don't forget to go to the next chapter down below :D
