Android - Buttons, TextView & EditText
Objective #1: Place Buttons, TextViews and EditText views on your Activity window.
- Open your main layout XML file (probably named activity_main.xml or main.xml & found in your project's res / layout folder.
- Click the Graphical Layout tab at the bottom of the editing window.
- Under the Form Widgets tab, drag the one of the TextView icons (Large Medium or Small) into your graphical editor window.
- Under the Text Fields category, draw the abc icon into your graphical editor but below the TextView.
- Under the Form Widgets tab, drag the Button icon below the other objects.
- Click the activity_main.xml tab to see the XML code that you produced by dragging and dropping icons. Eclipse placed TextView, EditText and Button XML tags into your XML file. Notice that it placed them inside a RelativeLayout tag. We will study layouts later in this course.
- Notice the default id's given to the objects. The TextView is known as textView1 (with an uppercase V), the EditText is known as editText1, and the button is named button1. Of course, you can change these names but be careful not to remove the @id/ that you see as part of the id. You will need to reference these id's in your Java source code. You may want to change the text attributes of your TextView and Button. Rather than use the line of code
android:text="Button"
for good style you should reference a string with something like
android:text="@string/button1Caption"
where the string resource button1Caption might be set to "Click" in the strings.xml file with the code
Objective #2: Use a TextView.
- A TextView is an object that is meant to handle text. It is similar to a label in Visual Basic.
- You can create a TextView programmatically in an onCreate method that displays "Hello World". Note that this is an unprofessional way to use a TextView.
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
TextView message = new TextView(this);
message.setText("Hello World");
setContentView(message);
}
- Better yet, you can use a string resource as the text that displays in your TextView object as in
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="@string/hello" />
As long as your strings.xml file includes the resource:
<string name="hello">Hello World</string>
- By giving the XML TextView object a unique id, you can specify or change the text that you want to display in the TextView from your Java source code during run-time as in:
XML code in main.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="@string/hello" />
and Java source code
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final TextView message = (TextView) findViewById(R.id.textView1);
message.setText("Hello World");
}
Notice how the resource id textView1 is used as a way to link the Java TextView object named message with the string resource named hello.
Objective #3: Use a Button.
- To make use of a button you can add the following code to your project's main.xml file
<Button
android:id="@+id/button1"
android:text="Click"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
However you will need to use a Layout such as a LinearLayout to have both a Button and a Textview in your main.xml. So here is the complete code that you should place into your main.xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<Button android:text="Click" android:id="@+id/button1" android:layout_height="wrap_content" android:layout_width="wrap_content"></Button>
<TextView android:text="" android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
</LinearLayout>
In your Java source file, you must import the following classes:
import
android.widget.Button;
import android.view.View;
import android.view.View.OnClickListener;
and add the following code to the activity's onCreate method:
final Button button1 = (Button) findViewById(R.id.button1);
final TextView message = (TextView) findViewById(R.id.textView1);
button1.setOnClickListener(new OnClickListener()
{
public void onClick(View v)
{
message.setText("Hello World");
}
});
- You can change the color of the text on a button in your Java code using the setTextColor method (e.g. btnClick.setTextColor(-1); where -1 is the Color constant for WHITE). See http://developer.android.com/reference/android/graphics/Color.html for the Color class constants.
- See our Button demo or this tutorial for a simple example that uses a Button and a TextView.
Objective #4: Use an EditText View to obtain input from the user.
Objective #5: Use Toast.
- To test a button, you can use Toast as in
Toast.makeText(HelloWorld.this, "hello world", Toast.LENGTH_SHORT).show();
Objective #6: Use common methods in an Activity's onCreate method.
- To reference the text found in a text view
final TextView textView1 = (TextView) findViewById(R.id.textview1);
followed by
String text = textView1.getText().toString();
in a button's onClick method.
- To reference a string found in the strings.xml resource file
final String text = this.getString(R.string.example);
- To convert a string value found in a TextView to an int
num = Integer.getInteger(textView1.getText().toString());
- To display an number stored in an int variable into a text view
textView1.setText(num + "");
- To convert a string into an int
int num = Integer.parseInt(str);
or
int num = Integer.getInteger(str);
Objective #7: Change colors with Java code.
- Typing the code for changing colors is similar to programming it in XML code.
- You need to use import android.graphics.Color; in order to type in different colors
- This code will type in blue color
TextView x = new TextView(this);
x.setText("BLUE");
x.setTextColor(Color.BLUE);
setContentView(x);
Objective #8: Create an app that uses Button, TextView and EditText objects.
- The instructor will lead this exercise.