Material Error & Helper Text Forms

Material Error & Helper Text

Download MaterialX 2.8

Get the Full Android Source Code for all the listed Layouts and more.

Layout Screenshot

Layout
Java

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:theme="@style/AppTheme.Material">

<com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:layout_height="wrap_content">

</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/input_layout_username"
                style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Username"
                app:boxBackgroundColor="@color/grey_5"
                app:errorEnabled="true"
                app:errorIconDrawable="@drawable/ic_error"
                app:errorIconTint="@color/red_500"
                app:helperText="*required">

<com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/input_text_username"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="example" />

</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Phone Number"
                app:boxBackgroundColor="@color/grey_5"
                app:counterEnabled="true"
                app:counterMaxLength="15"
                app:helperText="optional">

<com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="phone"
                    android:maxLength="15" />

</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Email Address"
                app:boxBackgroundColor="@color/grey_5"
                app:helperText="*required">

<com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

</com.google.android.material.textfield.TextInputLayout>

</LinearLayout>

</androidx.core.widget.NestedScrollView>

</LinearLayout>

											
package com.material.components.activity.form;

import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import com.google.android.material.textfield.TextInputEditText;
import com.google.android.material.textfield.TextInputLayout;
import com.material.components.R;
import com.material.components.utils.Tools;

public class FormMaterialErrorHelperText extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_form_material_error_helper_text);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setNavigationIcon(R.drawable.ic_chevron_left);
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle("Sign Up");
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        Tools.setSystemBarColor(this);

        TextInputLayout input_layout_username = findViewById(R.id.input_layout_username);
        input_layout_username.setError("Error: at least 8 characters");

        TextInputEditText input_text_username = findViewById(R.id.input_text_username);
        input_text_username.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                if(s.toString().trim().length() < 8){
                    input_layout_username.setErrorEnabled(true);
                    input_layout_username.setError("Error: at least 8 characters");
                } else {
                    input_layout_username.setErrorEnabled(false);
                    input_layout_username.setError("");
                }
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_setting, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            finish();
        } else {
            Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show();
        }
        return super.onOptionsItemSelected(item);
    }
}