EditText Tutorial with Example

In this post you will get EditText tutorial with example. EditText is an input field control provided by the android system.

It is a subclass of android TextView with its editable feature. It is the standard text entry widget in Android system. This is the best user interface element that provides the feature of entering as well as modifies the text.

Basic Syntax of EditText Tutorial

[sourcecode language=”java”]

<EditText
android:id="@+id/extText"
android:layout_width="match_parent"
android:inputType="text"
android:layout_height="wrap_content" />

[/sourcecode]

EditText XML Attributes

  1. android:autoText : automatically corrects some common spelling errors
  2. android:drawableBottom : used for set the drawable below the text
  3. android:drawableRight : used for set the drawable to the right to the text
  4. android:editable : make text editable or uneatable with the value of true and false
  5. android:text : used for set the text.
  6. android:background : set the background image or color or drawable
  7. android:id : uniquely identify the view
  8. android:contentDescription : that briefly describes content of the view
  9. android:onClick : set click event of view
  10. android:visibility : set visibility of view
  11. android:layout_margin : set margin of view
  12. android:gravity : set gravity of view

etc

For this tutorial we will use the following tools in window 7,8, and 10 platform:

  1. JDK 1.7/JDK1.8
  2. Android Studio (Current Version)

Basic Example of EditText Tutorial

In this tutorial we are showing you a simple EditText on activity with its common attributes.

Create a new project in android studio by clicking File > New > New Project and set the project name EditTextExample.

Edit Text tutorial with Example

This is your layout file

res/layout/activity_main.xml

activity_main.xml

[sourcecode language=”xml”]

<?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="com.codealumni.www.edittextexample.MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_height="match_parent">

<EditText
android:id="@+id/extText"
android:layout_width="match_parent"
android:inputType="text"
android:layout_height="wrap_content" />

</LinearLayout>

</android.support.constraint.ConstraintLayout>
[/sourcecode]

Now go to your Main Activity file

MainActiviry.java

[sourcecode language=”plain”]</pre>
public class MainActivityextends AppCompatActivity {
EditTexteditText;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

editText= (EditText) findViewById(R.id.extText);
editText.setText("Code Alumni Text");

editText.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// write the click event code here
String text = editText.getText().toString();
Log.e("your text is ",text);
}
});

}
}

[/sourcecode]

AndroidManifest.xml

[sourcecode language=”xml”]

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.codealumni.www.edittextexample">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

[/sourcecode]


Now run your app with Run > Run App
Edit Text Tutorial with Example
Now I am showing you some more modification in this post that are following:
1.   Border of the edit text
2.   Change the color of edit text on click
3.   Set the drawable selector of your view

For this please add some more files in your drawable folder.

res/drawable

edit_selector.xml

[sourcecode language=”xml”]

<em><?</em>xml version="1.0" encoding="utf-8"<em>?>
</em><selector xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:drawable="@drawable/edit_text_pressed" android:state_focused="true" />
<item android:drawable="@drawable/edit_text_normal" />

</selector>

[/sourcecode]

edit_text_normal.xml

[sourcecode language=”xml”]

<em><?</em>xml version="1.0" encoding="utf-8"<em>?>
</em><shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="@color/green" />

<gradient
android:angle="45"
android:endColor="@color/white"
android:startColor="@color/white" />
<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />

<corners android:radius="8dp" />

</shape>

[/sourcecode]

edit_text_pressed.xml

[sourcecode language=”xml”]

<em><?</em>xml version="1.0" encoding="utf-8"<em>?>
</em><shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="@color/green" />

<gradient
android:angle="45"
android:endColor="@color/yellow"
android:startColor="@color/yellow" />
<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />

<corners android:radius="8dp" />

</shape>

[/sourcecode]

res/values/colors.xml

colors.xml

[sourcecode language=”xml”]

<em><?</em>xml version="1.0" encoding="utf-8"<em>?>
</em><resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="white">#ffffff</color>
<color name="yellow">#fffffb37</color>
<color name="green">#ff28a013</color>
</resources>

[/sourcecode]

now your layout file is look like

res/layout/activity_main.xml

activity_main.xml

[sourcecode language=”xml”]

<em><?</em>xml version="1.0" encoding="utf-8"<em>?>
</em><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="com.codealumni.www.edittextexample.MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_margin="10dp"
android:orientation="vertical"
android:layout_height="match_parent">

<EditText
android:id="@+id/extText"
android:layout_width="match_parent"
android:inputType="text"
android:layout_height="wrap_content" />

<EditText
android:id="@+id/extText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="Enter the text"
android:background="@drawable/edit_selector"
android:maxLength="25"
android:singleLine="true" />

</LinearLayout>

</android.support.constraint.ConstraintLayout>

[/sourcecode]

MainActivity file look like

MainActiviry.java

[sourcecode language=”java”]</pre>
public class MainActivityextends AppCompatActivity {
EditTexteditText;
EditTexteditText2;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

editText= (EditText) findViewById(R.id.extText);
editText2 = (EditText) findViewById(R.id.extText2);

editText.setText("Code Alumni Text");

editText.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// write the click event code here
String text = editText.getText().toString();
Log.e("your text is ",text);
}
});

editText2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// write the click event code here
String text = editText2.getText().toString();
Log.e("your text is ",text);
}
});

}
}
<pre>[/sourcecode]

And run the program


Edit Text Tutorial with Example

For download this sample project kindly click on download code button.

Download Code

Leave a Reply

Your email address will not be published. Required fields are marked *