Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Easy

Edit Text Widget In Android

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

In this blog, we will look into the EditText widget of Android. EditText is a UI widget that allows users to write some text in the field. We will discuss how EditText is created and registered. Additionally, we will look at the different kinds of attributes an Edit Text widget can have and their uses.

In this article, we will be using the Android Studio application, so in case you haven't yet set up the application on your system, you can check out this article.

EditText

EditText is a UI (User Interface) widget that can take input text values from the user. It is displayed with an empty field where the user can enter the value, and you can then use the retrieved value in your program. 

EditText tag is used to create an EditText widget in an android application.

For example,

<EditText
        android:id="@+id/firstName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="112dp"
        android:layout_marginEnd="136dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="First Name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Attributes of EditText

Following are some of the important attributes of an Edittext widget:

  • android:id: A Unique id to identify any widget
  • android:layout_width: It defines the width of the layout
  • android:layout_height: It sets the layout's height 
  • android:layout_marginTop: It defines the amount of space required on top of the widget
  • android:layout_marginEnd: It represents the amount of space needed on the End of the widget
  • android:ems: It sets the field width to fit precisely that number of 'M' characters. Setting layout_width as wrap_content overrides the ems width setting
  • android:inputType: This allows you to define the input method's behavior
  • android:text: Specifies the default text displayed in the field
  • app:layout_constraintTop_toTopOf: Align the desired view's top with the top of another
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Example

Now that we have learned what an EditText widget is. Let's learn how to use it in a program by building a basic Android application that uses EditText Widget. In this example, we will be using two EditText Widgets and one button. Upon clicking the button, a message will be displayed on the screen showing the value of the fields captured.

First, we need to create a new project in Android Studio by selecting the empty activity option. In this activity_main.xml file, we have added code for adding two EditText widgets and one button. 

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">

    <EditText
        android:id="@+id/firstName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="112dp"
        android:layout_marginEnd="136dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="First Name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/lastName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="56dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Last Name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.328"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/firstName" />

    <Button
        android:id="@+id/submitButton"
        android:layout_width="124dp"
        android:layout_height="53dp"
        android:layout_marginStart="100dp"
        android:layout_marginBottom="252dp"
        android:text="Submit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Now, let's configure the functionalities of these widgets in the MainActivity.kt file.  

MainActivity.kt

package com.example.edittext_demo;

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast

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

        // assigning ids of widgets to the variables
        val submitButton: Button = findViewById<Button>(R.id.submitButton)
        val firstName: EditText = findViewById<EditText>(R.id.firstName)
        val lastName: EditText = findViewById<EditText>(R.id.lastName)
        submitButton.setOnClickListener { // amount of time that the message will be shown on the screen for
            val msg_duration = Toast.LENGTH_LONG
            // extracting the value of firstName field
            val firstName_val = firstName.text.toString()
            // extracting the value of firstName field
            val lastName_val = lastName.text.toString()
            //Concatenating all the values to create the final message
            val final_msg = "Hello, $firstName_val $lastName_val"
            // show the final message
            Toast.makeText(this@MainActivity, final_msg, msg_duration).show()
        }
    }
}

Output:

The default User-Interface of the application looks something like this:


Upon filling the fields and pressing the submit button, a message appears on the screen, which looks like this:

FAQs

1. What does wrap_content mean?

Ans:  It specifies that the view is just big enough to fit the content.

2. What is the purpose of the onClick method?

Ans: We generally use the onClick method with a button. It signifies what happens upon clicking that button. 

3. How can we specify the width of an EditText widget?

Ans: The width of an EditText widget can be specified using the android:width property.

Key Takeaways  

In this article, we have extensively discussed the EditText widget in Android and its implementation in Android Studio. We discussed how EditText could be created and registered in an android application.

We hope that this blog has helped you enhance your knowledge regarding the EditText widget. All the widgets are enclosed inside a UI layout and if you would like to learn more about layouts, check out our article on Android UI layouts. And to learn in-depth about android development, check out our Android Development course on the Coding Ninjas website. Do upvote our blog to help other ninjas grow. Happy Coding!

Topics covered
1.
Introduction
2.
EditText
2.1.
Attributes of EditText
3.
Example
4.
FAQs
5.
Key Takeaways