Replacing EditTexts with TextInputLayouts in Android || Android TextInputLayout Example ||| How to implement Android TextInputLayout

 

 

 

Android TextInputLayout Example..

 

 

 

Replacing EditTexts with TextInputLayouts in Android

 

Introduction: In this tutorial, we will learn how to create a user signup screen in Android using Material Design principles. We will explore the use of TextInputLayout, TextInputEditText, and Button components from the Material Design library to build an intuitive and visually appealing signup form. The signup form will include fields for a mobile number and a password, with proper input validation and error handling. Let's get started!

Step 1: Set Up the Project To begin, create a new Android project in your preferred development environment. Make sure to include the necessary dependencies for Material Design support in your project's build.gradle file.

Step 2: Design the Layout Open the activity_signup.xml layout file and add the necessary views to create the signup form. We will use LinearLayout, TextInputLayout, TextInputEditText, and Button components to design the layout. Here's an example of the XML layout code:

 

 

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    android:gravity="center"
    tools:context=".activities.SignupActivity">

  <androidx.core.widget.NestedScrollView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      >
      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical"
          >

          <com.google.android.material.textfield.TextInputLayout
              android:id="@+id/textInputLayout"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:gravity="center_vertical"
              app:counterEnabled="false"
              app:boxBackgroundMode="outline"
              app:boxBackgroundColor="@color/white"
              app:boxStrokeWidth="1dp"
              app:boxCornerRadiusTopEnd="10dp"
              app:boxCornerRadiusTopStart="10dp"
              app:helperText=""
              app:helperTextEnabled="false"
              app:prefixText="+91"
              app:boxStrokeColor="@color/green"
              app:helperTextTextColor="@color/black"
              app:prefixTextColor="@color/black"
              app:boxCornerRadiusBottomStart="10dp"
              app:boxCornerRadiusBottomEnd="10dp"

              >

              <com.google.android.material.textfield.TextInputEditText
                  android:id="@+id/edNumber"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_gravity="center_vertical"
                  android:hint="Enter Mobile Number"
                  android:inputType="number"
                  android:singleLine="true"
                  android:maxLength="10"
                  android:importantForAutofill="no"
                  tools:ignore="TouchTargetSizeCheck" />
          </com.google.android.material.textfield.TextInputLayout>


          <com.google.android.material.textfield.TextInputLayout
              android:id="@+id/tiEdt"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:gravity="center_vertical"
              app:counterEnabled="false"
              app:boxBackgroundMode="outline"
              app:boxBackgroundColor="@color/white"
              app:boxStrokeWidth="1dp"
              app:passwordToggleEnabled="true"
              app:passwordToggleTint="@color/black"
              app:boxCornerRadiusTopEnd="10dp"
              app:boxCornerRadiusTopStart="10dp"
              app:boxStrokeColor="@color/green"
              app:helperTextTextColor="@color/black"
              app:passwordToggleTintMode="src_in"
              app:boxCornerRadiusBottomStart="10dp"
              app:boxCornerRadiusBottomEnd="10dp"
              >

              <com.google.android.material.textfield.TextInputEditText
                  android:id="@+id/edPassword"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_gravity="center_vertical"
                  android:hint="Password"
                  android:inputType="number"
                  android:maxLength="4"
                  android:singleLine="true"
                  android:imeOptions="actionGo"
                  android:importantForAutofill="no"
                  tools:ignore="TouchTargetSizeCheck" />
          </com.google.android.material.textfield.TextInputLayout>


          <Button
              android:id="@+id/btn_Next"
              android:layout_marginTop="10dp"
              android:layout_marginHorizontal="50dp"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="Next"
              />


      </LinearLayout>
  </androidx.core.widget.NestedScrollView>



</LinearLayout>

 

Step 3: Initialize Views in Activity In the SignupActivity.java class, initialize the views by finding their respective IDs from the layout. Also, set up any necessary listeners or visual customizations. For example, you can customize the hint text color and the end icon tint color using ContextCompat.

Step 4: Handle Signup Button Click Implement the logic to handle the signup button click in the OnClickListener. Retrieve the values entered by the user in the mobile number and password fields. Perform input validation and display appropriate error messages if the input is invalid. If the input is valid, you can proceed to the next step, such as starting a new activity.

 

 

in Main Class......

 

package com.daizzyinfosys.apitesting.activities;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import androidx.core.graphics.drawable.DrawableCompat;
import androidx.core.view.MenuItemCompat;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.content.res.ColorStateList;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.SearchView;
import android.widget.Toast;

import com.daizzyinfosys.apitesting.R;
import com.google.android.material.textfield.TextInputEditText;
import com.google.android.material.textfield.TextInputLayout;

import java.util.ArrayList;

public class SignupActivity extends AppCompatActivity {

    TextInputLayout textInputLayout, tiEdt;
    TextInputEditText edPassword, edNumber;
    Button btn_Next;



    @SuppressLint({"ResourceAsColor", "MissingInflatedId"})
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_signup);

        textInputLayout = findViewById(R.id.textInputLayout);
        tiEdt = findViewById(R.id.tiEdt);
        btn_Next = findViewById(R.id.btn_Next);
        edNumber = findViewById(R.id.edNumber);
        edPassword = findViewById(R.id.edPassword);

        int hintColor = ContextCompat.getColor(this, R.color.green);
        textInputLayout.setHintTextColor(ColorStateList.valueOf(hintColor));
        tiEdt.setHintTextColor(ColorStateList.valueOf(hintColor));

        int toggleColor = ContextCompat.getColor(this, R.color.green);
        Drawable toggleDrawable = tiEdt.getEndIconDrawable();
        if (toggleDrawable != null) {
            toggleDrawable = DrawableCompat.wrap(toggleDrawable);
            DrawableCompat.setTint(toggleDrawable, toggleColor);
            tiEdt.setEndIconDrawable(toggleDrawable);
        }

        btn_Next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                Intent i = new Intent(getApplicationContext(), StateActivity.class);

                String number = edNumber.getText().toString();
                String password = edPassword.getText().toString();

                if (number.isEmpty() || number.length() != 10) {
                    edNumber.setError("Please Enter a 10-digit Number");
                    edNumber.requestFocus();
                } else if (password.isEmpty() || password.length() != 4) {
                    Toast.makeText(SignupActivity.this, "Please Enter a 4-digit OTP", Toast.LENGTH_SHORT).show();
                    edNumber.clearFocus();
                    edNumber.setError(null);
                } else {
                    edNumber.clearFocus();
                    edNumber.setError(null);
//                    startActivity(i);
                }
            }
        });


    }








}

Conclusion: In this tutorial, we covered the process of building a user signup screen in Android using Material Design components. We explored the use of TextInputLayout, TextInputEditText, and Button views to create an intuitive and visually appealing signup form. By following these steps, you can create a professional-looking signup screen that provides a great user experience while adhering to Material Design guidelines.

Remember to implement any additional features or customization based on your specific requirements.

 

 on more exmaple is .. 

 

<com.google.android.material.textfield.TextInputLayout
    android:layout_marginTop="10dp"
    android:layout_marginHorizontal="15dp"
    android:id="@+id/tiEdt"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    app:counterEnabled="false"
    app:boxStrokeWidth="1dp"
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="@color/black"
    app:passwordToggleTintMode="src_in"
    app:boxCornerRadiusBottomStart="10dp"
    app:boxCornerRadiusBottomEnd="10dp"
    android:hint="Password"
    >

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/edPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:inputType="number"
        android:maxLength="4"
        android:singleLine="true"
        android:paddingHorizontal="15dp"
        android:imeOptions="actionGo"
        android:background="@drawable/inputfield"
        android:importantForAutofill="no"
        tools:ignore="TouchTargetSizeCheck" />
</com.google.android.material.textfield.TextInputLayout>

 this is its style ... 

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke android:width="0.5dp" android:color="@color/halfBlack"/>
 <solid android:color="@color/white"/>
    <corners android:radius="10dp"></corners>
</shape>

 

 

 

one More Example is..

 

 

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginHorizontal="15dp"
    android:layout_marginTop="5dp"
    android:background="@drawable/inputfield">

    <EditText
        android:id="@+id/edConfirmPassword"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical"
        android:background="@drawable/inputfield"
        android:baselineAligned="false"
        android:fontFamily="@font/roboto_regular"
        android:foregroundGravity="center_horizontal"
        android:gravity="center_vertical"
        android:hint="Enter Confirm Password"
        android:imeOptions="actionDone"
        android:importantForAutofill="no"
        android:inputType="numberPassword"
        android:maxLength="4"
        android:paddingHorizontal="25dp"
        android:singleLine="true"
        android:textColorHint="@color/grey"
        android:textCursorDrawable="@drawable/cursor_bg"
        android:textSize="16sp"
        tools:ignore="SpeakableTextPresentCheck" />

    <ImageView
        android:id="@+id/eyeCpass"
        android:layout_width="20dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_marginHorizontal="20dp"
        android:gravity="center"
        android:src="@drawable/eye"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:tint="@color/grey">

    </ImageView>


</RelativeLayout>

 Image eye..

 in Main ClaSS DO THIS...

eyeCpass.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {

        switch (motionEvent.getAction()) {
            case MotionEvent.ACTION_DOWN:
                edConfirmPassword.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD);
                break;
            case MotionEvent.ACTION_UP:
                edConfirmPassword.setInputType(InputType.TYPE_CLASS_TEXT| InputType.TYPE_TEXT_VARIATION_PASSWORD);
                break;
        }
        return true;
    }
});

 one More Example is ..

<EditText
    android:id="@+id/edName"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_gravity="center_vertical"
    android:layout_marginHorizontal="20dp"
    android:layout_marginTop="45dp"
    android:background="@drawable/input_bg"
    android:hint="Full name"
    android:importantForAutofill="no"
    android:inputType="textCapWords"
    android:maxLines="1"
    android:paddingHorizontal="25dp"
    android:textColorHint="@color/grey"
    android:textCursorDrawable="@drawable/cursor_color"
    android:textSize="16sp"
    app:layout_constraintTop_toBottomOf="@+id/txtSignUp" />

 drawable 

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="7dp"/>
    <solid android:color="@color/white"/>
    <stroke android:width="0.5dp" android:color="@color/grey"/>
</shape>

 main class only ..

Constant.focusEditText(edName);

 constant ...

 

public class Constant {


    public static void focusEditText(View v)
    {
        v.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus)
                    v.setBackgroundResource(R.drawable.selected);
                else
                    v.setBackgroundResource(R.drawable.input_bg);
            }
        });

    }

}