Android EditText : Simplified, transparent and less painful.

So it turns out, edit texts aren’t as handy as they seem to be. If your app needs a lot of customisation, the lack of pre-defined controls could make this Android UI widget a nuisance to work with. Its better we create our own custom edittext controller to avoid such hurdles.

But first, what’s the difference between an EditText and a TextView in Android? None! An EditText is just an overlay over TextView that configures itself to be editable. It is a subclass of TextView that includes rich editing capabilities and some okay-ish features which if customised to a personal taste might work wonders for your app.

Let’s face it, user input is agreeably one of the most scary aspect of any app if we leave out the technicalities behind it. Everyone hate forms and no one seem to fill them correctly at one go. The mere amount of validation that need to be performed by the developer on such input fields is a scary number and the code tend to repeat itself a lot of times throughout the app. De-clutter!!!!

For the sake of categorising, you would usually face issues in

• Input field validation
• User actions, such as when a user has started and stopped typing a text.
• Toggling events based on user actions on the virtual keyboard, for example, you need to save the text a user has written when he dismisses the keyboard using back key on his phone.
• Applying custom fonts to every edittext you created.

There is no need to implement these lot of functionalities for every edittext that is defined in your app. Java was clearly not defined to be this ineffective at solving problems.

Let’s sort it out once and for all and create our custom edittext that handles all these issues and is re-usable and testable.

Create a class named CustomEditText in your project directory and make it extend android.support.v7.widget.AppCompatEditText. The first 3 constructs are very important. Make sure you don’t miss any of these.

Now that we have created our own class, go to your res/layout folder and replace normal EditText with your CustomEditText in the xml file.

custom_edit_text.xml

Once you do this, every input field that you define will automatically come with all the properties of CustomEditText. Let’s get to the issues one at a time now.

Custom Fonts : If you need to apply fonts, CustomEditText now look like

Every single edit text in your app will now have this font set up on initialisation and you don’t need to do it again.

Handling Virtual Keyboard actions : It is likely that a user will press the back button to dismiss the keyboard and change context (which may include fragment state change, activity pause or orientation change). When he returns to that edittext later, its a good practise to keep the old text readily available for him to modify or not. This is also useful to save the form state for filling it later. Go ahead and override the onKeyPreIme() in your CustomEditText class.

Yup, you would also need a listener to notify the view whatever is going down under. We have interfaces for that. Create a new interface as,

public interface OnKeyboardDownListener{
    void onKeyDown();
}

Now your CustomEditText would look like

That’s it, your highly customisable and test-ready form field. Lets go to Acitivity or Fragment and see how it performs. Following is a snippet,

CustomEditText edittext = (CustomEditText)findViewById(R.id.custom);
// Dismiss keyboard on pressing 'back key' and save description data
edittext.setListener(new CustomEditText.OnKeyboardDownListener() {
    @Override
    public void onKeyDown() {
        String toBeSaved = edittext.getText().toString();
        imm.hideSoftInputFromWindow(getView().getWindowToken(), 0);
        // below can be any function that you want to toggle
        saveData(toBeSaved);
    }
});

With this, we are done here and the stead is in your hands. Play with it, test it and do as many customisations as you like.

I will recommend trying above example with different overrides on default EditText’s functions and implemeting a TextWatcher class with it. Layout properties can also be changed via CustomEditText! Try to make change to font color, font family, width, textSize etc and see the result. You can also try performing instrumentation tests on the above example.

Thank you for reading. This is Kanishk, a fellow Android’er.