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:

EditText in Android using Kotlin

Spread the love
Scroll to Top