UI components

EditText Floating Labels: Android design support library

Alex Zhukovich 2 min read
EditText Floating Labels: Android design support library
Table of Contents

Today, I'm talking about EditText Floating Labels in Android application.

The new TextInputLayout allows us to wrap EditText view in order to display floating labels above the EditText. This layout also let show error messages below the EditText. When an EditText has focus, the assigned hint will "float" above the view to the top-left hand side.

Firstly need to add library or add a dependency to gradle file.

dependencies {
    compile 'com.android.support:design:22.2.0'
}

After it need to update the strings.xml file in the project.

<resources>
    <string name="app_name">EditText Floating Labels Demo</string>
    <string name="username">Username</string>
    <string name="password">Password</string>
    <string name="sign_in">Sign In</string>
    <string name="login_error">Username can not be empty</string>
</resources>

Next step is updating layout for the project.

<?xml version="1.0" encoding="utf-8"?><br />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="12dp"
    android:paddingRight="12dp"
    android:paddingTop="8dp"
    android:paddingBottom="8dp">
    
    <android.support.design.widget.TextInputLayout
        android:id="@+id/login_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp">
        
        <EditText
            android:id="@+id/edit_text_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:hint="@string/username" />
    </android.support.design.widget.TextInputLayout>
    
    <android.support.design.widget.TextInputLayout
        android:id="@+id/password_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp">
        
        <EditText
            android:id="@+id/edit_text_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="@string/password" />
    </android.support.design.widget.TextInputLayout>
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/sign_in"
        android:id="@+id/sing_in_button"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

Last step is update activity.

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
    }
}

We can also show error in TextInputLayout. We need to use method setErrorEnabled(boolean) and setError(CharSequence). As example, we can check login field during focus another view. For it need to update onCreate function and implement onFocusChange function.

public class MainActivity extends AppCompatActivity implements View.OnFocusChangeListener {
    TextInputLayout mUsernameLayout;
    EditText mUsername;
    EditText mPassword;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        mUsernameLayout = (TextInputLayout) findViewById(R.id.login_layout);
        mUsername = (EditText) findViewById(R.id.edit_text_email);
        mPassword = (EditText) findViewById(R.id.edit_text_password);
        mUsername.setOnFocusChangeListener(this);
        mPassword.setOnFocusChangeListener(this);
    }
    
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (v != mUsername && mUsername.getText().toString().isEmpty()) {
            mUsernameLayout.setErrorEnabled(true);
            mUsernameLayout.setError(getResources().getString(R.string.login_error));
        } else {
            mUsernameLayout.setErrorEnabled(false);
        }
    }
}
EditText floating labels

Mobile development with Alex

A blog about Android development & testing, Best Practices, Tips and Tricks

Share
More from Mobile development with Alex
Jetpack Compose: Divider
Jetpack Compose

Jetpack Compose: Divider

This article covers using and customizing the “Dividers” components from the "Material 2" and "Material 3" libraries in the Jetpack Compose. In addition to that, we will explore the difference between implementation of the Divider, HorizontalDivider and VerticalDivider.
Alex Zhukovich 4 min read
Jetpack Compose: Switch
Jetpack Compose

Jetpack Compose: Switch

This article covers creating and customizing the "Switch" component in Jetpack Compose for enabling/disabling features. It explores differences between "Material" and "Material 3" libraries, and how to interact with and verify the Switch component's state in UI tests.
Alex Zhukovich 8 min read

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to Mobile development with Alex.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.