Android Tutorial Part2 - EditText and Button

Hello everybody. You might have read my last blog on creating an android app and using a TextView. Here I'll help you to implement the EditText. The basic differences between an EditText and TextView are

• The user can edit the contents of an EditText, where the user has no control over the TextView.
• The data to be displayed in a textview is set by the developers. 

Lets start by editing the xml file. You can either use the xml file created earlier or create a new file. Any way I decided to continue with my old xml file.

Before starting you gays can give a try. The goal is to place an EditText below the TextView we created earlier. Try it youself first, then check my 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" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ANDROID IS INTERESTING :)"
        android:textSize="50sp" />

    <EditText
        android:layout_width="200dp"
        android:layout_height="50dp" />

</LinearLayout>

My edittext looks as in the following pic.

I had set the height and width of the edit text with constant values so that the size of the edittext will always remains constant. Set the height and width of the EditText to wrap content and check what happens.

How was that? If tried you might have seen at first the edittext seen on the emulator was a very small one...while entering texts it start growing!

Here you might have noticed that you can enter whatever characters you like. That's a default property. You can restrict this as you wish. If you wants to enter only numbers in a text field then you can set the input type of the edit text to number as follows:

android:inputType="number"
Take a look at the keyboard that appears now. What difference did you see? Are you able to enter any characters other than numbers?

A lot of other input types are also available. For now check input types like phone, text, textPassword etc.

After doing the above exercises now it's time to read the data an user entered in the EditText. This has to be done in the class file. For refering the edittext in the class file we need a name for the edittext we created. In android we refer the name as id. So we have to set an id for our edittext. This is done as follows:

android:id="@+id/myEditText"

Button
Before moving to the class file we have to decide when to read the text from edit text. I had decided to read when a button is clicked. So I decided to put a button below the edit text. Here also you can try to put a button before checking my code!

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="Read"
        android:onClick="readButtonPressed"/>

I think there is no need to explain any features other than the last line. The last line says that there is a function with name 'readButtonPressed' in the class file. When this button is pressed the control has to be passed to that function. (We have to implement this function in the class file). Here when the read button is clicke the readButtonPressed function will be triggered.

I had removed the old textviews in my layout file and added a new textview to display the text entered in edittext.

<?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/myEditText"
        android:layout_width="200dp"
        android:layout_height="50dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="readButtonPressed"
        android:text="Read"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/myTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

 Now take the activity class file. On the previous blog we had created a class file with name 'Sample1Activity'. On that file you have to write the 'readButtonPressed' function. 

public void readButtonPressed(View view) {
      
    }  

You might have seen the 'View' is underlined in red. Place your mouse over that. Now you can see

On that select Import 'View' to import the class view. If there were no errors then your IDE may have automatically imported the necessary classes!

Now to read the data in the editext, create an object of editext and read data from that edittext using getText() function. We have to create an object of the edittext and initialise it to the edittext we created in the xml file as follows:

EditText editTextObj = (EditText) findViewById(R.id.myEditText);

To create an object of the textview we defined you can use the same syntax as above. The only difference is that you have to replace the EditText with TextView and has to specify the id of the textview.

TextView textViewObj = (TextView) findViewById(R.id.myTextView);

The only thing remains is to read the text from edittext object and set it to the text view object. That includes two functions -

getText() - to read the text from an element.

setText() - to set the text of an element.

    public void readButtonPressed(View view) {
       
        // Creates an object of the edit text class and initialise that 
        // with the edit text we created in xml.
        EditText editTextObj = (EditText) findViewById(R.id.myEditText);
        // Creates an object of the text view class and initialise that 
        // with the text view we created in xml.
        TextView textViewObj = (TextView) findViewById(R.id.myTextView);
        // Reads the data entered on the edit text to a string.
        String textEntered = editTextObj.getText().toString();
        textViewObj.setText(textEntered);
    }

Now run the app. Enter some data to the edit text and click read. You can see the data you entered on a textview below the read button!

I think you may now understand the basic idea of using an edittext. Please post your comments. Will help you to use intents to navigate from one activity to other on my next blog.