Text View Demo

This is the post that demonstrates the various android text views. Below is the list of text view samples of this post.

1. Normal Text view
2. Text View with background and text color.
3. Text View with background and text color using selector.
4. Text View with gradient background and normal text color using selector.

First create a XML file called activity_main.xml file under the layout folder. Create strings.xml file under the values folder.

1. Normal Text View

For displaying the normal text view in the layout add the following below code in the activity_main.xml file.

<TextView android:id="@+id/simple_textview"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:focusable="true"

        android:text="@string/hello_world" />

The code android:text="@string/hello_world" is used in text view tag in the above code. Add the below code in strings.xml file for displaying the text in the text view.

<string name="hello_world">Hello world!</string>

2. Text View with background and text color.

For displaying the text view with background and foreground color in the layout, add the following below code in activity_main.xml file.

<TextView android:id="@+id/textview_02"

        android:layout_width="match_parent"

        android:layout_height="30dp"

        android:layout_marginTop="5dp"

        android:focusable="true"

        android:background="#439C4A"

        android:textColor="#FFFFFF"

        android:layout_centerVertical="true"

        android:layout_below="@+id/simple_textview"

        android:text="@string/textviewWithBackground"/>

The code android:text="@string/textviewWithBackground" is used in text view tag in the above code. Add the below code in strings.xml file for displaying the text in the text view.

<string name="textviewWithBackground">Textview with Background Color</string>

3. Text View with background and text color using selector.

For displaying the text view with background and text color using selector in the layout, add the following below code in activity_main.xml file.

<TextView android:id="@+id/textview_03"

        android:layout_width="match_parent"

        android:layout_height="30dp"

        android:layout_marginTop="5dp"

        android:focusable="true"

        android:background="@drawable/textbg_color"

        android:textColor="@drawable/text_color"

        android:layout_centerVertical="true"

        android:layout_below="@+id/textview_02"

        android:text="@string/textviewWithBackgroundSelector"/>

The code android:text="@string/textviewWithBackgroundSelector" is used in text view tag in the above code. Add the below code in strings.xml file for displaying the text in the text view.

<string name="textviewWithBackgroundSelector">Textview with Background Color using Selector</string>

The code android:background="@drawable/textbg_color" is used to add the background color using selector XML file. The selector XML file name called "textbg_color.xml" is added in drawable folder present in res directory. If drawable folder not present in res directory, then create a drawable folder in res directory.

Add the below code in the textbg_color.xml file available in res/drawable directory.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    

    <item android:state_selected="true" android:drawable="@color/Dark_Blue" />    

    <item android:state_pressed="true" android:drawable="@color/Light_Blue" />

    <item android:state_focused="true" android:drawable="@color/Dark_Blue_01" />

    <item android:drawable="@color/Blue"/>

</selector>

By using the selector XML file, we can add different colors for different state of the text view background and text view text color. The different states are selected, pressed, focused and normal

Selected – is used when the text view is selected.

Pressed – is used when user pressing or touching the text view.

Focused – is used when the text view is focused.

Normal – is used when the user does not perform any action over the text view like pressed, focused or selected.

The code android:textColor="@drawable/text_color" is used to add the text color using selector XML file.Add the below code in the “text_color.xml” file available in res/drawable directory.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    

    <item android:state_selected="true" android:color="@color/Black" />

    <item android:state_pressed="true" android:color="@color/Black" />

    <item android:state_focused="true" android:color="@color/Yellow" />

    <item android:color="@color/White"/>

</selector>

Add "color.xml" file in the res/values directory to define some of the color that we are going to use in the application. The color.xml file is the optional file, you can directly assign hexa decimal color value instead of @color/Black, @color/Yellow, @color/Dark_Blue... etc., The "color.xml" will contain the following below code.

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <color name="Blue">#0000FF</color>

    <color name="Light_Blue">#ABF0FF</color>

    <color name="Dark_Blue">#00004A</color>

    <color name="Dark_Blue_01">#0C0052</color>

    

    <color name="White">#FFFFFF</color>

    <color name="Black">#000000</color>

    <color name="Yellow">#FFFC40</color>

    

    <!-- Gradient Normal Background Colors  -->

    <color name="Dark_Brown">#732F0A</color>

    <color name="Brownish_Orange">#FF6714</color>

    

    <!-- Gradient for selected background -->

    <color name="Dark_Yellowish_Brown">#B59016</color>

    <color name="Sandal">#FFE48C</color>

    

    <!-- Gradient for focused background -->

    <color name="Leaves_Green">#93A807</color>

    <color name="Leaves_Light_Greenish_Yellow">#E3E37B</color>

    

    <!-- Gradient for pressed background -->

    <color name="Redish_Orange">#FF8400</color>

    <color name="Light_Orange">#FFDD8F</color>

    

</resources>

4. Text View with gradient background and normal text color using selector

For displaying the text view with gradient background and normal text color using selector in the layout, add the following below code in activity_main.xml file.

<TextView

         android:id="@+id/textview_04"

         android:layout_width="match_parent"

         android:layout_height="40dp"

         android:layout_below="@+id/textview_03"

         android:layout_centerVertical="true"

         android:layout_marginTop="5dp"

         android:background="@drawable/textbg_gradient_color"

         android:focusable="true"

         android:text="@string/textviewWithGradientBackgroundSelector"

         android:textColor="@drawable/text_color" />

The code android:text="@string/textviewWithGradientBackgroundSelector" is used in text view tag in the above code. Add the below code in strings.xml file for displaying the text in the text view.

<string name="textviewWithGradientBackgroundSelector">Textview with GradientBackground Color using Selector</string>

The code android:background="@drawable/textbg_gradient_color" is used to add the gradient background color using selector XML file. The selector XML file name called "textbg_gradient_color.xml" is added in drawable folder present in res directory. If drawable folder not present in res directory, then create a drawable folder in res directory.

Add the below code in the textbg_gradient_color.xml file available in res/drawable directory.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

           

    <!--  Selected Background Gradient-->

    <item android:state_selected="true">

            <shape>

            <gradient

                android:angle="90"

                        android:gradientRadius="3"

                        android:startColor="@color/Dark_Yellowish_Brown"

                        android:endColor="@color/Sandal"

                        android:type="radial" />

            </shape>

            </item>

           

   

    <!--  Focused Background Gradient-->

    <item android:state_focused="true">

            <shape>

            <gradient

                        android:angle="180"

                        android:startColor="@color/Leaves_Green"

                        android:endColor="@color/Leaves_Light_Greenish_Yellow"

                        android:type="linear" />

            </shape>

            </item>

           

     <!--  Pressed Background Gradient-->

    <item android:state_pressed="true">

            <shape>

            <gradient

                        android:angle="225"

                        android:startColor="@color/Redish_Orange"

                        android:endColor="@color/Light_Orange"

                        android:type="sweep" />

            </shape>

            </item>

           

    <!--  Normal Background Gradient-->

    <item>

            <shape>

            <gradient

                        android:angle="90"

                        android:startColor="@color/Dark_Brown"

                        android:endColor="@color/Brownish_Orange"

                        android:type="linear" />

            </shape>

            </item>

</selector>

The colors using in the textbg_gradient_color.xml file is already defined in color.xml file resides in res/values directory.

The tag gradient is used for defining the gradient colors. The gradient tag contains the attributes like below

startColor – gradient start color.

endColor – gradient end color.

Type – gradient type. There are three types for gradient

1.      Linear

2.      Sweep

3.      Radial

User can use any one of the gradient type. For the gradient type radial, we need to define the gradientRadius attribute instead of angle attribute.

Angle – The gradient angle. Angle should be multiply of 45.

The code android:textColor="@drawable/text_color" is used to add the text color using selector XML file.Add the below code in the “text_color.xml” file available in res/drawable directory.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    

    <item android:state_selected="true" android:color="@color/Black" />

    <item android:state_pressed="true" android:color="@color/Black" />

    <item android:state_focused="true" android:color="@color/Yellow" />

    <item android:color="@color/White"/>

</selector>

Below are the whole codes that are available in “activity_main.xml” file.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity" >

    <TextView android:id="@+id/simple_textview"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:focusable="true"

        android:text="@string/hello_world" />

   

    <!--Text view with background color  -->

   

    <TextView android:id="@+id/textview_02"

        android:layout_width="match_parent"

        android:layout_height="30dp"

        android:layout_marginTop="5dp"

        android:focusable="true"

        android:background="#439C4A"

        android:textColor="#FFFFFF"

        android:layout_centerVertical="true"

        android:layout_below="@+id/simple_textview"

        android:text="@string/textviewWithBackground"/>

   

    <!-- Textview with background color using selector -->

   

     <TextView android:id="@+id/textview_03"

        android:layout_width="match_parent"

        android:layout_height="30dp"

        android:layout_marginTop="5dp"

        android:focusable="true"

        android:background="@drawable/textbg_color"

        android:textColor="@drawable/text_color"

        android:layout_centerVertical="true"

        android:layout_below="@+id/textview_02"

        android:text="@string/textviewWithBackgroundSelector"/>

    

     <!--  Textview with gradient background using selector-->

    

     <TextView

         android:id="@+id/textview_04"

         android:layout_width="match_parent"

         android:layout_height="40dp"

         android:layout_below="@+id/textview_03"

         android:layout_centerVertical="true"

         android:layout_marginTop="5dp"

         android:background="@drawable/textbg_gradient_color"

         android:focusable="true"

         android:text="@string/textviewWithGradientBackgroundSelector"

         android:textColor="@drawable/text_color" />

</RelativeLayout>

Below is the code for “MainActivity.java” file.

package com.example.textviewdemos;

import android.os.Bundle;

import android.app.Activity;

import android.content.Context;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends Activity {

           

            TextView t3 = null;

            TextView t2 = null;

            TextView t4 = null;

            Context context = null;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

       

        context = this;

        t2 = (TextView)findViewById(R.id.textview_02);

        t3 = (TextView)findViewById(R.id.textview_03);

        t4=(TextView)findViewById(R.id.textview_04);

       

        t2.setOnClickListener(new OnClickListener(){

                                    @Override

                                    public void onClick(View v) {

                                                Toast.makeText(context, "Clicked Text with background color", Toast.LENGTH_LONG).show();

                                    }

           

        });

       

        t3.setOnClickListener(new OnClickListener(){

                                    @Override

                                    public void onClick(View v) {                      

                                                Toast.makeText(context, "Clicked Text with background color using selector", Toast.LENGTH_LONG).show();

                                    }

           

        });

       

        t4.setOnClickListener(new OnClickListener(){

                                    @Override

                                    public void onClick(View v) {                      

                                                Toast.makeText(context, "Clicked Text with greadient background color using selector", Toast.LENGTH_LONG).show();

                                    }

           

        });

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

   

}

In the MainActivity.java file, Added click listener for textview and displayed toast message for corresponding text view.

Below is the code for AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.textviewdemos"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="18" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="com.example.textviewdemos.MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

</manifest>

Below is the sample output.

Main page of app.

Background selector for third TextView

Gradient background selector for fourth TextView

Displayed Toast message on clicking the second TextView