How to Create Dashed Underline under TextView in Android?

In this article, we will explain how to create a dashed underline below a text view in android. A sample image is shown below to give an idea of what we are going to build.

Step by Step Implementation

Step 1: Create a new project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. 

Step 2: Working with dashed_underline.xml

Go to res > drawable > new > drawable resource file and create a new file and name it “dashed_underline.xml” and define all properties of the dashed line that we need. Later we will add this as the background of TextView. Below is the code for dashed_underline.xml comments is added for a better understanding of the code.

XML

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--Create a layer list and add item of shape "Rectangle to it"-->
    <item
        android:left="-5dp"
        android:right="-5dp"
        android:top="-5dp">
        <shape
            android:shape="rectangle">
            <!--Give the dashed lines their property
                 like color, width, and dashGap-->
            <stroke
                android:color="@color/black"
                android:dashWidth="2dp"
                android:dashGap="3dp"
                android:width="1dp"/>
        </shape>
    </item>
</layer-list>

Step 3: Working with the activity_main.xml

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file. It has only a TextView that we want to be underlined.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--Create a Text View and inside the
        background tag add the dashed_underline
        that we created earlier-->
    <TextView
        android:id="@+id/tv_dashed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/dashed_underline"
        android:text="Welcome to GFG!"
        android:textColor="@color/black"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output UI: