Below is the image that I am trying to implement, but could not achieve the same.

Do I need to use animation or something else?

When user taps on password field the cuid field gets scalled and password will be enlarge and overlaps on cuid vice versa.

enter image description here

Code is here:

<ConstraintLayout.....>
    <!---CUID label>
        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textInputLayoutid"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="40dp"
            android:layout_marginTop="60dp"
            android:layout_marginEnd="40dp"
            android:background="@color/white"
            app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textView_cab_management">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/textInputEditText_CUID"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:animateLayoutChanges="true"
                android:background="@null"
                android:hint="@string/employee_id"
                android:inputType="text"
                android:text="@={vm.employeeID}"
                android:textSize="@dimen/text_size_input_Layout" />
        </com.google.android.material.textfield.TextInputLayout>


        <!--  password Label -->
        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textInputLayoutPassword"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginTop="20dp"
            android:background="@color/white"
            app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout"
            app:layout_constraintEnd_toEndOf="@+id/textInputLayoutid"
            app:layout_constraintStart_toStartOf="@+id/textInputLayoutid"
            app:layout_constraintTop_toBottomOf="@+id/textInputLayoutid">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/textInputEditTextPassword"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@null"
                android:hint="@string/password"
                android:inputType="textPassword"
                android:text="@={vm.emailOtp}"
                android:textSize="@dimen/text_size_input_Layout" />
        </com.google.android.material.textfield.TextInputLayout>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/appCompatButtonlogin"
            android:layout_width="0dp"
            android:layout_height="@dimen/sign_in_up_button_height"
            android:layout_marginTop="40dp"
            android:background="@color/white"
            android:text="@string/submit"
            android:textColor="@color/black"
            app:layout_constraintEnd_toEndOf="@+id/textInputLayoutPassword"
            app:layout_constraintStart_toStartOf="@+id/textInputLayoutPassword"
            app:layout_constraintTop_toBottomOf="@+id/textInputLayoutPassword" />

</ConstraintLayout>

As well as used this animation:

 ResizeAnimation resizeAnimation = new ResizeAnimation(
            view,
            view.getHeight(),
            view.getWidth(), 50, 50
    );
    resizeAnimation.setDuration(1 * 1000);
    resizeAnimation.setFillAfter(true);
    view.startAnimation(resizeAnimation);

Animation class:

public ResizeAnimation(View view, int startHeight, int startWidth, int targetHeight, int targetWidth) {
    this.view = view;

    this.startHeight = startHeight;
    this.startWidth = startWidth;

    this.targetHeight = targetHeight;
    this.targetWidth = targetWidth;
}

@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
    int newHeight = (int) (startHeight + targetHeight * interpolatedTime);
    int newWidth = (int) (startWidth + targetWidth * interpolatedTime);
    //to support decent animation, change new heigt as Nico S. recommended in comments
    //int newHeight = (int) (startHeight+(targetHeight - startHeight) * interpolatedTime);
    view.getLayoutParams().height = newHeight;
    view.getLayoutParams().width = newWidth;
    view.requestLayout();
}

@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
    super.initialize(width, height, parentWidth, parentHeight);
}

@Override
public boolean willChangeBounds() {
    return true;
}

0 Answers