Android TextView – 1

 

Android TextView is better known as ‘Labels’ in Java. In this tutorial you will learn to use Android TextView widget to create a rich User Interface to display text contents over the screen.


 

Download
Source Code : TextView1.zip


 

Let’s first understand Syntax for declaring Android TextView. Refer the below fig.

Android TextView Structure

 

 

Now Let us work on Project : (Refer – Configuring Existing AndroidStudioProject) TextView1 which you might have downloaded from above or you can follow the scripts below by copying it to implement in your Project. To launch Downloaded project, Extract the zip, copy it into AndroidStudioProjects. Now from Android Studio click open Existing Android Studio Project and select the path to extracted file we just copied in AndroidStudioProjects directory. If Sync SDK path prompt comes just click OK and you are ready to work. If still you get error check for AndroidStudioProjects/TextView1/app/build.gradle , it will contain different SDK Version. Change it to SDK Version which you have.

 

 

1. activity_main.xml : Layout file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="10dp"
    android:paddingTop="10dp"
    android:orientation="vertical" >

    
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />			
		<!-- android:text property is used to set any String-text to our TextView -->
		            
    
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Coloured Text"
        android:textSize="20sp" 
        android:textColor="#002AFF"/>			
        <!-- With Blue Text Color . It follows #RRGGBB format where R=red , G=green , B=blue -->


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Coloured Text with Opacity"
        android:textSize="20sp" 
        android:textColor="#AAFF0000"/>        
        <!-- With Red Text Color & Transparency level : AA (Transparency can be understood best for backgrounds)-->


    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text with background color"
        android:textSize="20sp"
        android:background="#22FF00FF" />		
        <!-- TextView with background color -->
      
       
    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Text Style - Italic" 
        android:textStyle="italic"/>		
        <!-- With Text Style : italic -->


    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text Size = 15"
        android:typeface="serif" 
        android:textSize="15sp" />			
        <!-- With Text Size : 15  & 'sp' is a unit  &  TypeFace : Serif  -->
         
                    
    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Selectable Text" 
        android:textIsSelectable="true" />
    	<!-- This makes Selectable Text ,Tap or click the screen to try selection  -->


    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="@string/app_name" />
	    <!-- Here 'app_name' is an identifier , actual text displayed will be from res > values > strings.xml 
    	enclosed inside app_name. Try replacing your Name over there   -->

                                        
</LinearLayout>

 

 

Explaining above code separately :

 

 TextView  – 1

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView" />			
  • Line 3-4 says that TextView will fill screen dynamically due to ‘layout_height & width’ being ‘wrap_content’.
  • Line-5 android:text property assigns string named ‘TextView‘ to our 1st TextView. Try replacing your name over there.

 

 TextView  – 2

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Coloured Text"
    android:textSize="20sp" 
    android:textColor="#002AFF"/>			
    <!-- With Blue Text Color . It follows #RRGGBB format where R=red , G=green , B=blue -->
  • Line-7 To change font colour use ‘android:textColor‘. You can make any combination using 6-Hexadecimal values for your colour in the format ‘#RR GG BB‘ where F=15 max value & 0 = min value. (Black = #000000 & White = #FFFFFF)

 

TextView  – 3

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Coloured Text with Opacity"
    android:textSize="20sp" 
    android:textColor="#AAFF0000"/>        
    <!-- With Red Text Color & Transparency level : AA (Transparency can be understood best for backgrounds)-->
  • At Line-7 we have used ‘text:color’ and its value is 8-digit Hexadecimal No. of the format ‘# αα RR GG BB‘ where α = transparency level , R = Red , G = Green & B = Blue. You can try other colour combinations. (Comparing it with above TextView-2 we have just added alpha colour transparency, rest is the same )

 

TextView  – 4

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with background color"
    android:textSize="20sp"
    android:background="#22FF00FF" />		
    <!-- TextView with background color -->
  • Line-7 To highlight out TextView we use – android:background with value ‘#αα RR GG BB‘ as explained above.

 

TextView  – 5

<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:text="Text Style - Italic" 
    android:textStyle="italic"/>		
    <!-- With Text Style : italic -->
  • Line-7 we can make our text Bold or Italic using ‘text-style’

 

TextView  – 6

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text Size = 15"
    android:typeface="serif" 
    android:textSize="15sp" />			
    <!-- With Text Size : 15  & 'sp' is a unit  &  TypeFace : Serif  -->
  • Line-6 using ‘android:typeface’ we can change it to sans, serif or monospace, which are pre-added in SDK. If you want to use some other fonts we need to do this separately. This is explained well in Android Custom TextView Fonts .
  • Line-7 we used ‘android:textSize‘ to change the font size with unit ‘sp‘ . The advantage is that android devices are having various screen size, using unit ‘sp‘, system will automatically resize the text based-on screen density .

 

TextView  – 7

<TextView
    android:id="@+id/textView7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:text="Selectable Text" 
    android:textIsSelectable="true" />
<!-- This makes Selectable Text ,Tap or click the screen to try selection  -->
  • Line-7 So far the TextView we have made, check that if you try to select them you cannot do by long pressing it. ‘androidIsSelected=true‘ enables text selection using which we can select text to copy on long press.

 

TextView  – 8

<TextView
    android:id="@+id/textView8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:text="@string/app_name" />
<!-- Here 'app_name' is an identifier , actual text displayed will be from res > values > string.xml 
    	enclosed inside hello_world. Try replacing your Name over there   -->

 

  • Line-6 So far we have used android:text by directly writing value along with it (called as Hard-Coding). However this approach is restricted only to small Apps. But if we want to make an App which supports various languages than we should write an identifier(e.g. app_name on Line-6) and that identifier holds the value to be displayed. All such identifiers are stored together inside res > values > Strings.xml file. Check the file and try replacing your name over there. ( You can revise this concept from Exploring My First Android App anytime )

 

 

 

2. MainActivity.java

package com.nestedif.textview1;

import com.example.textview.R;

import android.app.Activity;
import android.os.Bundle;
import android.text.Html;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
	}


}
  • Talking about our MainActivity.java file, we have just called out XML Layout file (activity_main.xml) from here. So you need not worry about the java file right now.  I have covered about the basic structure of the JAVA file previously in Developing your first Android Application, so if you wish you can revise it again any-time.

 

Final Output :


Android TextView Final Out-Put

 

  • That’s all for this post, you will learn how to set properties of  TextView which we used just now in our XML Layout File + some click events from Java file in next post TextView-2

 

 

Report Errors + Bugs & Become Insider for Nestedif.com

We would like to hear you, if you find any error or misspelled phrase while reading our tutorials. By reporting mistakes through email to insider@nestedif.com you could help other peers.