android kotlin - EditText remove underline while typing

Android Kotlin - How to Remove Underline from EditText While Typing

This code demonstrates a way to remove the underline from an EditText field while the user is typing in Kotlin for Android development. The approach utilizes the InputType property of the EditText widget.

Code Breakdown:

MainActivity.kt:
- This file defines the main activity of the application.
- It fetches references to two EditText widgets defined in the layout (editText and editText2).
- In the onCreate method, it sets the inputType property of editText2 to achieve the underline removal.
inputType Property:
- The inputType property of EditText controls the type of text the field allows and how it is displayed on the screen.
- In this example, a combination of two flags is used:
  - InputType.TYPE_CLASS_TEXT: This specifies that the field accepts plain text.
  - InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD: This flag, though named "visible password," actually hides the underline while typing. It's a counterintuitive naming convention.
activity_main.xml:
- This file defines the layout of the main activity screen using ConstraintLayout.
- It includes two EditText elements (editText and editText2).
- Interestingly, editText also uses the combination of text and textVisiblePassword flags in its inputType attribute, achieving the same underline removal effect.

Summary

This code snippet provides a simple solution to hide the underline from an EditText field during user input in an Android application. While the naming of TYPE_TEXT_VARIATION_VISIBLE_PASSWORD might be confusing, it effectively accomplishes the desired outcome. This approach offers programmatic control over the visual appearance of the EditText element.

MainActivity.kt


package com.cfsuman.kotlintutorials

import android.app.Activity
import android.os.Bundle
import android.text.InputType
import android.widget.EditText


class MainActivity : Activity() {
    private lateinit var editText:EditText
    private lateinit var editText2:EditText

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

        // get the widgets reference from XML layout
        editText = findViewById(R.id.editText)
        editText2 = findViewById(R.id.editText2)

        // hide/remove underline programmatically while typing
        // input type TYPE_TEXT_VARIATION_VISIBLE_PASSWORD do the job
        editText2.inputType = InputType.TYPE_CLASS_TEXT or
                InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD
    }
}

activity_main.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#DCDCDC"
    android:padding="32dp">

    <!-- textVisiblePassword will remove underline while typing -->
    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:inputType="text|textVisiblePassword"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.12" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />

</androidx.constraintlayout.widget.ConstraintLayout>

android kotlin - EditText remove underline while typing

android kotlin - EditText remove underline while typing 2