Android EditText Control

Introduction

This article demonstrates how to create and use an EditText control in Android. This article will also describe how to add different styles to an  EditText using style XML. This article starts with an introduction of the EditText tag in XML. In Android all the UI controls need two required attributes -- they are width and height. We need to specify the width and height for each and every control in Android. After that, it demonstrates how to add textChangeListeners for an EditText.

An EditText is used for accepting input from a user. While the user touches on the EditText the keyboard will appear and the user can type whatever text he wants and it will display in the EditText control of Android.

Creating an EditText

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />

The width and height attributes of the EditText element represent how it will appear in the screen. The main use of this control is to accept input from the user in the run time even though we can give input during creating of  EditText with the help of text attribute.The text attribute is used for showing contents for the EditText. But the user can change the input at the run time using the keyboard. Please see the XML code below to see the EditText with text hello.

<EditText
android:text="Hello"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

The width and height will accept two different values that are as follows:

wrap_content

This means the width/height of the EditText will depend upon the text of the control. Please see the output below to understand how this will work.



The second value that can be accepted by an EditText for the width/height is, 



match_parent

This will occupy all the space that its parent has as width/ height depending upon what you have provided. Please see the output in which I have given width as match_parent.

If I had given height as match_parent then the height will be same as its parents height.

Adding Style to an EditText

Now we can add some styles to the EditText using the style.xml file, so that we can reuse the same style for different EditTexts in the same application. For this first declare a style that has the parent android.widget.EditText like the following.

<style name="myEditTextStyle" parent="android:Widget.EditText">
</style>

Here my EditTextStyle is the name of that particular style and with this name we can reuse the style for another EditText of the application. We can define all the properties  in the style but add only the things that we can reuse  properly. Here I am going to add the textcolor, textsize, textstyle, padding, margin etc., so that I can use the same style for all the EditTexts in the same Application. Please see the style below.

<style name="myEditTextStyle" parent="android:Widget.EditText">
<item name="android:textColor">@color/text_color</item>
<item name="android:textColorHint">@color/grey</item>
<item name="android:background">@drawable/blue_border</item>
<item name="android:textSize">14sp</item>
<item name="android:padding">10dp</item>
<item name="android:layout_margin">5dp</item>
</style>

You can see here in the style I am using a drawable to set the background. Drawables are used for defining styles and shares in Android. Please see the drawable which I used for this,

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#ffffff" />
    <stroke android:width="4dp" android:color="@color/blue_bg" />
    <corners android:radius="1dp"></corners>
</shape>

Now we need to set this style to our EditText; for that we are using the style atribute and the usage is shown below.

<EditText
style="@style/mtdEditTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello" />

Now the output will be like the following.



Adding a TextChange Event

This can be achieved using the JAVA code only. For that we need to bind our EditText in the JAVA class. For that we need to set the id attribute for the EditText in the XML file, the id attribute is used for identifying each control in the XML file and with this id attribute we can bind the controls easily to the JAVA class file. See how the XML will look after we add an id attribute.

<EditText
style="@style/mtdEditTextStyle"
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello" />

Now the id is editText, with this id we need to bind this control on to the JAVA class file, see the code below,

EditText editText = (EditText) findViewById(R.id.editText);

Now we can set all the properties and attributes to this EditText by using this Java object. Now we can set the text change listener setting addTextChangeListener for this JAVA object. Please see the code below. There are three functions available in this, from the name you can understand their purposes

editText.addTextChangedListener(new TextWatcher()
{
    @Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
    @Override
    public void afterTextChanged(Editable editable) {}
});

Summary

In this article, I discussed how we can create an EditText in Android. We also saw how we can add different styles to this. In the end of this article, we saw how to set textChanged events for EditText from JAVA.