Floating Label EditText Example Using Android Design Support Library

Please follow and like us:

floating label edittext

 

EditText is very important part of Android User Interface components.

 

While typing in EditText , it hides the hint which may create problem to identify EditText without label but now with the help of new android material design support library, we have TextInputLayout which shows hint as Floating Label EditText.

 

We can also set error message bellow the EditText by just calling setError() method.

Floating Label EditText Example Using Android Design Support Library

 

 If you miss previous sections  of “Android Design Support Library Tutorial” series, check below links. For overview of the series, refer to the “Design Support Library Intro“.

 

Section 1: Navigation View

 

Let’s start, awesome animated Floating Label with EditText!

Add Android design support library dependency

Add a below line to include design support library in dependencies of build.gradle file:

compile 'com.android.support:design:22.2.1'

Step 1: Add EditText Inside TextInputLayout for Floating label EditText

Create activity_main.xml file in layout folder which add  EditText in TextInputLayout for Floating Label EditText Effect

<?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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".SplashActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/user_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/etusername"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="User Name" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">
        <EditText
            android:id="@+id/etpassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:background="@color/primaryColor"
        android:padding="8dp"
        android:text="Login"
        android:textColor="#fff" />
</LinearLayout>

Step 2: Implement Floating Label EditText with Error message for floating lablel EditText

Implement Floating Label EditText Logic with error message in MainActivity.java file .

import android.os.Bundle;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity{

    private TextInputLayout mUserName,mPassword;
    private Button mLogin;
    private EditText etUsername,etPassword;

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

        mUserName= (TextInputLayout) findViewById(R.id.user_name);
        mPassword= (TextInputLayout) findViewById(R.id.password);
        etUsername= (EditText) findViewById(R.id.etusername);
        etPassword= (EditText) findViewById(R.id.etpassword);
        mLogin= (Button) findViewById(R.id.login);

        mLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                if(etUsername.getText().toString().length()==0){
                    //set error
                    mUserName.setError("Please Enter Username");
                }  else {
                    //remove error
                    mUserName.setError(null);
                }

                if(etPassword.getText().toString().length()==0){
                    mPassword.setError("Please Enter Password");
                } else {
                    mPassword.setError(null);
                }

            }
        });
    }
}

Conclusion

Floating Label EditText provides great User Interface experience by providing animated hint over EditText field. Hope you like our simple example of Floating Label EditText using Android Material Design Support Library.

Happy Coding 🙂

 

nirav kalola