Android floating labels were introduced in Android Lollipop’s Material design that completely refreshed the layout.

Floating Labels as the name suggests floats from acting as a hint in EditText to acting as labels to EditText when a user clicks on EditText to type text.

In this tutorial, we will learn how to use Floating labels in the application.Floating labels are implemented with the help of TextInputLayout and EditText.

TextInputLayout was introduced in android support design library to act as floating labels. EditText is wrapped in TextInputLayout and act as a floating label.TextInputLayout takes the value of android:hint set to EditText and display hint as Floating Label.

1.Open  Android Studio -> New Project->Android Application Project-> Name of Application-> Follow all instructions and complete by clicking on Finish.

2. Add following dependencies to your build.gradle to work with Material design and android support design library.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
}

3. Create a layout for our main screen that will be our MainActivity.java class.

activity_main.xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/firstname"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            >
        <EditText
            android:id="@+id/userfname"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:hint="Enter First Name"/>
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/lastname"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            >
            <EditText
                android:id="@+id/userlname"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:hint="Enter Last Name"/>
        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout
            android:id="@+id/age"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            >
            <EditText
                android:id="@+id/userage"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:hint="Enter your age"/>
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/submit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Submit Details"/>
    </LinearLayout>

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

4. Create MainActivity.java and implemet TextInputLabel and EditText to act as Floating Labels

MainActivity.java

package com.coderzpassion.materialfloatinglabelsample;

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

public class MainActivity extends AppCompatActivity {

    TextInputLayout fname,lname,age;
    EditText firstname,lastname,userage;
    Button submit;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fname=(TextInputLayout)findViewById(R.id.firstname);
        lname=(TextInputLayout)findViewById(R.id.lastname);
        age=(TextInputLayout)findViewById(R.id.age);

        firstname=(EditText)findViewById(R.id.userfname);
        lastname=(EditText)findViewById(R.id.userlname);
        userage=(EditText)findViewById(R.id.userage);
        submit=(Button)findViewById(R.id.submit);
        submit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               boolean check= checkIfDetailsEmpty();
                if(check)
                {
                    //perform something there like send to profile activity or anything u want
                    //i am just displaying a toast to indicate the user
                    Toast.makeText(MainActivity.this,"Details are successfully submited",Toast.LENGTH_LONG).show();
                }
            }
        });
    }
    public boolean checkIfDetailsEmpty()
    {
        if(firstname.getText().toString().equalsIgnoreCase(""))
        {
            fname.setError("Please Enter FirstName");
            firstname.requestFocus();
            return false;
        }
        else
        {
            fname.setErrorEnabled(false);
        }
         if(lastname.getText().toString().equalsIgnoreCase(""))
        {
            lname.setError("Please Enter LastName");
            lastname.requestFocus();
            return false;
        }
         else
         {
             lname.setErrorEnabled(false);
         }
         if(userage.getText().toString().equalsIgnoreCase(""))
        {
            age.setError("Please Enter age");
            userage.requestFocus();
            return false;

        }
         else
         {
             age.setErrorEnabled(false);
         }
        return true;

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Output

          

Related