Category

Beginner

Category

5 Amazing Ways To Underline A TextView In Android

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.



Okay, let’s get started.

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

underline a textview in android

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)

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'

underline a textview in android studio



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)

1.2 Above underline method in a direct way

underline below textview android

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)

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

how to underline textview in android

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)

2. Underline Using Paint Flags

android textview underline

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()"

3.1 Underline using SpannableString

underline below textview android

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

3.2 Underline Using SpannableString

how to underline textview in android

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.

4. Underline Using Layerlist Drawable

android textview underline color

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

android textview underline color

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

android textview underline color

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


    }
}


Okay. Let’s Run Now. You can use below links to Run your app.

underline a textview in android - android textview underline color

Yeah… That’s all for now.

Let me know if anything missing here.

Sharing is Caring.

Please disable your adblocker or whitelist this site!