Android TextView is one of the very basic components and used a lot. Let’s have a deep look into TextView today.
According to the Google Documentation:
1. Android TextView
Android TextView class is a subclass of View class and is designed to hold and display text. It can be used in the code by importing the package android.widget.TextView
. Typically, a TextView isn’t meant for editing. For editing we use EditText
.
1.1) Creating a TextView in Layout
Following is the way to define a TextView in the layout file.
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context="com.journaldev.textviewexample.MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>
android:text
attribute holds the string that’s to be displayed.android:id
attribute stores the unique identifier of the TextView. We retrieve the TextView in our Java Activity using this id.- In the respective activity/fragment, we call the above TextView using findViewById
TextView textView = findViewById(R.id.textView);
- In the present Android SDK versions, the type TextView is inferred on the right hand side. In Android SDK < 25, we have to explicitly cast the
findViewById
to(TextView)
- Ideally, instead of hardcoding the string in the above xml code, we should set it in the
strings.xml
file and use it as :android:text="@string/app_name"
1.2) Important Attributes of TextView
Some commonly used attributes of a TextView are listed below.
android:textColor
: To set the color of the text. Can be set as #rgb #rrggbb #aarrggbb. (aa represents the transparency, opacity. We can also set the color fromcolors.xml
. Example :@color/colorPrimaryDark
or@android:color/white
android:textSize
: To set the size of the textView. Generally, it’s set in sp(scaled pixels). Example: 18sp.android:textAllCaps
: Set the boolean value. Setting true would capitalize the string.android:textStyle
: By default the style is normal. You can set it tobold
,italic
. To set one or more together use|
.android:maxLines
: Set the maximum number of lines you want the text to be in. Setting this to 1 would make it a single line TextView.android:ellipsize
: This is used for truncating the text which are longer than the view rather than being broken.start
adds a .. in place of the starting characters of the string.end
adds them for the remaining characters.middle
adds it for the middle ones. Settingmarquee
makes the textview slide left right continously. For marquee to work, setandroid:textIsSelected="true"
andandroid:scrollHorizontally="true"
android:gravity
: Specifies the alignment of the text by the view’s x- and/or y-axis when the string is smaller than the TextView width/height.android:lineSpacingMultiplier
: Extra spacing between lines of text, as a multiplier. Setting 1.5 makes the spacing 1.5 times larger than the current spacing.android:textAppearance
: Sets a style for the text which includes it’s own color, size, font etc. We can use built-in styles or create our own in thestyles.xml
file.android:typeface
: is used to set the typeface of the text among:monospace
,serif
,sans
,normal
.android:visibility
: is used to set the visibility of the TextView among:visible
,invisible
,gone
.gone
is different frominvisible
. gone makes the TextView inivisible and makes it vanish from the layout. In invisible the TextView is still at exactly the same place.
Let’s try setting these in our activity_main.xml
file in our Android Studio Project.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:id="@+id/linearLayout"
tools:context="com.journaldev.textviewexample.MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:padding="16dp"
android:textColor="@android:color/holo_red_dark"/>
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:text="Hello World!"
android:textColor="@android:color/holo_red_dark"/>
<TextView
android:layout_width="match_parent"
android:text="Hello World!"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:text="Hello World!"
android:gravity="center"
android:textAllCaps="true"
android:textColor="@android:color/holo_green_dark"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:text="Hello World!"
android:gravity="center"
android:textStyle="bold|italic"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:text="Hello World!"
android:gravity="center"
android:typeface="sans"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:text="@string/long_string"
android:gravity="center"
android:ellipsize="end"
android:maxLines="1"
android:typeface="sans"
android:textColor="#1F2124"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:text="@string/long_string_line_spacing"
android:gravity="center"
android:lineSpacingMultiplier="1.5"
android:typeface="sans"
android:textColor="@color/colorPrimary"
android:layout_height="wrap_content" />
</LinearLayout>
We’ve set a few texts in the strings.xml
file in order to avoid keeping long hardcoded strings in the layout file.
Instead of hardcoding the textSize, we can set the same in the dimens.xml
file in the values folder under the resource directory.
The output of the activity with the updated layout as shown above is:
Note
: The strings.xml
and dimens.xml
files hold the values in the form of key-value pairs – Dictionary.
2. Creating a TextView Programmatically
We can create a TextView in our activity directly. We just need to initialize it, set the attributes using methods and add the TextView object into the parent layout as shown below.
package com.journaldev.textviewexample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout linearLayout = findViewById(R.id.linearLayout);
TextView textView = new TextView(this);
textView.setText("Now we've created a TextView programmatically");
linearLayout.addView(textView);
}
}
To set the visibility of the TextView programmatically, we use setVisibility() and pass either View.VISIBLE or VIEW.INVISIBLE or VIEW.GONE
2.1) Setting TextView Width and Height
We can set the TextView width and height programmatically as shown below.
textView = new TextView(this);
textView.setText("This TextView has the width and height fixed");
textView.setLayoutParams(new LinearLayout.LayoutParams(50, 50));
linearLayout.addView(textView);
//set gravity too
textView = new TextView(this);
textView.setText("This TextView has the width and height set to wrap content and gravity as center");
textView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
textView.setGravity(Gravity.CENTER);
linearLayout.addView(textView);
2.2) Scaling Width Height in DP
In the above code, we’d set the values as an int which calculates the width and height in pixels.
Pixels can vary from screen to screen, hence we need to use density independency pixels (dp).
To set the accurate dimensions in dp
as we did in xml, we need to do scaling as shown below.
final float scale = getContext().getResources().getDisplayMetrics().density;
int pixels = (int) (dps * scale + 0.5f);
Eventually the pixels value should be used in the above code by passing 50 into dps
TextView textView = new TextView(this);
textView.setText("This TextView has the width and height fixed");
textView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, pixels));
linearLayout.addView(textView);
2.3) Setting TextView Size
We can set the size on a TextView programmatically in the following way:
final float scale = getBaseContext().getResources().getDisplayMetrics().density;
int pixels = (int) (10 * scale + 0.5f);
TextView textView = new TextView(this);
textView.setText("This TextView has the size set on the object");
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,15);
Since the TextView height in the above code is set to 10dp, the TextView displayed would be cut.
2.4) Setting TextView color Programmatically
TextView textView = new TextView(this);
textView.setText("This TextView has the text color set on the object");
textView.setTextColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));
linearLayout.addView(textView);
textView = new TextView(this);
textView.setText("This TextView has the text color set on the object");
textView.setTextColor(Color.parseColor("#20808080")); //or
linearLayout.addView(textView);
To get a color from the colors.xml we use ContextCompat(Since API>23).
To set the rgb value we use Color.parseColor()
In the above code, we’ve set transparency to 20 percent on the second TextView.
Note: We can also set textView.setTextColor(Color.RED);
The code with the above TextViews initialized in the MainActivity.java is:
package com.journaldev.textviewexample;
import android.graphics.Color;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout linearLayout = findViewById(R.id.linearLayout);
TextView textView = new TextView(this);
textView.setText("Now we've created a TextView programmatically");
linearLayout.addView(textView);
textView = new TextView(this);
textView.setText("This TextView has the width and height fixed");
textView.setLayoutParams(new LinearLayout.LayoutParams(50, 50));
linearLayout.addView(textView);
final float scale = getBaseContext().getResources().getDisplayMetrics().density;
int pixels = (int) (10 * scale + 0.5f);
textView = new TextView(this);
textView.setText("This TextView has the width and height fixed");
textView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, pixels));
linearLayout.addView(textView);
textView = new TextView(this);
textView.setText("This TextView has the width and height set to wrap content and gravity as center");
textView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
textView.setGravity(Gravity.CENTER);
linearLayout.addView(textView);
textView = new TextView(this);
textView.setText("This TextView has the size set on the object");
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 15);
linearLayout.addView(textView);
//or
//textView.setTextSize(TypedValue.COMPLEX_UNIT_PX,getResources().getDimension(R.dimen.textSize));
textView = new TextView(this);
textView.setText("This TextView has the text color set on the object");
textView.setTextColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));
linearLayout.addView(textView);
textView = new TextView(this);
textView.setText("This TextView has the text color set on the object");
textView.setTextColor(Color.parseColor("#20808080"));
linearLayout.addView(textView);
}
}
The output when the above code was run is :
The programmatically created TextViews are added beneath the xml ones in the LinearLayout since the orientation was vertical.
3. Drawable With TextView
We can define a TextView with a drawable to it’s left/right/top/bottom.
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:gravity="center"
android:drawableLeft="@mipmap/ic_launcher"
android:drawablePadding="16dp"
android:textColor="@android:color/holo_red_dark"/>
4. Setting a Custom Font on TextView
We can set a custom font .ttf or .otf typeface file on the TextView by first creating an assets directory under src | main
folder in our Android Studio Project.
Now we’ve added a .ttf file in the assets folder. Our project structure looks like this:
textView = new TextView(this);
textView.setText("This TextView has Roboto font");
textView.setTypeface(Typeface.createFromAsset(getAssets(),"Roboto-Bold.ttf"));
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
linearLayout.addView(textView);
setTypeface()
is used to set the custom font, it takes the getAssets()
folder to invoke the assets directory.
The second parameter is the path to the font file. Since in our case it is present in the root directory, the path is simply the filename.
The output looks like this:
Notice the latter TextView with a custom font!
5. Click Listener on TextView
We can trigger something when the TextView is click using the setOnClickListener on the TextView object.
<TextView
android:id="@+id/textViewClickable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:clickable="true"/>
For a TextView to have click functionality, we need to add the android:clickable as true in the xml.
In the MainActivity.java onCreate
method we do the following.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextView textViewClickable = findViewById(R.id.textViewClickable);
textViewClickable.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
textViewClickable.setTextColor(Color.ORANGE);
}
});
}
Alternative method using xml attribute android:onClick
<TextView
android:id="@+id/textViewClickable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:clickable="true"
android:onClick="methodName"/>
Using onClick
we set the method name to be invoked in the Java class whenever the TextView is clicked.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextView textViewClickable = findViewById(R.id.textViewClickable);
}
public void methodName(){
textViewClickable.setTextColor(Color.ORANGE);
}
6. Displaying Html in a TextView
We can display html code in a TextView as shown below.
textView.setText(Html.fromHtml(
"<p><b>JournalDev.com</b> Android TextView Tutorial</p>"));
7. TextView autoLink attribute
The autoLink attribute is used to detect a certain pattern in the TextView among the following:
- web
- map address
- email address
- phone
- all
It converts the matched pattern string into a link. And on clicking the link the relevant behavior happens(opens browser for web
, calling for phone
, gmail for email
, google maps for maps
)
Let’s replace one of our TextViews to the following:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:text="Hello World! www.journaldev.com"
android:textColor="@android:color/holo_red_dark"/>
The output with above TextView in the layout is given below:
This brings an end to Android TextView tutorial. You can download the project from the link below.