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)
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)
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)
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)
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()"
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
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.
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
}
}
Okay. Let’s Run Now. You can use below links to Run your app.
Yeah… That’s all for now.
Let me know if anything missing here.
Sharing is Caring.