Open Source For Geeks: Android material design floating labels on EditText and Password visibility Toggle

Sunday, 2 April 2017

Android material design floating labels on EditText and Password visibility Toggle

Background

With android design support library new element - TextInputLayout was introduced. With this we can totally omit static labels that we put before text input elements (EditText for example). With this label will float on the top of the EditText when user focuses on that field for entering data. Also we can show error on the same field post validation. That gets show floating below the EditText. It also has passwordToggleEnabled which lets you toggle the visibility of your password field with an eye icon (it can be customized to use a different icon too). We will see all of these in this post.

Android material design floating labels on EditText and Password visibility Toggle

Make sure your app level gradle has following dependencies added -

    compile 'com.android.support:appcompat-v7:25.1.1'
    compile 'com.android.support:design:25.3.1'

NOTE : Base version of you appcompat and your design library should be same. For eg. it's 25 for this case.

Next lets go straight to the layout. The feature that we are looking for goes something like this -

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
 app:passwordToggleContentDescription="@string/passwordToggleContentDescription"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@color/colorAccent">

            <EditText
                android:id="@+id/input_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_password"
                android:inputType="textPassword"/>

        </android.support.design.widget.TextInputLayout>

Now I have combined both floating labels and password toggle in a single example. Lets see how it works now.

First of all you need to wrap EditText element inside TextInputLayout element.
Next android:hint value of EditText will come out on top as a floating label.
For password visibility to be toggle we need to provide app:passwordToggleEnabled="true" attribute. Others are optional really. Lets see what all attributes it supports.

passwordToggleEnabled : allows you choose whether or not you want the password visibility to be toggled.
passwordToggleContentDescription : allows a string to be set for the content description. This is used for accessibility feature.
passwordToggleDrawable : allows one set a different icon other than the default visibility toggle icon (eye icon).
passwordToggleTint : allows the visibility toggle icon to be tinted to whatever colors you indicate.
passwordToggleTintMode : sets the blending mode used to apply the background tint.

You can see the complete specs in android developers site. It would look like below -

Final screen is just showing a toast when you press login and all validations have gone though successfully.Speaking of validation lets come to it.

Do not worry about the minute code details like string resources. You can find the complete code on my github repo -

https://github.com/aniket91/AndroidFeaturesDemo

Lets just focus on concepts for now.

We said in our initial discussion that TextInputLayout can handle errors as well and they are shown floating just below the EditText. Lets look at the code for it.

In your activity's onCreate() method get a reference to the TextInputLayout element and reference to the EditText wrapped in it.
Next you can addTextChangedListener() to your EditText and do validations there.
To set and display an error you simply need to call setError()on textInputLayout element. To remove error you can simply call setErrorEnabled(false).

Lets see how we can do it in case of our Email field. First of all get a reference to TextInputLayout and the EditeText in it -

        inputLayoutEmail = (TextInputLayout) findViewById(R.id.input_layout_email);

        inputEmail = (EditText) findViewById(R.id.input_email);

Next add addTextChangedListener to inputEmail and in it's afterTextChanged() method simply do your validations. In this case we are just calling a private validate method from afterTextChanged() method as follows -

    private boolean validateEmail(String text) {
        if(!isValidEmail(text)) {
            inputLayoutEmail.setError(getString(R.string.error_email));
            inputEmail.requestFocus();
            return false;
        }
        else {
            inputLayoutEmail.setErrorEnabled(false);
        }
        return true;
    }



    private boolean isValidEmail(String email) {
        return !TextUtils.isEmpty(email) && android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches();
    }

and you are done. You should see error as shown in following screenshots -