Show or Hide Password in Android-Kotlin

thumbnail

In this tutorial, you will learn to create code to show or hide password in Android-Kotlin. From previous tutorial about android-kotlin, now we will add new edit text for input password and new button to show or hide the password. Below is the source code about show or hide password in android-kotlin.

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/et_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:hint="Username"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_marginBottom="456dp"
        android:hint="Password"
        app:layout_constraintBottom_toTopOf="@+id/btn_clear"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_username" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn_clear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:background="@color/colorAccent"
        android:text="Clear"
        android:textColor="#ffffff"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/et_password"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn_hide_show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:background="@color/colorAccent"
        android:text="Show/Hide Password"
        android:textColor="#ffffff"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/btn_clear"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

package com.inpows.tutorial

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
import android.text.method.HideReturnsTransformationMethod
import android.text.method.PasswordTransformationMethod

class MainActivity : AppCompatActivity() {

    private var isShowPassword : Boolean = true;

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        btn_clear.setOnClickListener {
            et_username?.text?.clear()
            et_password?.text?.clear()
        }
        btn_hide_show.setOnClickListener {
            if(isShowPassword){
                isShowPassword = false
                et_password?.transformationMethod = HideReturnsTransformationMethod.getInstance()
            } else {
                isShowPassword = true
                et_password?.transformationMethod = PasswordTransformationMethod.getInstance()
            }
        }
    }
}

The output will be:

Back To Top