Android Properties animation for a nice login screen (login page editText title up and down animation)

preface

Use Android objectAnimator to animate the login page editText title up and down

The effect

code

Mainactivity. Java listens to animation key code

// Edit the animation when the box is clicked
    @Override
    public void onFocusChange(View v, boolean hasFocus) {

        if(hasFocus){
            // Get the focus
            if(v.getId()==R.id.editText_login_user_name){
                
                if(editText_login_user_name.getText().length()==0) {// The animation uses px units
                    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_user_name, "translationY", ViewUtil.dip2px(this.25), 0);
                    objectAnimator.setDuration(400);
                    objectAnimator.start();

                }
                // Edit the animation of the horizontal line under the box
                textView_line_1.setBackgroundColor(getResources().getColor(R.color.colorBlue));
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_line_1, "scaleX".0.1);
                objectAnimator.setDuration(400);
                objectAnimator.start();
            }
            if(v.getId()==R.id.editText_login_password){
                if(editText_login_password.getText().length()==0){
                    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_password, "translationY", ViewUtil.dip2px(this.25), 0);
                    objectAnimator.setDuration(400);
                    objectAnimator.start();
                }
                textView_line_2.setBackgroundColor(getResources().getColor(R.color.colorBlue));
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_line_2, "scaleX".0.1);
                objectAnimator.setDuration(400); objectAnimator.start(); }}else{
            // Cancel focus
            textView_line_2.setBackgroundColor(getResources().getColor(R.color.grey));
            textView_line_1.setBackgroundColor(getResources().getColor(R.color.grey));
            if(v.getId()==R.id.editText_login_user_name&&editText_login_user_name.getText().length()==0){
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_user_name, "translationY".0, ViewUtil.dip2px(this.25));
                objectAnimator.setDuration(400);
                objectAnimator.start();

            }
            if(v.getId()==R.id.editText_login_password&&editText_login_password.getText().length()==0){
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_password, "translationY".0, ViewUtil.dip2px(this.25));
                objectAnimator.setDuration(400); objectAnimator.start(); }}}Copy the code

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener.View.OnFocusChangeListener {

    private TextView textView_login_user_name; // Declare a text view object
    private TextView textView_login_password; // Declare a text view object
    private TextView textView_line_1; // Declare a text view object
    private TextView textView_line_2; // Declare a text view object
    private EditText editText_login_user_name; // Declare an edit box object
    private EditText editText_login_password; // Declare an edit box object
    private Button btn_forget; // Declare a button control object
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView_login_user_name = findViewById(R.id.textView_login_user_name);
        textView_login_password = findViewById(R.id.textView_login_password);
        textView_line_1 = findViewById(R.id.textView_line_1);
        textView_line_2 = findViewById(R.id.textView_line_2);
        editText_login_user_name = findViewById(R.id.editText_login_user_name);
        editText_login_password = findViewById(R.id.editText_login_password);

        btn_forget = findViewById(R.id.button_forget_password);
        // Add a text change listener to editText_login_user_name
        editText_login_user_name.addTextChangedListener(new HideTextWatcher(editText_login_user_name, 11));
        // Add a text change listener to editText_login_password
        editText_login_password.addTextChangedListener(new HideTextWatcher(editText_login_password, 6));


        btn_forget.setOnClickListener(this);
        findViewById(R.id.button_login).setOnClickListener(this);
        
        // Animation binding
        editText_login_user_name.setOnFocusChangeListener(this);
        editText_login_password.setOnFocusChangeListener(this);
    }
   
    // Edit the animation when the box is clicked
    @Override
    public void onFocusChange(View v, boolean hasFocus) {

        if(hasFocus){
            // Get the focus
            if(v.getId()==R.id.editText_login_user_name){

                if(editText_login_user_name.getText().length()==0) {// The animation uses px units
                    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_user_name, "translationY", ViewUtil.dip2px(this.25), 0);
                    objectAnimator.setDuration(400);
                    objectAnimator.start();

                }
                // Edit the animation of the horizontal line under the box
                textView_line_1.setBackgroundColor(getResources().getColor(R.color.colorBlue));
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_line_1, "scaleX".0.1);
                objectAnimator.setDuration(400);
                objectAnimator.start();
            }
            if(v.getId()==R.id.editText_login_password){
                if(editText_login_password.getText().length()==0){
                    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_password, "translationY", ViewUtil.dip2px(this.25), 0);
                    objectAnimator.setDuration(400);
                    objectAnimator.start();
                }
                textView_line_2.setBackgroundColor(getResources().getColor(R.color.colorBlue));
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_line_2, "scaleX".0.1);
                objectAnimator.setDuration(400); objectAnimator.start(); }}else{
            // Cancel focus
            textView_line_2.setBackgroundColor(getResources().getColor(R.color.grey));
            textView_line_1.setBackgroundColor(getResources().getColor(R.color.grey));
            if(v.getId()==R.id.editText_login_user_name&&editText_login_user_name.getText().length()==0){
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_user_name, "translationY".0, ViewUtil.dip2px(this.25));
                objectAnimator.setDuration(400);
                objectAnimator.start();

            }
            if(v.getId()==R.id.editText_login_password&&editText_login_password.getText().length()==0){
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_password, "translationY".0, ViewUtil.dip2px(this.25));
                objectAnimator.setDuration(400); objectAnimator.start(); }}}}Copy the code

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView_login_wellcome"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:padding="10dp"
        android:text="Welcome to login"
        android:textAlignment="viewStart"
        android:textColor="@color/black"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView_login_wellcome">

        <TextView
            android:id="@+id/textView_login_user_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="-20dp"
            android:background="@null"
            android:text="User name"
            android:textSize="20sp"
            android:translationY="25dp"
            app:layout_constraintBottom_toTopOf="@+id/editText_login_user_name"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/editText_login_user_name"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/editText_login_user_name"
            android:layout_width="0dp"
            android:layout_height="25dp"
            android:layout_marginTop="2dp"
            android:background="@android:color/transparent"
            android:ems="10"
            android:inputType="textPersonName"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView_login_user_name" />

        <TextView
            android:id="@+id/textView_line_1"
            android:layout_width="0dp"
            android:layout_height="2px"
            android:layout_marginTop="2dp"
            android:layout_marginBottom="8dp"
            android:background="@color/grey"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editText_login_user_name" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraintLayout2">

        <TextView
            android:id="@+id/textView_login_password"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="100dp"
            android:text="Password"
            android:textSize="20sp"
            android:translationY="25dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/editText_login_password"
            android:layout_width="0dp"
            android:layout_height="25dp"
            android:layout_marginTop="2dp"
            android:background="@android:color/transparent"
            android:ems="10"
            android:inputType="textPassword"
            app:layout_constraintEnd_toStartOf="@+id/button_forget_password"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView_login_password" />

        <Button
            android:id="@+id/button_forget_password"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginBottom="8dp"
            android:background="@null"
            android:text="Forget your password."
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/editText_login_password"
            app:layout_constraintTop_toBottomOf="@+id/textView_login_password" />

        <TextView
            android:id="@+id/textView_line_2"
            android:layout_width="0dp"
            android:layout_height="2px"
            android:layout_marginTop="2dp"
            android:layout_marginBottom="8dp"
            android:background="@color/grey"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/button_forget_password"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editText_login_password" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <Button
        android:id="@+id/button_login"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/button_style"
        android:text="Login"
        android:textColor="@color/white"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraintLayout3" />


</androidx.constraintlayout.widget.ConstraintLayout>

Copy the code

Other style layout files are not given if you need to contact the author