Build Rotate Animation App in Android

Hello Guys ,

    In this tutorial , we are going to create rotate animation on android app. we can make android app more attractive using rotate animation. Rotate Animation is special kind of use to given a feel to user about changes happening in app like load content and process data etc. In this animation object can be rotated in both clockwise and Anticlockwise direction. In this app we create two buttons and textview for animation.

and

  Feel free to visit my previous Animation tutorial.

      Together Animation

Rotate Animation App MainScreen looking like below picture :





Let's implemented Rotate Animation App.

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 two animation files. Animation files names are rotate_clockwise.xml and rotate_anticlockwise.xml.
  • rotate_clockwise.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

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

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

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

</set>
  • android:duration : It is used to specify  duration for animation. 
  • 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 two button and textview for perform rotate 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">

<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ps_Inf0"
android:textAllCaps="false"
android:layout_centerInParent="true"
android:textSize="30sp"
android:textColor="@color/design_default_color_secondary"/>


<Button
android:id="@+id/btn_clockwise"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="80dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:text="Rotate Clockwise"
android:textAllCaps="false" />

<Button
android:id="@+id/btn_anti_clockwise"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Rotate AntiClockwise"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="30dp"
android:textAllCaps="false" />

</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 clockwise , anticlockwise;
TextView textView;

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

clockwise = findViewById(R.id.btn_clockwise);
anticlockwise = findViewById(R.id.btn_anti_clockwise);
textView = findViewById(R.id.text);

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

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

Output :



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

Post a Comment

0 Comments