Floating label for edit text was introduced with material design library.Initially it acts as hint inside the Edit Text. When user touches the edit text or start entering the text, it moves to the top of the Edit Text with an animation as a floating label.
In this tutorial, we will create one login form using floating label edit texts as shown below .
You can pull this project from Github here.
TextInputLayout:
This layout was introduced with Design Library and we this is used to wrap around an editText to create a floating label .
Floating label is picked from the “hint” text defined for that editText.
We also have two more methods ”setErrorEnabled(boolean)” and ”setError(CharSequence)” to show errors under an EditText .
-
First create one new project on android Studio
-
Include design library in dependencies tab of your project’s build.gradle
compile 'com.android.support:design:23.1.1'- Update your values/styles.xml file
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="colorControlNormal">@color/colorHint</item>
<item name="colorControlActivated">@color/floatingColor</item>
</style>
<style name="DialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">@color/colorAccent</item>
<item name="android:textColorPrimary">@color/textColor</item>
<item name="android:background">@color/colorBack</item>
</style>
</resources>- Update values/strings.xml
<resources>
<string name="app_name">Login</string>
<string name="hint_email">Enter Your email</string>
<string name="hint_password">Enter Password</string>
<string name="hint_empty">This field cannot be blank</string>
<string name ="error_email">Please enter a valid email</string>
</resources>- Create one Activity “MainActivity”
public class MainActivity extends AppCompatActivity {
private EditText etEmail;
private EditText etPassword;
private Button loginButton;
private String emailText;
private String pwdText;
private TextInputLayout emailLayout;
private TextInputLayout pwdLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
etEmail = (EditText) findViewById(R.id.editTextEmail);
etPassword = (EditText) findViewById(R.id.editTextPassword);
loginButton = (Button) findViewById(R.id.button);
emailLayout = (TextInputLayout) findViewById(R.id.layout_email);
pwdLayout = (TextInputLayout) findViewById(R.id.layout_password);
loginButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
login();
}
});
}
private void login() {
emailText = etEmail.getText().toString().trim();
pwdText = etPassword.getText().toString().trim();
if (emailText.isEmpty()) {
emailLayout.setError(getString(R.string.hint_empty));
} else if (!android.util.Patterns.EMAIL_ADDRESS.matcher(emailText).matches()) {
emailLayout.setError(getString(R.string.error_email));
} else {
emailLayout.setErrorEnabled(false);
}
if (pwdText.isEmpty()) {
pwdLayout.setError(getString(R.string.hint_empty));
} else {
pwdLayout.setErrorEnabled(false);
}
if (!emailLayout.isErrorEnabled() && !pwdLayout.isErrorEnabled()) {
AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.DialogStyle);
builder.setMessage("Successfull !!");
builder.setPositiveButton("OK", null);
builder.show();
}
}
}- Update activity_main.xml layout file
<?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:background="@color/colorBack"
android:focusable="true"
android:focusableInTouchMode="true"
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="com.codevscolor.floatinglabeletdemo.MainActivity">
<android.support.design.widget.TextInputLayout
android:id="@+id/layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="@color/colorHint">
<EditText
android:id="@+id/editTextEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_email"
android:inputType="textEmailAddress"
android:textColor="@color/textColor" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/layout_email"
android:textColorHint="@color/colorHint">
<EditText
android:id="@+id/editTextPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp"
android:hint="@string/hint_password"
android:inputType="textPassword"
android:textColor="@color/textColor" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/layout_email"
android:layout_marginTop="104dp"
android:background="@color/buttoncolor"
android:text="Login"
android:textColor="@color/textColor" />
</RelativeLayout>Thats all.Clone this project from Github and try to run it on Android Studio. If you are having any problem or if you have any doubt , please let me know :)