Android floating labels were introduced in android design support library to display a floating label over EditText. Initially it acts as hint in EditText when the field is empty. When user start inputting the text, it starts animating by moving to floating label position.This article demonstrates the usage of floating labels with a simple form validation example.
TextInputLayout
In design support library a new element called TextInputLayout was introduced to display the floating label on EditText. The EditText has to be wrapped by TextInputLayout in order to display the floating label. You can also set an error message to EditText by using setErrorEnabled() and setError()methods.
TextInputLayout takes the value of android:hint assigned to EditText and displays it as floating label.
<android.support.design.widget.TextInputLayoutandroid:id="@+id/input_layout_password"android:layout_width="match_parent"android:layout_height="wrap_content"> <EditText android:id="@+id/input_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/hint_email" /></android.support.design.widget.TextInputLayout>
Android Metarial design Floating Labels
Simple Form Validation Example
Now we’ll create a simple android app to really understand the usage of TextInputLayout. This app contains a simple form with floating labels, input validations and error messages enabled.
1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project.
2. Open build.gradle and add design support library dependency.
com.android.support:design:23.0.1
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.1' compile 'com.android.support:design:23.0.1'} |
3. Apply the material design theme by following the steps mentioned here. But this step is optional.
4. Add the below string values to strings.xml located under res ⇒ values.
<resources> <string name="app_name">Floating Labels</string> <string name="action_settings">Settings</string> <string name="hint_name">Full Name</string> <string name="hint_email">Email</string> <string name="hint_password">Password</string> <string name="btn_sign_up">Sign Up</string> <string name="err_msg_name">Enter your full name</string> <string name="err_msg_email">Enter valid email address</string> <string name="err_msg_password">Enter the password</string></resources> |
5. Open layout file your main activity (activity_main.xml) and add the below layout. This code creates a simple form with three input fields. Here you can see the EditText is wrapped by TextInputLayout.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="match_parent" android:layout_marginTop="?attr/actionBarSize" android:orientation="vertical" android:paddingLeft="20dp" android:paddingRight="20dp" android:paddingTop="60dp"> <android.support.design.widget.TextInputLayout android:id="@+id/input_layout_name" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/input_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:singleLine="true" android:hint="@string/hint_name" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/input_layout_email" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/input_email" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:hint="@string/hint_email" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/input_layout_password" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/input_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPassword" android:hint="@string/hint_password" /> </android.support.design.widget.TextInputLayout> <Button android:id="@+id/btn_signup" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/btn_sign_up" android:background="@color/colorPrimary" android:layout_marginTop="40dp" android:textColor="@android:color/white"/> </LinearLayout></android.support.design.widget.CoordinatorLayout> |
6. Open MainActivity.java and do the below changes. Here I have added few methods to validate user inputted data like name, email and password. I also assigned a TextWatcher to all the edit texts to validate the input while user is the typing it. setError() methods is called on to edit text to display the error message when the input is invalid or empty.
package info.smr.floatinglabels;import android.os.Bundle;import android.support.design.widget.TextInputLayout;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.text.Editable;import android.text.TextUtils;import android.text.TextWatcher;import android.view.View;import android.view.WindowManager;import android.widget.Button;import android.widget.EditText;import android.widget.Toast;public class MainActivity extends AppCompatActivity { private Toolbar toolbar; private EditText inputName, inputEmail, inputPassword; private TextInputLayout inputLayoutName, inputLayoutEmail, inputLayoutPassword; private Button btnSignUp; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); inputLayoutName = (TextInputLayout) findViewById(R.id.input_layout_name); inputLayoutEmail = (TextInputLayout) findViewById(R.id.input_layout_email); inputLayoutPassword = (TextInputLayout) findViewById(R.id.input_layout_password); inputName = (EditText) findViewById(R.id.input_name); inputEmail = (EditText) findViewById(R.id.input_email); inputPassword = (EditText) findViewById(R.id.input_password); btnSignUp = (Button) findViewById(R.id.btn_signup); inputName.addTextChangedListener(new MyTextWatcher(inputName)); inputEmail.addTextChangedListener(new MyTextWatcher(inputEmail)); inputPassword.addTextChangedListener(new MyTextWatcher(inputPassword)); btnSignUp.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { submitForm(); } }); } /** * Validating form */ private void submitForm() { if (!validateName()) { return; } if (!validateEmail()) { return; } if (!validatePassword()) { return; } Toast.makeText(getApplicationContext(), "Thank You!", Toast.LENGTH_SHORT).show(); } private boolean validateName() { if (inputName.getText().toString().trim().isEmpty()) { inputLayoutName.setError(getString(R.string.err_msg_name)); requestFocus(inputName); return false; } else { inputLayoutName.setErrorEnabled(false); } return true; } private boolean validateEmail() { String email = inputEmail.getText().toString().trim(); if (email.isEmpty() || !isValidEmail(email)) { inputLayoutEmail.setError(getString(R.string.err_msg_email)); requestFocus(inputEmail); return false; } else { inputLayoutEmail.setErrorEnabled(false); } return true; } private boolean validatePassword() { if (inputPassword.getText().toString().trim().isEmpty()) { inputLayoutPassword.setError(getString(R.string.err_msg_password)); requestFocus(inputPassword); return false; } else { inputLayoutPassword.setErrorEnabled(false); } return true; } private static boolean isValidEmail(String email) { return !TextUtils.isEmpty(email) && android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches(); } private void requestFocus(View view) { if (view.requestFocus()) { getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE); } } private class MyTextWatcher implements TextWatcher { private View view; private MyTextWatcher(View view) { this.view = view; } public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { } public void afterTextChanged(Editable editable) { switch (view.getId()) { case R.id.input_name: validateName(); break; case R.id.input_email: validateEmail(); break; case R.id.input_password: validatePassword(); break; } } }}Android Metarial design Floating Labels  Android Metarial design Floating Labels -Error message |
No comments:
Post a Comment