(Tutorial Android) Floating Label for EditText Android Material Design

Salah satu komponen yang paling dasar di Android adalah EditText. EditText merupakan komponen input dari user. Sejak diperkenalkannya material design, komponen EditText sedikit ditambahin animasi yang menarik yaitu Floating Label. Konsep Floating Label EditText diperkenalkan pada material design dengan tampilan yang interaktif. Tampilannya seperti hint di EditText kemudian ketika user memulai menginputkkan text maka hint tersebut bergerak ke atas dari posisi semula.

Nah. Bagaimana caranya membuat floating label? Pada design support library terdapat komponen yang dinamakan TextInputLayout untuk menampilkan floating label. Selain itu kita juga dapat menampilkan pesan error dengan setErrorEnabled() dan setError().

Berikut implementasinya

Tambahkan library support design di gradle app.

Tambahkan TextInputLayout di layout activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="wim.example.com.androidfloatinglabel.MainActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/lyUsername"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp">
        <EditText
            android:id="@+id/username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Username"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/lyEmail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/lyUsername"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp">
        <EditText
            android:id="@+id/email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textEmailAddress"
            android:hint="Email"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/lyPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/lyEmail"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp">
        <EditText
            android:id="@+id/password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Password"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"
        android:id="@+id/btnSubmit"
        android:layout_below="@+id/lyPassword"
        android:layout_marginTop="30dp"
        android:layout_alignLeft="@+id/lyPassword"
        android:layout_alignStart="@+id/lyPassword"
        android:layout_alignRight="@+id/lyPassword"
        android:layout_alignEnd="@+id/lyPassword" />

</RelativeLayout>

Edit kelas MainActivity.java berikut :

package wim.example.com.androidfloatinglabel;

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

public class MainActivity extends AppCompatActivity {

    Button btnSubmit;
    TextInputLayout lyUsername, lyEmail, lyPassword;
    EditText textUsername, textEmail, textPassword;

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

        btnSubmit = (Button) findViewById(R.id.btnSubmit);
        lyUsername = (TextInputLayout) findViewById(R.id.lyUsername);
        lyEmail = (TextInputLayout) findViewById(R.id.lyEmail);
        lyPassword = (TextInputLayout) findViewById(R.id.lyPassword);
        textUsername = (EditText) findViewById(R.id.username);
        textEmail = (EditText) findViewById(R.id.email);
        textPassword = (EditText) findViewById(R.id.password);

        btnSubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                validation();
            }
        });
    }

    private void validation(){
        if(TextUtils.isEmpty(textUsername.getText().toString())){
            lyUsername.setErrorEnabled(true);
            lyUsername.setError("Username must not empty");
            return;
        }else{
            lyUsername.setErrorEnabled(false);
        }

        if(TextUtils.isEmpty(textEmail.getText().toString())){
            lyEmail.setErrorEnabled(true);
            lyEmail.setError("Email must not empty");
            return;
        }else{
            lyEmail.setErrorEnabled(false);
        }

        if(TextUtils.isEmpty(textPassword.getText().toString())){
            lyPassword.setErrorEnabled(true);
            lyPassword.setError("Password must not empty");
            return;
        }else{
            lyPassword.setErrorEnabled(false);
        }

        if(!new EmailValidation().validateEmail(textEmail.getText().toString())){
            lyEmail.setErrorEnabled(true);
            lyEmail.setError("Please enter a valid email address");
            return;
        }else{
            lyEmail.setErrorEnabled(false);
        }

        Toast.makeText(this, "Thank You!", Toast.LENGTH_SHORT).show();
    }
}

Tambahkan kelas utility untuk mengecek valid email

package wim.example.com.androidfloatinglabel;

import java.util.regex.Matcher;
import java.util.regex.Pattern;
/**
 * Created by wim on 4/24/16.
 */
public class EmailValidation {

    private static final String EMAIL_PATTERN = "^[a-zA-Z0-9#_~!$&'()*+,;=:.\"(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$";
    private Pattern pattern = Pattern.compile(EMAIL_PATTERN);
    private Matcher matcher;

    public boolean validateEmail(String email) {
        matcher = pattern.matcher(email);
        return matcher.matches();
    }
}

Build dan jalankan maka hasilnya sebagai berikut :

Source code lengkap dapat dilihat di https://github.com/wimsonevel/AndroidFloatingLabel

Sekian dan semoga bermanfaat.
Happy Coding :)

Share this :