Get Value from the EditText and Set value to the TextView

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

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

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

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

Below is th design that we will be working on.

<?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"
    tools:context="com.example.akshay.studytonightandroid.MainActivity">

    <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, we will define global variables as follows:

package com.example.akshay.studytonightandroid;

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 the main layout using the setContentView() method in the onCreate() method, 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 instance for the view defined in layout XML. In other words, this method is used to get the view instance in Java, that you have made and used in layout XML. This is done by mentioning the id of the view that you have defined in XML. The view created in XML is used in Java to manipulate it dynamically.

Note: findViewById() method returns only View, but it does not tell which view is returned i.e. whether the view is Button, TextView, EditText, etc. Therefore, you need to typecast the view returned by this method.

Now, to enable button click event, we need to attach a click listener to our button instance. 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, whenever th submit button is clicked, 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 show it in the TextView whenever the submit button is clicked. Therefore, 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();

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

Note: We defined editName and editPassword as global variables, hence they can be used in any method.

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

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

Now, whenever 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. Then, using setText() method, the input values are displayed in the TextView.

Now, when you press the Reset button, the text in the TextView should be reset i.e cleared. For that, we will have to implement click listener on 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();
    }
});

You just need to set text equal to ""(empty), for both the EditText as well as for TextView. Additionally, to get the typing cursor on the Name EditText field, we can use requestFocus() method with the editName instance.

Complete Code for MainActivity.java

package com.example.akshay.studytonightandroid;

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();
            }
        });
    }
}

You can download the whole project here

Add Validation if you want

You can also add validation to this like display a message if the user leaves the fields name and password empty and taps on the submit button.

In that case, all we have to do is check if name or password is empty, if found empty, display a message using a Toast saying, both the fields are required.

buttonSubmit.setOnClickListener(new View.OnClickListener() {
        
    @Override
    public void onClick(View v) {
        String name = editName.getText().toString();
        String password = editPassword.getText().toString();
        if(name == '' || password == '') {
            // If name or password is not entered
            Toast.makeText(getApplicationContext(), "Both Name and Password are required", Toast.LENGTH_LONG).show();
        }
        else {
            result.setText("Name:\t" + name + "\nPassword:\t" + password );
        }
    }
});