Android Tutorials- Part 2.4.0-TextView.

5 min readApr 22, 2020

Welcome back to my ongoing blog series on the Basics of Android development. Today we will be discussing the TextView widget.

Basically any text that you see on your screen which is not editable is and are non-image is a TextView.

Task 1: Create and explore a new project

Open the Android Studio and, on the splash screen, click on Start a new Android Studio project. After clicking on it, the IDE will ask you to choose your project. Make sure you are on the Phone and Tablet tab, click on the Empty Activity option, then click on Next.

After clicking on this button, the IDE will show you a form that you can fill in as follows:

Name: “TextView Demo”
Package name: com.nerdytech.textviewdemo
Save location: Use the default value or adjust to your needs.
Language: “Java”
Minimum API level: “API 22: Android 5.1 (Lollipop)”

From the properties above, there are two items that you can change: name and save location. Apart from that, you can also change the package name, but be aware that this tutorial uses this value multiple times (so, you will have to replace them a lot too). The other two properties, language, and minimum API level, must remain untouched. So, leave them like that and click on the Finish button.

Task 2: Change Constraint layout to Relative Layout

I tend to use Relative Layout over Constraint Layout because it makes the design universal. The constraint layout design is not universal for all phones. I will soon add a detailed blog on the Relative Layout and its uses.

Let’s go to the XML editor page. Select the tag below and delete it:

androidx.constraintlayout.widget.ConstraintLayout

Now Type RelativeLayout in place of the removed text so that your XML code will be similar to this:

<?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"
    tools:context=".MainActivity">
</RelativeLayout>

Here is a video for you to follow along

Task 3: Add view Elements in layout

Task 3.1 Add an EditText and a Button

I am providing an XML code below just copy-paste it in your activity_main.xml the file inside the RelativeLayout. If you want two know about EditText in details visit here and for Buttons visit here.

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/editText"
    android:hint="Enter User name"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    />
<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:text="Submit"
    android:background="#FF7878"
    android:layout_below="@+id/editText"
    android:layout_marginTop="5dp"/>

This will create an EditText and Button in your layout.

Task 3.2 Add a TextView

Below the button add this code

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textView"
    android:textColor="#000"
    android:textSize="21sp"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:layout_below="@id/button"
    android:layout_marginTop="25dp"
    />

After adding all the widget elements your layout should look like this

If you faced any problem while coding it then you can follow along with this video.

Task 4: Let's make the display some texts in the TextView

What we will be doing now is that we will Add Username in all the edit text and there will be greeting message displayed in the TextView.

Navigate to MainActivity.java file app>java>com.nerdytech.textviewdemo or in your case app>java>com.example.textviewdemo

Now add the edittext,textview, and button widgets as global variables in the MainActivity class.

//widgets
TextView textView;
EditText editText;
Button button;

Press Alt+Enter if there is an error highlighting the Button, EditText, or TextView.

Now in the onCreate method link the global variable to the resource files that we had created in activity_main.xml. We can do that by calling an inbuilt function View.findViewById(). This function takes in parameters as R.id.id_ofElement. R here refers to the resource-“res” directory. the id contains all the id values that have been created in the project. You need to replace the id_ofElement with a proper id that you have provided while designing the widget element in your XML file.

Add these lines below setContentView(R.layout.activity_main); line in onCreate method.

textView=findViewById(R.id.textView);
editText=findViewById(R.id.editText);
button=findViewById(R.id.button);

Now all the Widgets are linked properly with their proper widget elements in the XML file.

Let’s Add OnClickHandlers to buttons

We can do this in two ways. By creating our own method which will be called when the button is pressed or by overriding the setOnClickListner method.

I will override the setOnClickListner method in the onCreate method. after the line `button=findViewById(R.id.button);` add this

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        
    }
});

We need to check if the user name entered is nonempty. For this, we will use an inbuilt TextUtil package method isEmpty(). This function takes in a char sequence and checks if its an empty string or not. If the string is empty we will replace the text in TextView with an appropriate message else we will add a greeting for the user. Add this code inside the onClick method.

if(TextUtils.isEmpty(editText.getText())){
    textView.setText("Please enter your name");
    //This line will edit the existing text in the text view with the string being passed in the setText function
}
else{
    textView.setText("Hi "+editText.getText()+"!");
    //This will take the username from the edittext and replace it with a greeting message for the user.
}