Animation in Android EditText Android

Question

I am trying to create an animated TextInput layout for my login page but I cant't make it work.

below are the pictures of what I am trying to do:

image when you arrive on the login page:

when you start typing the email, the line length should decrease when email address is typed, the more you type the smaller the line became.

Here is the layout I have created but it's not working.

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/email_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:background="@color/transparent"
                android:textAllCaps="true"
                android:textColorHint="@color/gainsboro_00"
                android:textColor="@color/gainsboro_00"
                android:hint="@string/email">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/transparent">

                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/email_et"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:inputType="textEmailAddress"
                        android:textColor="@color/gainsboro_00"
                        android:background="@color/transparent"
                        android:minWidth="75dp"
                        android:textSize="14sp"
                        android:textAllCaps="true"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintBottom_toBottomOf="parent" />

                    <View
                        android:id="@+id/email_line"
                        android:layout_width="match_parent"
                        android:layout_height="10dp"
                        android:background="@drawable/checkered_gainsboro_background"
                        android:layout_marginEnd="45dp"
                        app:layout_constraintStart_toEndOf="@id/email_et"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintBottom_toBottomOf="parent"/>

                </androidx.constraintlayout.widget.ConstraintLayout>



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

Any idea how to achieve this? I think I am not far from the solution Thanks

Answer 1

You don't need ConstraintLayout and View elements inside TextInputLayout.

Documentation is here: https://material.io/components/text-fields/android#using-text-fields

Answer 2

Material Design provides you instant EditText with Animation. You simply need to change the style of the TextInputLayout as shown below in the code.

Here is the code you can use as per your requirements.

 <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/enter_your_email_id"
            app:endIconMode="clear_text"
            android:id="@+id/edtEmailID"
            android:background="@color/colorWhite"
            android:layout_below="@id/welcomeText"
            app:endIconTint="#000"
            android:layout_marginTop="25dp"
            app:errorEnabled="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            app:hintTextColor="#000">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/editEmailIn"
                android:inputType="text"
                android:background="@color/colorWhite"
                android:textColor="#000" />

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

Refer to Documentation for better exposure