Android EditText

 

Android EditText widget is better known as TextBox in case of HMTL. It provides interface to collect data in form of text entered by user. By specifying property inputType we can customize android edittext as plain text, password, numeric, phone No., Address field , Date field, etc. based on requirement of data from user.


 

Download Source Code : EditText.zip


 

Now Let us work on Project : (Refer – Configuring Existing AndroidStudioProject) Edittext which you might have downloaded from above or you can follow the scripts below by copying it to implement in your Project. To launch Downloaded project, Extract the zip, copy it into AndroidStudioProjects. Now from Android Studio click open Existing Android Studio Project and select the path to extracted file we just copied in AndroidStudioProjects directory. If Sync SDK path prompt comes just click OK and you are ready to work. If still you get error check for AndroidStudioProjects/EditText/app/build.gradle , it will contain different SDK Version. Change it to SDK Version which you have.

 

 

1. activity_main.xml : Layout file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="10dp"
    android:paddingLeft="10dp"
    android:orientation="vertical" >

    <!-- Edit Text with Focus on page load -->
    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10" >
        <requestFocus />
    </EditText>

    <!-- Edit Text with Hint & its color -->
    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter your Name"
        android:textColorHint="#55000000"
        android:ems="10" />    
    
    <!-- Edit Text with inputType as password, this will not display passwords typed by the user directly  -->
    <EditText
        android:id="@+id/editText3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter password"
        android:textColorHint="#55000000"
        android:ems="10"
        android:inputType="textPassword" />

    <!-- Edit Text with inputType as number, this will provide keypad containing only Numbers  -->
    <EditText
        android:id="@+id/editText4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Contact No."
        android:textColorHint="#55000000"
        android:ems="10"
        android:inputType="number" />
    
    <!-- Edit Text with inputType as date  -->
    <EditText
        android:id="@+id/editText5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Date"
        android:textColorHint="#55000000"
        android:ems="10"
        android:inputType="date" />
    
    <!-- Edit Text in single line  -->
    <EditText
        android:id="@+id/editText6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="single line Text"
        android:textColorHint="#55000000"
        android:ems="10"
        android:singleLine="true" />
    
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"
        android:onClick="btn_clk" />

    

</LinearLayout>

 

Explaining above code separately :

 Edittext – 1

    <!-- Edit Text with Focus on page load -->
    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10" >
        <requestFocus />
    </EditText>
  •  This is a basic Syntax for declaring a Android EditText.
  • Line 6 declares ems value 10, i.e. it specifies width of our EditText.
  • Line 7 <requestFocus/> tag brings a virtual soft Keyboard immediately on page load for our current EditText. Remember that if we have multiple EditText, it should be added only to the 1st EditText.

 

Edittext – 2

    <!-- Edit Text with Hint & its color -->
    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter your Name"
        android:textColorHint="#55000000"
        android:ems="10" />
  •  Line 6 To tell user about what kind of data should be entered in our EditText we can provide a prmopt message called Hint which is shown by default over the EditText and wipes automatically when user types.
  • Line 7 Using property android:textColorHint we can specify any shade using 8-digit Hex. code for our hint

 

Edittext – 3

    <!-- Edit Text with inputType as password, this will not display passwords typed by the user directly  -->
    <EditText
        android:id="@+id/editText3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter password"
        android:textColorHint="#55000000"
        android:ems="10"
        android:inputType="textPassword" />
  • Line – 9 Whenever we want to get Sensitive data from user like passwords, PIN, etc. we have to use property android:inputType=”textPassword”, due to this EditText will display **** instead of characters entered by user.

 

Edittext – 4

    <!-- Edit Text with inputType as number, this will provide keypad containing only Numbers  -->
    <EditText
        android:id="@+id/editText4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Contact No."
        android:textColorHint="#55000000"
        android:ems="10"
        android:inputType="number" />
  • Line – 9 If our EditText needs Numeric data from user like  numeric digits, pin-code, mobile No., etc. we have to use property android:inputType=”number”

 

Edittext – 5

    <!-- Edit Text with inputType as date  -->
    <EditText
        android:id="@+id/editText5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Date"
        android:textColorHint="#55000000"
        android:ems="10"
        android:inputType="date" />
  • Line – 9 So as to get Date from user, we have to use property  android:inputType=”date”

 

Edittext – 6

    <!-- Edit Text in single line  -->
    <EditText
        android:id="@+id/editText6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="single line Text"
        android:textColorHint="#55000000"
        android:ems="10"
        android:singleLine="true" />
  • Line 9 By default EditText will scale as multi-line when text length increases its size. We can restrict it using property android:singleLine=”true”.

 

2. MainActivity.java

package com.nestedif.edittext;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnFocusChangeListener;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends Activity {

	//	Declaring TextViews
	EditText editText1 , editText2 ,  editText3 , editText4 , editText5 , editText6 ;
	
	//	Variables to Store EditText Values
	String value1 , value2 , value3 , value4 , value5 , value6 ;
	
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		
		//	Associating EditTexts with those declared in our activity_main.xml
		editText1 = (EditText) findViewById(R.id.editText1);
		editText2 = (EditText) findViewById(R.id.editText2);
		editText3 = (EditText) findViewById(R.id.editText3);
		editText4 = (EditText) findViewById(R.id.editText4);
		editText5 = (EditText) findViewById(R.id.editText5);
		editText6 = (EditText) findViewById(R.id.editText6);

		
		
		
		//	This listener can be added to monitor Focus In-Out from any EditText  
		/*		
		editText1.setOnFocusChangeListener(new OnFocusChangeListener() 
		{
			@Override
			public void onFocusChange(View arg0, boolean arg1) 
			{
				//	Toast to display Focus Changed Message
				Toast.makeText(getApplicationContext(), "Focus Changed of Edit Text", Toast.LENGTH_SHORT).show();
			}
		}); 
		*/
			
	}
	
	
	
	
	//	This method will fetch value from All EditText.  
	//	Remember that unless you don't type anything, editText are empty. So fetching their value in onCreate method is useless  
	public void btn_clk(View v)
	{
		
		//	Below lines fetches EditText value and stores inside String Variables 
		value1 = editText1.getText().toString();
		value2 = editText2.getText().toString();
		value3 = editText3.getText().toString();
		value4 = editText4.getText().toString();
		value5 = editText5.getText().toString();
		value6 = editText6.getText().toString();
		
		
		//	Below Code is to display the EditText values stored inside Variables.
		Toast.makeText(this, value1 + " \n" + value2 + " \n" + value3 + " \n" + value4 + " \n" + value5 +
				" \n" + value6 , Toast.LENGTH_LONG).show();
	}


}

Explaining above Code :

  • Line 13 & 26-31 We have declared 6 EditText, and linked them with EditText of XML Layout file(activity_main.xml).
  • Line 16 Declaring 6 String variables to hold values of our EditText.
  • Line 38-46 It sets a Focus Change Listener for 1st EditText, i.e. either ‘we click on it’ or ‘having focus at 1st EditText we click at another place’ Focus change event will happen. Using focus change listener we catch such events. Such listeners are used while performing validations. Try it by removing the comments.
  • Line 60-65 On button click from user we fetch data from our EditText and store them in string variables. For this we follow syntax :  editText_Name.getText().toString() where getText() extracts value from our EditText in raw Object format and toString() converts it into string value.
  • Line 69-70 We have made provision of displaying values of all our EditText using Toast.

 

Final Output :


android edittext
                                  android edittext

 

Do It Yourself :
Try focus change Listener from MainActivity.java Line 38-46. Also you can try applying validations to them (Hint : Inside OnFocusChange method  validate value of EditText using If-condition )

 

Report Errors + Bugs & Become Insider for Nestedif.com

We would like to hear you, if you find any error or misspelled phrase while reading our tutorials. By reporting mistakes through email to insider@nestedif.com you could help other peers.