Working with Edit Text and TextView

Any android app has two parts in it – frontend and backend hence, Frontend refers to the visualization of the components i.e. how your app will look like and appear to the other users where as Backend part refers to the logic behind the functioning of your app.

Whenever we click on any button ui or submit any form, the backend code decides what action to perform next or what to do with the data received from the user.

In our previous tutorials, you have seen how different types of layout are useful for GUI designing which is the frontend part. So in this tutorial we are going to focus and code for the backend part.

In our example, you will take input from the user through the EditText view and will display it in the TextView. Also, you will also get to see a buttonClickListener that is used for defining the action to be performed when a button got clicked in the app.

Below is the app design that we will be working on.

Working with Edit Text and TextView


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFF8D"
 >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:text="NAME"
        android:textSize="20sp"
        android:layout_margin="20dp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="PASSWORD"
        android:layout_marginTop="38dp"
        android:layout_below="@+id/textView"
        android:layout_alignLeft="@+id/textView"
        android:layout_alignStart="@+id/textView" />

    <EditText
        android:id="@+id/editName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="Enter Name"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignLeft="@+id/editPassword"
        android:layout_alignStart="@+id/editPassword" />

    <EditText
        android:id="@+id/editPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Enter Password"
        android:inputType="textPassword"
        android:layout_alignBottom="@+id/textView2"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="18dp"
        android:layout_marginEnd="18dp" />

    <Button
        android:id="@+id/buttonSubmit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/textView2"
        android:layout_marginTop="20dp"
        android:text="SUBMIT" />

    <Button
        android:id="@+id/buttonReset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="RESET"
        android:layout_alignBaseline="@+id/buttonSubmit"
        android:layout_alignBottom="@+id/buttonSubmit"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/tvResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="143dp"
        android:textSize="30sp" />

</RelativeLayout>

In the MainActivity.java file, you will define global variables as follows:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    // These are the global variables
    EditText editName, editPassword;
    TextView result;
    Button buttonSubmit, buttonReset;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

After setting up the main layout using the setContentView() method in the onCreate() method and attach the global variables that we defined to the GUI views using findViewById() method as shown below.


/*
    Using the id of views specified in layout XML
    we can initialize the view using findViewById
*/
editName  = (EditText) findViewById(R.id.editName);
editPassword = (EditText) findViewById(R.id.editPassword);
result = (TextView) findViewById(R.id.tvResult);
buttonSubmit = (Button) findViewById(R.id.buttonSubmit);
buttonReset = (Button) findViewById(R.id.buttonReset);

As the name of the method suggests, findViewById() returns an object for the view defined in layout XML and In other words this method is used to get the view instance in Java and that you have made and used in layout XML, So This is done by mentioning the id of the view that you have defined in XML and The view created in XML is used in Java to manipulate it dynamically.

Now, to enable button click event or event listener, we need to attach a click listener to our button instance and It is done by writing the following code:


// Attaching OnClick listener to the submit button
buttonSubmit.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {
    
        // Get the Data and Use it
        
    }
});

Once you add this code, then whenever the submit button is clicked, then the method onClick will be called and the code inside it will be executed.

According to your requirements we want to get the text that user will enter in the EditText and display it in the TextView whenever the submit button is clicked. So, let’s place the following code inside onClick() method:


// get text from EditText name view
String name = editName.getText().toString();
// get text from EditText password view
String password = editPassword.getText().toString();

You have used getText() method to get the text entered in the EditText views. Then the getText() method returns an Editable instance and therefore we have typecasted it to convert it into String for further use and This can be done by using the toString() method.

So now we have user inputted name and password values and we can easily apply any logic on this list of data like performing authentication for login etc and For now we are just going to display this information in a textView so that, you will be using the setText() method with our TextView instance to display information in it and This is done using the following code:


result.setText("Name:\t" + name + "\nPassword:\t" + password );

Now, when the submit button is clicked, onClick() method of submitButton is called and the user input values are stored in the name and password variables using the getText() method on EditText instances and using setText() method, the input values are displayed in the TextView.

Now, when we press the Reset button, the text in the TextView should be reset i.e cleared.So that, we will have to implement click listener on the RESET button too. Following is the code to do so:


buttonReset.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {
        // clearing out all the values
        editName.setText("");
        editPassword.setText("");
        result.setText("");
        editName.requestFocus();
    }
});

we just need to set text equal to “”(empty text), for both the EditText and for TextView and then to get the typing cursor on the Name EditText field we can use requestFocus() method with the editName instance.

Complete Code for MainActivity.java


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    // These are the global variables
    EditText editName, editPassword;
    TextView result;
    Button buttonSubmit, buttonReset;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editName  = (EditText) findViewById(R.id.editName);
        editPassword = (EditText) findViewById(R.id.editPassword);
        result = (TextView) findViewById(R.id.tvResult);
        buttonSubmit = (Button) findViewById(R.id.buttonSubmit);
        buttonReset = (Button) findViewById(R.id.buttonReset);
        /*
            Submit Button
        */
        buttonSubmit.setOnClickListener(new View.OnClickListener() {
        
            @Override
            public void onClick(View v) {
                String name = editName.getText().toString();
                String password = editPassword.getText().toString();
                result.setText("Name:\t" + name + "\nPassword:\t" + password );

            }
        });
        
        /*
            Reset Button
        */
        buttonReset.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                editName.setText("");
                editPassword.setText("");
                result.setText("");
                editName.requestFocus();
            }
        });
    }
}

MainActivity.java

Learn Android

Working with Edit Text and TextView