Build Sequential Animation App in Android

 Hello Guys ,

    In this tutorial , we are going to create sequential animation on android app. we can make android app more attractive using sequential animation. In this app we create one buttons and textview. one buttons are used to perform sequential animation.

and

  Feel free to visit my previous Animation tutorial.

       Slide Animation

Sequential Animation App MainScreen looking like below picture :

Step 1 : Create a new Project

Step 2 : Create the animation file.

• Go to res folder and create a new Android Resource Directory named "anim". And in the anim resource directory create new animation files. Here We create  animation file. Animation file name is sequential.xml.
• sequential.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator">

  <!-- move -->
    <translate
        android:duration="1000"
        android:fromXDelta="0%p"
        android:toXDelta="25%p"
        android:fillAfter="true" />

    <translate
        android:duration="1000"
        android:fromYDelta="0%p"
        android:toYDelta="25%p"
        android:startOffset="2000"
        android:fillAfter="true" />

    <translate
        android:duration="1000"
        android:fromXDelta="0%p"
        android:toXDelta="-25%p"
        android:startOffset="3000"
        android:fillAfter="true" />

    <translate
        android:duration="1000"
        android:fromYDelta="0%p"
        android:toYDelta="-25%p"
        android:startOffset="4700"
        android:fillAfter="true" />

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/cycle_interpolator"
        android:pivotX="50"
        android:pivotY="50"
        android:startOffset="5000"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:toDegrees="360"/>

</set>

• android:duration : It is used to specify  duration for animation. 
• android:fromYDelta : It is Starting Y offset. It Expressed in pixels relative to the normal position.
• android:toYDelta : It is Ending Y offset. It Expressed in pixels relative to the normal position.
• android:fromXDelta : It is Starting X offset. It Expressed in pixels relative to the normal position.
• android:toXDelta : It is Ending X offset. It Expressed in pixels relative to the normal position.
• android:repeatMode : It is used to define how to animation behave.
• android:repeatCount : It is used to define how many times animation is repeat.
• android:fromDegrees : Rotation start from this degree.
• android:toDegrees : Rotation end from this degree.
• android:pivotX : It is define X coordinate of the point which object is being rotated.
• android:pivotY : It is define Y coordinate of the point which object is being rotated.  

Step 3 : Edit activity_main.xml file

• Here we added  button and textview for perform sequential animation.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/btn_sequential"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sequential"
        android:textSize="20dp"
        android:textAllCaps="false"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:layout_marginBottom="60dp"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ps_Inf0"
        android:textColor="@color/teal_200"
        android:textSize="40sp"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:layout_marginTop="180dp"/>

</RelativeLayout>

Step 4 : Implement MainActivity.java class file.

• In this class we can load animation class using Animation class.

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    Button sequential;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        sequential = findViewById(R.id.btn_sequential);
        textView = findViewById(R.id.text);

        sequential.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation animation = AnimationUtils.loadAnimation(
                        getApplicationContext() , R.anim.sequential);
                textView.startAnimation(animation);
            }
        });
    }
}

Output :

If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support.  🙏