EditText плаваючі заголовки: Бібліотека підтримки Android

Сьогодні, поговоримо про EditText Floating Labels в Android додатках.

Новий TextInputLayout дозволяє нам запаковувати EditText для можливості показувавти плаваючі заголовки над полями EditText. Такж ми маємо можливість показувати помилки під полем EditText. Коил форма EditText в фокусі, підказка піднімається над view в ліву частину.
Перш за все нам необхіжно додати бібліотеку або прописати залежність в файлі gradle.

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

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

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

Після цього оновлюємо файл strings.xml file в проекті.

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

1. <resources>
2. <string name="app_name">EditText Floating Labels Demo</string>
3. <string name="username">Username</string>
4. <string name="password">Password</string>
5. <string name="sign_in">Sign In</string>
6. <string name="login_error">Username can not be empty</string>
7. </resources>

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

Наступний наш крок - додати layout до проекту, над яким ми експерементуємо..

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

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:paddingLeft="12dp"
7. android:paddingRight="12dp"
8. android:paddingTop="8dp"
9. android:paddingBottom="8dp">
10. 
    
11. <android.support.design.widget.TextInputLayout
12. android:id="@+id/login_layout"
13. android:layout_width="match_parent"
14. android:layout_height="wrap_content"
15. android:layout_marginTop="8dp">
16. 
    
17. <EditText
18. android:id="@+id/edit_text_email"
19. android:layout_width="match_parent"
20. android:layout_height="wrap_content"
21. android:inputType="textEmailAddress"
22. android:hint="@string/username" />
23. 
    
24. </android.support.design.widget.TextInputLayout>
25. 
    
26. <android.support.design.widget.TextInputLayout
27. android:id="@+id/password_layout"
28. android:layout_width="match_parent"
29. android:layout_height="wrap_content"
30. android:layout_marginTop="8dp">
31. 
    
32. <EditText
33. android:id="@+id/edit_text_password"
34. android:layout_width="match_parent"
35. android:layout_height="wrap_content"
36. android:inputType="textPassword"
37. android:hint="@string/password" />
38. 
    
39. </android.support.design.widget.TextInputLayout>
40. 
    
41. <Button
42. android:layout_width="wrap_content"
43. android:layout_height="wrap_content"
44. android:text="@string/sign_in"
45. android:id="@+id/sing_in_button"
46. android:layout_gravity="center_horizontal" />
47. 
    
48. </LinearLayout>

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

Останнім нашим кроком буде оновлення  activity.

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

1. public class MainActivity extends AppCompatActivity {
2. @Override
3. protected void onCreate(Bundle savedInstanceState) {
4. super.onCreate(savedInstanceState);
5. setContentView(R.layout.main_activity);
6. }
7. }

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

Ми також можемо показувати повідомлення про помилку в TextInputLayout. Для цього ми мусимо викоритати метод setErrorEnabled(boolean) та setError(CharSequence). Як приклад ми будемо перевіряти поле login на наявність символів. Тепер нам треба оновити метод 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);
        }
    }
}

1. public class MainActivity extends AppCompatActivity implements View.OnFocusChangeListener {
2. 
   
3. TextInputLayout mUsernameLayout;
4. EditText mUsername;
5. EditText mPassword;
6. 
   
7. @Override
8. protected void onCreate(Bundle savedInstanceState) {
9. super.onCreate(savedInstanceState);
10. setContentView(R.layout.main_activity);
11. 
    
12. mUsernameLayout = (TextInputLayout) findViewById(R.id.login_layout);
13. mUsername = (EditText) findViewById(R.id.edit_text_email);
14. mPassword = (EditText) findViewById(R.id.edit_text_password);
15. 
    
16. mUsername.setOnFocusChangeListener(this);
17. mPassword.setOnFocusChangeListener(this);
18. }
19. 
    
20. @Override
21. public void onFocusChange(View v, boolean hasFocus) {
22. if (v != mUsername && mUsername.getText().toString().isEmpty()) {
23. mUsernameLayout.setErrorEnabled(true);
24. mUsernameLayout.setError(getResources().getString(R.string.login_error));
25. } else {
26. mUsernameLayout.setErrorEnabled(false);
27. }
28. }
29. }

Бачимо результат, мені здається дуже гарно.

source