Rotate Animation

PDF for offline use
Sample Code:
Related SDKs:

Let us know how you feel about this

Translation Quality


0/250

This tutorial will show how to rotate an animation.

Recipe

  • Create a new Xamarin.Android project named RotationAnimation.
  • Create the directory Resource/Anim in the project.
  • Create a new resource file Resource/Anim/rotate_centre.xml and modify it to contain the following:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
  <rotate
      android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="2000"
      android:startOffset="0"/>
</set>

This declares an animation that will rotate from 0 to 360 degrees. The android:pivotX and android:pivotY specify the point on the image to rotate about.

  • Create a new resource file Resources/Anim/rotate_corner.axml and modify it to contain the following:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
  <rotate
      android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="0%"
      android:pivotY="0%"
      android:duration="2000"
      android:startOffset="0"/>
</set>
  • Open up Layout/Main.axml, and modify it to the following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

  <Button
      android:id="@+id/rotate_center_button"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Rotate around center"/>
  <Button
      android:id="@+id/rotate_corner_button"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Rotate around corner"/>
  <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical"
      android:gravity="center">
    <ImageView
        android:id="@+id/floating_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon" />
  </LinearLayout>

</LinearLayout>
  • Open MainActivity.cs, and insert the following code for the OnCreate() method:

protected override void OnCreate(Bundle bundle)

{
    base.OnCreate(bundle);
    SetContentView(Resource.Layout.Main);

    var image = FindViewById<ImageView>(Resource.Id.floating_image);

    // Set things up so that when this button is clicked the image roates about a corner.
    var rotateAboutCornerButton = FindViewById<Button>(Resource.Id.rotate_corner_button);
    var rotateAboutCornerAnimation = AnimationUtils.LoadAnimation(this, Resource.Animation.rotate_corner);
    rotateAboutCornerButton.Click += (sender, args) => image.StartAnimation(rotateAboutCornerAnimation);

    // Setup things so that when this button is clicked the image rotates about it's center.
    var rotateAboutCenterButton = FindViewById<Button>(Resource.Id.rotate_center_button);
    var rotateAboutCenterAnimation = AnimationUtils.LoadAnimation(this, Resource.Animation.rotate_center);
    rotateAboutCenterButton.Click += (sender, args) => image.StartAnimation(rotateAboutCenterAnimation);
}
  • Run the application. You should initially see the following screen:

  • Click on the “Rotate around center”. The image should rotate about the center:

  • Click on the “Rotate around corner”. The image should rotate about the upper left hand corner:

Additional Information

This recipe demonstrates how to use the view animation system to perform tween animation on Views. Tween animations perform transformation on a View object, such as an ImageView or a TextView.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.