Home Android Moving Image Animation on the ImageView

Moving Image Animation on the ImageView

671
1
SHARE

This post is about moving the image on the ImageView, which is useful for apps using animations. This can be a good image blinking animation to make an image automatically move 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 moving image animation which moves the image according to the user specifications of time, speed and direction. 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 straightforward animations with Android. It is simple enough that no need to click any button, an images starts moving from left to right in the time and speed you specify. You can also change the direction of motion not necessarily going from left to right.You can also specify number of motions that you want your image to move. 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 ‘move.xml’ inside res/anim.   Everything is  explained in detail below. Follow the steps :
NOTE : This project is developed in Android Studio, and tested in Android Marshmallow 6.0 .

Follow the steps below for moving 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)

 

 

image

 

  • 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 move and add the following code in it

 

move

 

<?xml version="1.0" encoding="utf-8"?>

    <set
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:interpolator="@android:anim/linear_interpolator"
      android:fillAfter="true">

        <translate
          android:fromXDelta="0%p"
          android:toXDelta="75%p"
          android:duration="800" 
          android:repeatCount="2" />

   </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 animBlinkIn_icon = AnimationUtils.loadAnimation(this, R.anim.move);
        icon.startAnimation(animMoveIn_icon);


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

m1 m2 m3

 

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.

 

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

7 + 3 =