EditText in Android – OverView and Implementation

  EditText in Android – Implementation and Advanced Tips & Tricks

EditText is a View and is used to provide editable text by the user. This is used mainly in forms and other places where user has to input values from their side. Edit Text is derived from TextView and is powerful. It creates a place for interaction between the system and the User. The properties of EditText are given below.

Creating a EditText in XML

EditText in XML
Edit Text in XML

Code Snippet:

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

EditText Properties

The important properties that are needed to implement the View is given below.

android:text – Where the text inside the TextBox is specified

android:background – Provides a background color/image/shape (Possible to provide shapes through style property)

android:drawableRight – Important inorder to provide any icons inside the field (Improves the UI feel of the App)

android:id – Gives a unique id to the view with which it can be referenced

android:visibility – Provides visibility to the text (‘gone’, ‘visible’,’invisible’).

There are several more properties associated with EditText (properties like margin, gravity, layout_gravity are default for any views and applicable for Edit Text also).

Check this page for all the related properties.

 

Accessing EditText in the Activity

In order to access the EditText in the Activity we call the findViewById and pass the id to map it to the signIn variable like below.

EditText signIn = (EditText) findViewById(R.id.signin);

The variable signIn can then be used to set any properties. Check here, for list of all the public functions that are available.

I have set the visibility to invisible using the code below.

signIn.setVisibility(View.INVISIBLE);

Consider the activity i have created below. Can you spot the Edit Text here.

Spot the Edit Text
Spot the Edit Text view

 

"<yoastmark

Can you guess how i created it. What are the properties i used?

<EditText 
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="22dp"
android:layout_marginRight="35dp"
android:layout_marginTop="20dp"
android:background="#0000"
android:drawableRight="@drawable/user"
android:hint="Username"
android:inputType="text"
android:padding="16dp"
android:textColor="#ADCCE2"
android:textColorHint="#ADCCE2"
android:textSize="16dp" />

The above properties are important to understand so that we can improve on the overall aesthetics of the Application.

You can check out my post here, i have listed tools to use to create a professional looking application. I modelled this activity based on that.

Custom EditText – Advanced Tips and Tricks

There are ways to create a custom Edit Text based on the fonts that you need using the code below. Our class inherits the EditText and overrides some of its methods to create the Custom View like we need.

package customfonts;

import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.EditText;


public class MyEditText extends EditText {

    public MyEditText(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public MyEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyEditText(Context context) {
        super(context);
        init();
    }

    private void init() {
        if (!isInEditMode()) {
            Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/Lato-Regular.ttf");
            setTypeface(tf);
        }
    }

}

Include this in your project to create the custom view. You can replace the fonts/Lato-Regular using the font of your choice. Once, the custom view is created, XML becomes.

<!-- Using customfont tag here-->

<customfonts.MyEditText
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="22dp"
android:layout_marginRight="35dp"
android:layout_marginTop="20dp"
android:background="#0000"
android:drawableRight="@drawable/user"
android:hint="Username"
android:inputType="text"
android:padding="16dp"
android:textColor="#ADCCE2"
android:textColorHint="#ADCCE2"
android:textSize="16dp" />

Learn to place the views and make sure you have a proper wireframe design before you create a layout. Check the post here, to know how i created an application in less than 3 hours(Am really serious!!!).

“Learn and be Curious”.

Leave a Comment