Textview in Android – Implementation

Textview in Android is a very vital and mostly used View. It is used to hold a text value (just like the name suggests). The need for a Label or a marker with a value that the user does not change is implemented using TextView. The base class for TextView is the View. TextView forms the basis of all views which will be holding a Text(Could be number/password/special characters included). You can either make use of a TextView with the help of a Layout file or optionally can also use it through the Activity class you create. This tutorial helps you to understand what the TextView is and how to create one using Android Studio.

TextView – Declaration

It is defined in the Android XML layout file. If you are new to Android, check out my post on creating an Android UI layout using Android Studio to know how the UI layout is created. Once that is done, you can include this TextView inside your Layout file.

Create your UI Layout

Create a TextView

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

As soon as you type <text into the Android Studio, the default options pop up. The layout_width and layout_height are to be compulsorily specified in order to let the system know what is the size that the TextView is going to hold.

The following are the values for the layout_width and layout_height

• match_parent – Specifies that it will match the Parent’s dimension (Parent here is the ViewGroup or Layout that is holding this View)
• wrap_content – Content specified inside the TextView will be wrapped. That is, the dimensions are restricted to the size of the Text inside the Text only.
• dimensions – You can even specify a fixed dimension to the TextView.

However, it is important to note that, the height and width of the layout_ is not the dimension of the actual Text itself. It is merely telling how much space the Textbox (The rectangular box that we saw here) holds.

Other important Properties of TextView

You have declared a TextView. But where is the actual text value? It is specified using the property android:text.

The value inside the android:text can be either a hardcoded value(Not Recommended) or the value from the String.xml (Recommended) resource file.

If you want to learn more about the String.xml file, check here. However, it is merely a file to hold all the string values, in order to aid in some advanced concepts like localization (Translation to other languages). It gives a one-stop place to modify your string values.

List of all Properties

android:id

This attribute gives a unique ID for the TextView which can be used throughout the lifetime of the Application. You can specify an id like below.

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:id="@+id/text_view"/>

android:text

Enter your Text Value in this section. There are two approaches, insert using a Hardcoded Value or have the value in the String.xml and use that here. The second approach is the most recommended.

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="ANDROIDMONKS"
    />

Using a String.xml to store the value

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="@string/sampleTextView"
    />

My String.xml looks like

<resources>
    <string name="app_name">NewApplication</string>
    <string name="sampleTextView">Sample TextView</string>
</resources>

android:fontFamily

Assigns the font family to the Text. It is done either through a string or a font resource.

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="ANDROIDMONKS"
    android:fontFamily="sans-serif"/>

For Sans Serif

For Casual

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="ANDROIDMONKS"
    android:fontFamily="casual"/>

android:gravity

Specifies the way to align a text if the text is less than the view (Think of this as floating the text value inside the TextView) Do not confuse this with android:layout_gravity which serves a different purpose.

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="ANDROIDMONKS"
    android:gravity="center"
    />

If you note here, the TextView as a layout is matching its parent. That is, it is matching the entire screen width & height. So setting the text gravity to center moves it to the center of the screen like below.

If you set it to right

If the gravity is center_horizontal

android:textSize

Assigns the given size to the text.

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:height="@android:dimen/thumbnail_width"
    android:text="ANDROIDMONKS"
    android:textSize="30sp"/>

android:textStyle

Assigns style (normal, bold, italic, bold|italic) for the text.

Italic

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:height="@android:dimen/thumbnail_width"
    android:text="ANDROIDMONKS"
    android:textStyle="italic"/>

Italic | Bold

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:height="@android:dimen/thumbnail_width"
    android:text="ANDROIDMONKS"
    android:textStyle="bold|italic"/>

android:textColor

Assigns a color to the Text.

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:height="@android:dimen/thumbnail_width"
    android:text="ANDROIDMONKS"
    android:textColor="#e00"/>

android:background

Another important attribute of TextView(Or most of the View in general) is the background attribute. It helps you to set any type of drawable. Color/Background Image etc.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="ANDROIDMONKS"
    android:background="#ee1"/>

Using TextViews in your Activity

Once you are done with creating your Text in XML. There is a need to access that in your Activity. This is simple with a call using the TextView Class in your Activity. Instantiate and use the TextView like below.

TextView textView = findViewById("R.id.text_view");//ID you specified in the XML
Here, the findViewById is responsible for searching all the ID’s that have been mapped to the R (resource) file of your project. Once the ID is found, it is used by the class like above. Make sure that the Activity has set the specific XML as its contentView and you are using the TextView from it! (If the View is in one XML file and the Activity is using a different XML for its contentView then the call will result in a runtime exception).

You can access all the attributes that we saw above in the Layout file using a Public Method. The list of public methods of a TextView can be found here.

For an example, below is the method calls implementing the attributes we saw above.

Most used methods are

To set a BackgroundColor from the Activity

textView = (TextView) findViewById(R.id.text_view);
textView.setBackgroundColor(Color.RED);

To set a Text from the Activity

textView = (TextView) findViewById(R.id.text_view);
textView.setText("ANDROIDMONKS");

If you want to Retrieve Text from the Activity

textView = (TextView) findViewById(R.id.text_view);
String value = textView.getText().toString();

Setting Gravity to Text

textView = (TextView) findViewById(R.id.text_view);
textView.setGravity(25);

Setting Typeface to Text

textView = (TextView) findViewById(R.id.text_view);
textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD_ITALIC));

TextView Example App

I have created a simple sample application to change the background color using a Button Click. Check out the code resource below.

Create a Layout File named textview_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ANDROIDMONKS"
        android:id="@+id/text_view"
        android:textColor="#1e1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Change Color"
        android:id="@+id/button_view"/>

</LinearLayout>

Create an Activity File like below

package com.monks.android.newapplication;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.HorizontalScrollView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private TextView textView;
    private Button buttonView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.textview_layout);
        textView = (TextView) findViewById(R.id.text_view);
        textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD_ITALIC));
        textView.setGravity(25);
        textView.setText("ANDROIDMONKS");
        buttonView = (Button) findViewById(R.id.button_view);
        buttonView.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view) {
                textView.setBackgroundColor(Color.RED);
            }
        });
    }


}

The Example TextView App looks like this.

Creating the Proper TextView for your Application(Bonus Content)

This is a sample SignUp activity that I created for the post on developing an android app in 3 hours, can you identify the TextView in this. If you have, can you guess how it is created and also its properties.

These are the properties with which it was created.

<TextView
    android:fontFamily = "Lato-Regular"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="SIGN UP"
    android:textSize="22dp"
    android:textColor="#ADCCE2"
    android:layout_marginLeft="16dp"
    android:layout_gravity="center"
    android:gravity="center"
    />

What I have done here is to include some important properties that I had mentioned above along with the font that I need.

There is another way to create your own Font like above. Check this post about creating custom Fonts for your project to know more about them.

You can implement the TextView in your project and let me know if there are any queries in the comments below.

“Learn and be Curious”