Всплывающие подсказки для EditText: фичи Design Support Library

Сегодня я расскажу вам об EditText Floating Labels (всплывающие подсказки для EditText) в Android.

Для начала нужно прописать следующие зависимости в файле build.gradle, который лежит на уровне приложения:

dependencies {
    compile 'com.android.support:design:23.2.+'
}

Для отображения всплывающих подсказок над полем EditText используется TextInputLayout, который позволяет обернуть находящийся в нем view-элемент, в нашем случае это поле EditText. Такая компоновка также позволяет показать сообщения об ошибках, расположенные ниже поля EditText. Когда поле EditText в фокусе, назначенная подсказка-«поплавок» будет показана на верхней левой стороне.

Теперь нам нужно внести изменения в основной макет приложения:

<?xml version="1.0" encoding="utf-8"?>
<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>

Ну и соответственно унаследоваться от AppCompatActivity, чтобы изменения стали отображаться:

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

Также не забываем прописать строковые ресурсы:

<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>

Кроме подсказки, мы можем показать ошибку в TextInputLayout. Для этого нужно воспользоваться методом setErrorEnabled (…) и setError (…). В качестве примера можно проверить поле входа в систему во время фокусировки на другой view-элемент. Для этого достаточно обновить наш метод OnCreate(…) и реализовать интерфейс onFocusChange(…) с его методами.

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