Android EditText Tutorial With Example in Kotlin

Android EditText is in an android app basically use for taking input from users. It’s a very useful component(widget or controller) in app development. EditText is a subclass of TextView with text editing operations. The most common example of EditText is in the Login and signup process in the application.

In this tutorial, you will learn the following:

1. An overview and basic of Android EditText
2. Set EditText and get text example and many basic codes

An attributeandroid:inputType="text" is must specify, like for plain text input set inputType to "text". Why it’s a must? let’s see if your app has to accept a secret number, like a unique pin (password), you can set inputType to “numericPassword”. An inputType of “numericPassword” results in an edit text that accepts numbers only, shows a numeric keyboard.

EditText Syntax:

This is inside a layout resource file XML, you can also define it by pragmatically (java or kotlin)

<EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name" />

Retrieving the Value From EditText:

Here is code in kotlin to retrieving the value from EditText in kotlin.

var name = editText.text

Set Hint in EditText

Setting a Hint in EditText is important, it gives an idea (information) about what to write on.

<EditText
    android:id="@+id/editText"
    android:layout_width="wrap_content"
    .....
    android:hint="Name" />

Set textColor in EditText

It depends on the user to set Text color in Theme or separate in each EditText widget. Always recommend defining value as color and string define in XML file value folders.

<EditText
    android:id="@+id/editText"
    .....
    android:textColor="@color/colorPrimary"/>

Let’s Build a Simple Example of Android EditText

Step 1. Create new project “Build Your First Android App in Kotlin“

Step 2. Add EditText in resources layout “activity_main.xml“

You can add by drag and drop or write direct code in the XML file.

add fowling code in  “activity_main.xml“, we are using Button to show perform get text form EditText and show in a toast.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:ems="10"
        android:hint="Enter Name"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_marginTop="32dp"
        android:onClick="showName"
        android:text="Show my name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />
</android.support.constraint.ConstraintLayout>

Step 3. Open the “MainActivity.kt” and add the following code

package `in`.eyehunt.androidedittext

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

    // on click button
    fun showName(view: View) {
        //getting text from editText
        var name = editText.text
        Toast.makeText(this, name, Toast.LENGTH_LONG).show()
    }
}

Step 4. Now Run the application, in an emulator or On your Android device.

Output screenshot Android EditText example :

Download source code Android EditText in kotlin

https://github.com/EyeHunts/AndroidEditText

Note: This example (Project) is developed in Android Studio 3.1.3. Tested on Android 9 ( Android-P), compile SDK version API 27: Android 8.0 (Oreo)

MinSdkVersion=”26″

TargetSdkVersion=”27″

Coding in Kotlin