Rotating Image Animation on the ImageView

Home/Android/Rotating Image Animation on the ImageView

Rotating Image Animation on the ImageView




This post is about rotating the image on the ImageView, which is useful for apps using animations. This can be a good image rotation animation to make an image automatically rotate without using any touch which is used in Android App animation these days. Animations are playing the most important part in android application these days it has its application in Gaming, the opening of the apps and many more.  We present a small demo of rotating image animation which rotates the image according to the user specifications. You can also use button that can work as a click to start your animation which I will show you in the next article. For now I am not using any button to start the animation, the animation starts itself whenever the application launches. 

In this example, I’ll attempt to introduce you doing easy animations with Android. It is simple enough that no need to click any button, an images starts rotating from 0 degree to 360 degree in seconds the time you specify. You can also change the degree of rotation not necessarily going from 0 to 360 degree.You can also specify number of rotations that you want your image to rotate. Lets begin with the animation XML. Once you have created a new Android project, create a folder named “anim” in res and a file named ‘rotate.xml’ inside res/anim.   Everything is  explained in detail below.

NOTE :  This project is developed in Android Studio, and tested in Android Marshmallow 6.0 .

Follow the steps below to create an rotate an image automatically:

  • Create a new project with any minimum SDK of your choice.
  • Copy and paste an image which you want to have on your ImageView in the drawable folder (I named the image image.jpg)
  • Create an ImageView in the activity_main.xml and display the image. See the following code to create the imageview.
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:orientation="vertical"
        android:id="@+id/screen"
        tools:context=".MainActivity" >
    
    
        <ImageView
            android:id="@+id/icon"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/image" />
    
    </RelativeLayout>
  • In res folder, Create New Directory with name anim.
  • In anim directory, Create a new XML file with name rotate and add the following code in it

rotate

 

<?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="500"
        android:repeatCount="8"
        />
    <rotate
        android:startOffset="500"
        android:fromDegrees="360"
        android:toDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="500" >
    </rotate>

</set>

  • Now, add the final code in your main file i.e MainActivity.java
import android.app.Activity;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

    ImageView icon;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);


        icon = (ImageView) findViewById(R.id.icon);


        Animation animRotateIn_icon = AnimationUtils.loadAnimation(this, R.anim.rotate);
        icon.startAnimation(animRotateIn_icon);


    }
}
  • On running the app it will look like this,

2017-04-02 (2) 2017-04-02 (1) 2017-04-02

 

Try out these simple animations and we will bring you a bunch of animations more like Moving Image Animation, Zooming Image Animation, etc. to create a perfect animated app. You can also have a look at other interesting android projects like Slider making, some basic day to day hacks that are very useful. You can also subscribe to our newsletter so you do not miss any updates and you can also put up your Queries on the Contact us page.

By | 2017-05-22T19:50:08+00:00 November 27th, 2016|Android|6 Comments

About the Author:

6 Comments

  1. Lohri wishes January 3, 2017 at 11:47 am - Reply

    Way cool! Some very valid points! I appreciate you penning this write-up plus
    the rest of the site is also really good.

    • Twinkle Sharma January 4, 2017 at 4:28 am - Reply

      Thank You Buddy!!!!! more unique and informative posts are yet to come. Meanwhile, you can add any of your post,ask queries,answer queries to help people reach out the information. Also, you can subscribe our newsletter so you do not miss any information.

  2. republic day quotes January 7, 2017 at 10:18 am - Reply

    I have been exploring for a little bit for any high quality articles or weblog posts on this
    kind of area . Exploring in Yahoo I ultimately
    stumbled upon this website. Studying this info So i’m satisfied to express that I have a very good uncanny feeling I found out just what I needed.
    I such a lot definitely will make sure to don?t
    put out of your mind this site and provides it a glance regularly.

  3. Twinkle Sharma January 8, 2017 at 8:51 am - Reply

    We really appreciate your acknowledgement!!! more unique and informative posts are yet to come. Meanwhile, you can add any of your post,ask queries,answer queries to help people reach out the information. Also, you can subscribe our newsletter so you do not miss any information.

  4. Hindi Love Shayari January 19, 2017 at 5:13 pm - Reply

    Superb post however , I was wanting to know if you could write a litte more on this subject?
    I’d be very grateful if you could elaborate a little bit further.
    Thanks!

  5. cunt January 20, 2017 at 12:19 pm - Reply

    Hi there, after reading this amazing piece of writing i am too delighted to share
    my familiarity here with mates.

Leave A Comment

three × 1 =

Avada WordPress Theme