EditText in Android using Kotlin

EditText is one of the most commonly used widgets in Android applications. EditText widget is used to get input from the user, for example, you have a login form in your application and you want to ask for an email and password from the user, for this purpose you can use EditText to get data. Android provides us wide range of properties to customize the EditText widget. Follow these steps to add an EditText widget in Android.

1. Add an EditText widget in the XML layout file.
2. Add required attributes such as hint, textColor, textSize, inputType, background to the EditText widget.
3. Open Kotlin file to modify attributes and to set Listeners for the EditText.

Adding EditText in the layout file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Login"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginBottom="15dp"
        />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter email"
        android:id="@+id/emailET"
        android:inputType="textEmailAddress"
        android:layout_marginBottom="15dp"
        />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter password"
        android:id="@+id/passwordET"
        android:inputType="textPassword"
        android:layout_marginBottom="15dp"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingHorizontal="15dp"
        android:paddingVertical="10dp"
        android:text="Click Me"
        android:textSize="18sp"
        android:textColor="@color/white"
        android:id="@+id/loginB"
        android:background="@color/blue" />

</LinearLayout>

In the above example, you can see we have created a login form and in this form, we used two EditText widgets to ask for email and password from the user. We have used white for the text color and blue for the background in the button widget. You can add these two colors to your colors.xml file. 

<color name="white">#FFFFFFFF</color>
<color name="blue">#304FFE</color>

List of available attributes for EditText widget:

Attributes	Description
android:id	This attribute is used to uniquely identify the control
android:gravity	This attribute is used to specify how to align the text like left, right, center, top, etc.
android:hint	This attribute is used to display the hint text when text is empty
android:text	This attribute is used to set the text of the EditText
android:textSize	This attribute is used to set the size of the text.
android:textColor	This attribute is used to set the color of the text.
android:textStyle	This attribute is used to set the style of the text. For example, bold, italic, bolditalic, etc.
android:textAllCaps	This attribute is used this attribute to show the text in capital letters.
android:width	This attribute makes the TextView be exactly this many pixels wide.
android:height	This attribute makes the TextView be exactly this many pixels tall.
android:maxWidth	This attribute is used to make the TextView be at most this many pixels wide.
android:minWidth	This attribute is used to make the TextView be at least this many pixels wide.
android:background	This attribute is used to set the background to this View.
android:backgroundTint	This attribute is used to set tint to the background of this view.
android:clickable	This attribute is used to set true when you want to make this View clickable. Otherwise, set false.
android:drawableBottom	This attribute is used to set drawable to the bottom of the text in this view.
android:drawableEnd	This attribute is used to set drawable to the end of the text in this view.
android:drawableLeft	This attribute is used to set drawable to the left of the text in this view.
android:drawablePadding	This attribute is used to set padding to be drawable of the view.
android:drawableRight	This attribute is used to set drawable to the right of the text in this view.
android:drawableStart	This attribute is used to set drawable to the start of the text in this view.
android:drawableTop	This attribute is used to set drawable to the top of the text in this view.
android:elevation	This attribute is used to set the elevation to this view.

Set click listener to EditText using Kotlin:

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

        val button = findViewById<Button>(R.id.loginB) as Button
        val emailET = findViewById<EditText>(R.id.emailET) as EditText
        val passwordET = findViewById<EditText>(R.id.passwordET) as EditText

        button.setOnClickListener(View.OnClickListener {
            val email=emailET.text.toString()
            val password=passwordET.text.toString()

            if(email.equals("abc@abc.com") && password.equals("12345")) {
                Toast.makeText(this@MainActivity, "Login done", Toast.LENGTH_SHORT)
                    .show()
            }else{
                Toast.makeText(this@MainActivity, "Wrong email or password", Toast.LENGTH_SHORT)
                    .show()
            }
        })

    }
}

In the above example program, If a user will enter email= abc@abc.com and password= 12345. Then on button click, a toast message Login done will appear on the screen otherwise Wrong email or password message will appear. 

Final Output: