This is the post that demonstrates
the various android text views. Below is the list of text view samples of this
post.
- Normal Text view
- Text View with background and text color.
- Text View with background and text color using
selector.
- 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 |
