5 Amazing Ways To Underline A TextView In Android

Do you want to underline a TextView in Android?

In this post, you will learn how to underline a TextVew and also learn to change underline color.

You can download Java & Kotlin Source code too.

• Best Android App Development Book For Visual Learners?
• Make Your TextView Bold
• Android TextView StrikeThrough

Okay, let’s get started.

1 – Underline a TextView in Android – Using Html.fromHtml()

It’s the simplest way. Html.fromHtml() method helps us to render HTML code in TextView.

val html = "<u>Underline using Html.fromHtml()</u>"
textview.text = Html.fromHtml(html)

String html = "<u>Underline using Html.fromHtml()</u>";
textview.setText(Html.fromHtml(html));

But Html.fromHtml(resource : String) was deprecated in API 24. So now you can use HtmlCompat.fromHtml() method. It’s available in both android.support.v4.text.HtmlCompat, and androidx.core.text.HtmlCompat.

But androidx.core.text.HtmlCompat is the latest one. For that, you must include the dependency in gradle file.

implementation 'androidx.core:core:1.0.1'

val html = "<u> 1.1 Underline using HtmlCompat.fromHtml()</u>"
//1.1 underline textview using HtmlCompat.fromHtml() method
textview11.text = HtmlCompat.fromHtml(html, HtmlCompat.FROM_HTML_MODE_LEGACY)

String html = "<u> 1.1 Underline using HtmlCompat.fromHtml()</u>";
            //underline textview using HtmlCompat.fromHtml() method
            textview11.setText(HtmlCompat.fromHtml(html, HtmlCompat.FROM_HTML_MODE_LEGACY));
            

1.2 Above underline method in a direct way

This is for beginners. You can directly implement the code just like below.

textview12.text = HtmlCompat.fromHtml("<u>1.2 Underline using HtmlCompat.fromHtml()</u> ", HtmlCompat.FROM_HTML_MODE_LEGACY)

textview12.setText(HtmlCompat.fromHtml("<u>1.2 Underline using HtmlCompat.fromHtml()</u> ", HtmlCompat.FROM_HTML_MODE_LEGACY));

• Easiest Way To Make ListView In Android

1.3 – Underline TextView In Android Using String resource & HtmlCompat.fromHtml()

In this method, we use strings.xml to store our HTML code and access using getString() method inside HtmlCompat.fromHtml() method.

The <u> tag doesn’t work with devices I checked. So I use < and; here. Just like below.

strings.xml

<string name="underline_text">1.3 <u>Underline using HtmlCompat.fromHtml() and string resource</u></string>

textview13.text = HtmlCompat.fromHtml(getString(R.string.underline_text), HtmlCompat.FROM_HTML_MODE_LEGACY)

textview13.setText(HtmlCompat.fromHtml(getString(R.string.underline_text), HtmlCompat.FROM_HTML_MODE_LEGACY));

2. Underline Using Paint Flags

You can use Paint flags to make underline below TextView. Use Paint.UNDERLINE_TEXT_FLAG.

        textview2.paintFlags = textview2.paintFlags or Paint.UNDERLINE_TEXT_FLAG
        textview2.text = "2. Underline using setPaintFlags()"

            textview2.setPaintFlags(textview2.getPaintFlags() | Paint.UNDERLINE_TEXT_FLAG);
            textview2.setText("2. Underline using setPaintFlags()");

• How To Convert Java Class To Kotlin In Android Studio

3.1 Underline using SpannableString

You can underline TextView using SpannableString and setSpan() method with the help of UnderlineSpan().

val content1 = "3.1 Underline using SpannableString"
        val spannableString1 = SpannableString(content1)
        spannableString1.setSpan(UnderlineSpan(),0,content1.length,0)
        textview31.text = spannableString1

String content1 = "3.1 Underline using SpannableString";
            SpannableString spannableString1 = new SpannableString(content1);
            spannableString1.setSpan(new UnderlineSpan(), 0, content1.length(), 0);
            textview31.setText(spannableString1);

3.2 Underline Using SpannableString

You can underline wherever you want in a word or sentence. Just Specify the start and endpoints.

val content2 = "3.2 Underline using SpannableString"
        val spannableString2 = SpannableString(content2)
        spannableString2.setSpan(UnderlineSpan(),4,13,0)
        textview32.text = spannableString2

Here 4 is the start point and 13 is the endpoint.

String content2 = "3.2 Underline using SpannableString";
            SpannableString spannableString2 = new SpannableString(content2);
            spannableString2.setSpan(new UnderlineSpan(), 4, 13, 0);
            textview32.setText(spannableString2);

• Open Calendar On Button Click In Android

4. Underline Using Layerlist Drawable

You can use XML drawable to make underline. Here I am going to talk about LayerList Drawable.

Make a drawable named underline_layerlist.xml, and paste below code.

<!--?xml version="1.0" encoding="utf-8"?-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-4dp" android:left="-4dp" android:right="-4dp">
        <shape android:shape="rectangle"><solid android:color="@android:color/transparent">
            <stroke android:width="1dp" android:color="#fa460a">
        </stroke></solid></shape>
    </item>
</layer-list>

Change Underline color using android:color attribute.

Here I used solid element color as transparent. If not, the solid element color becomes black in older devices (below Lolipop).

Change underline width using android:width attribute.

5. Underline using Shape Drawable

Using Line shape we can create Underline below TextView Just like this.

<!--?xml version="1.0" encoding="utf-8"?-->
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <padding android:bottom="15dp">
    <stroke android:width="1dp" android:color="#3737e5">
</stroke></padding></shape>

Here android:width and android:color are defines underline stroke and color just like layerlist drawable.

A Small Surprise – 6. Underline Using View element

Here I just made a line using View element and place it below the TextView.

 	 	 	 	<linearlayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical">

        <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="6. Underline using View">

        <view android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/colorPrimaryDark">
    </view></textview></linearlayout>

Create Android Studio Project – UnderlineTextView ex

Let’s create an Android Studio project with the above code examples.

Open your Android Studio,

Start a new Android Studio Project.

Application Name: UnderlineTextView Ex

Company domain: androidride.example.com

Check to include Kotlin support.

Select minimum SDK:API 15 – Android 4.0.3 (Ice Cream Sandwich) and click Next.

Next dialog, Select Empty Activity and click Next.

Activity Name: MainActivity
Check Generate layout file

Layout Name: activity_main

Click Finish.

copy paste below code in respective files.

build.gradle(Project: UnderlineTextView)

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext.kotlin_version = '1.2.71'
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

build.gradle(Module:app)

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.androidride.underlinetextviewex_kotlin"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    implementation 'androidx.core:core:1.0.1'
}

gradle.properties

# Project-wide Gradle settings.
# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.
# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html
# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
org.gradle.jvmargs=-Xmx1024m
# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true
# Kotlin code style for this project: "official" or "obsolete":
kotlin.code.style=official
android.useAndroidX=true
android.enableJetifier=true

strings.xml

<resources>
    <string name="app_name">UnderlineTextView Ex</string>
    <string name="underline_text">1.3 <u>Underline using HtmlCompat.fromHtml() and string resource</u></string>
</resources>

activity_main.xml

<!--?xml version="1.0" encoding="utf-8"?-->
 	 	 	 	<linearlayout 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" android:orientation="vertical" android:gravity="center" tools:context=".MainActivity">

    <textview android:layout_marginbottom="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textview11">

    <textview android:layout_marginbottom="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textview12">

    <textview android:layout_marginbottom="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textview13">

    <textview android:layout_marginbottom="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textview2">

    <textview android:layout_marginbottom="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textview31">

    <textview android:layout_marginbottom="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textview32">

    <textview android:layout_marginbottom="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="4. Underline using layerlist drawable" android:background="@drawable/underline_layerlist">

    <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="5. Underline using shape drawable" android:background="@drawable/underline_shape">

     	 	 	 	<linearlayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical">

        <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="6. Underline using View">

        <view android:layout_width="match_parent" android:layout_height="2dp" android:background="@color/colorPrimaryDark">
    </view></textview></linearlayout>

</textview></textview></textview></textview></textview></textview></textview></textview></linearlayout>

underline_layerlist.xml

<!--?xml version="1.0" encoding="utf-8"?-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-4dp" android:left="-4dp" android:right="-4dp">
        <shape android:shape="rectangle"><solid android:color="@android:color/transparent">
            <stroke android:width="1dp" android:color="#fa460a">
        </stroke></solid></shape>
    </item>
</layer-list>

underline_shape.xml

<!--?xml version="1.0" encoding="utf-8"?-->
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <padding android:bottom="15dp">
    <stroke android:width="1dp" android:color="#3737e5">
</stroke></padding></shape>

AndroidManifest.xml

<!--?xml version="1.0" encoding="utf-8"?-->
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.androidride.underlinetextviewex_kotlin">

    <application android:allowbackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundicon="@mipmap/ic_launcher_round" android:supportsrtl="true" android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN">

                <category android:name="android.intent.category.LAUNCHER">
            </category></action></intent-filter>
        </activity>
    </application>

</manifest>

MainActivity.java

package com.androidride.underlinetextviewex_kotlin

import android.graphics.Paint
import android.os.Bundle
import android.text.SpannableString
import android.text.style.UnderlineSpan
import androidx.appcompat.app.AppCompatActivity
import androidx.core.text.HtmlCompat
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

            val html = "<u> 1.1 Underline using HtmlCompat.fromHtml()</u>"
            //1.1 underline textview using Html.fromHtml() method.
            textview11.text = HtmlCompat.fromHtml(html, HtmlCompat.FROM_HTML_MODE_LEGACY)
            //1.2
            textview12.text = HtmlCompat.fromHtml("<u>1.2 Underline using HtmlCompat.fromHtml()</u> ", HtmlCompat.FROM_HTML_MODE_LEGACY)
            // 1.3 underline textview using Html.fromHtml() and string resource
            textview13.text = HtmlCompat.fromHtml(getString(R.string.underline_text), HtmlCompat.FROM_HTML_MODE_LEGACY)

        // 2 underline textview using setPaintFlags() method
        textview2.paintFlags = textview2.paintFlags or Paint.UNDERLINE_TEXT_FLAG
        textview2.text = "2. Underline using setPaintFlags()"

        // 3.1 - underline textview using spannablestring
        val content1 = "3.1 Underline using SpannableString"
        val spannableString1 = SpannableString(content1)
        spannableString1.setSpan(UnderlineSpan(),0,content1.length,0)
        textview31.text = spannableString1

        // 3.2 - underline any text in sentance, specifying start and end position of underline.
        val content2 = "3.2 Underline using SpannableString"
        val spannableString2 = SpannableString(content2)
        spannableString2.setSpan(UnderlineSpan(),4,13,0)
        textview32.text = spannableString2


    }
}

package com.androidride.underlinetextviewex;

import android.graphics.Paint;
import android.os.Bundle;
import android.text.SpannableString;
import android.text.style.UnderlineSpan;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.text.HtmlCompat;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView textview11 = (TextView) findViewById(R.id.textview11);
        TextView textview12 = (TextView) findViewById(R.id.textview12);
        TextView textview13 = (TextView) findViewById(R.id.textview13);
        TextView textview2 = (TextView) findViewById(R.id.textview2);
        TextView textview31 = (TextView) findViewById(R.id.textview31);
        TextView textview32 = (TextView) findViewById(R.id.textview32);


            String html = "<u> 1.1 Underline using HtmlCompat.fromHtml()</u>";
            //underline textview using HtmlCompat.fromHtml() method
            textview11.setText(HtmlCompat.fromHtml(html, HtmlCompat.FROM_HTML_MODE_LEGACY));
            // 1.2
            textview12.setText(HtmlCompat.fromHtml("<u>1.2 Underline using HtmlCompat.fromHtml()</u> ", HtmlCompat.FROM_HTML_MODE_LEGACY));
            // 1.3 underline textview using Html.fromHtml() and string resource
            textview13.setText(HtmlCompat.fromHtml(getString(R.string.underline_text), HtmlCompat.FROM_HTML_MODE_LEGACY));

            // 2 underline textview using setPaintFlags() method
            textview2.setPaintFlags(textview2.getPaintFlags() | Paint.UNDERLINE_TEXT_FLAG);
            textview2.setText("2. Underline using PaintFlags");

            // 3.1 - underline textview using spannablestring
            String content1 = "3.1 Underline using SpannableString";
            SpannableString spannableString1 = new SpannableString(content1);
            spannableString1.setSpan(new UnderlineSpan(), 0, content1.length(), 0);
            textview31.setText(spannableString1);

            // 3.2 - underline any text in a sentence, specifying the start and end position of underline.
            String content2 = "3.2 Underline using SpannableString";
            SpannableString spannableString2 = new SpannableString(content2);
            spannableString2.setSpan(new UnderlineSpan(), 4, 13, 0);
            textview32.setText(spannableString2);


        }
    }

• Use Genymotion free emulator – for personal use
• Reduce Android Build Time
• Run Apps Through WiFi

Yeah… That’s all for now.

Let me know if anything missing here.

Sharing is Caring.