Zooming image Animation on ImageView

Home/Android/Zooming image Animation on ImageView

Zooming image Animation on ImageView




This post is about zooming the image on the ImageView, which is useful for apps using animations. This can be a good zoom animation to make an image automatically zoom-in and zoom-out without using any touch zoom or pinch zoom. 

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 zooming image animation which zoom-in and zoom-out 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 image starts zoom-in from a dot  to zoom-out to a large pixel in the time you specify. You can also change the time, speed , pixel of zoom of animation in any form the user wants. You can also specify the depth of zoom that you want your image to zoom. Lets begin with the animation XML. Once you’ve got created a new project, make a folder named “anim” in res and a file named ‘zoom.xml’ within 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 image zoom-in and zoom-out 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 anim_zoom.png)

 

zooming

 

  • 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"
    tools:context="com.example.sachin_kumar.animationzoom.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@drawable/anim_zoom"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

 

  • In res folder, Create New Directory with name anim.

 

zooming_1

 

  • In anim directory, Create a new XML file with name zoom and add the following code in it.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="3000"
        android:fromXScale="0.2"
        android:fromYScale="0.2"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:repeatMode="reverse"
        android:repeatCount="infinite"/>
</set>

 

  • Now, add the final code in your main file i.e MainActivity.java
public class MainActivity extends AppCompatActivity {

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

        final ImageView zoom = (ImageView) findViewById(R.id.imageView);
        final Animation zoomAnimation = AnimationUtils.loadAnimation(this, R.anim.zoom);
        zoom.startAnimation(zoomAnimation);
    }
}

 

  • Run your app and see the image zooming-in and zooming out indefinitely.

      zooming Screenshot_20161018-012025 zooming

 

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:18+00:00 October 18th, 2016|Android|5 Comments

About the Author:

5 Comments

  1. watch now October 19, 2016 at 2:02 am - Reply

    I think the admin of this web page is genuinely working hard for his web site, for the reason that here every stuff
    is quality based data.

  2. UteFoutsuut November 7, 2016 at 9:27 pm - Reply

    I see your website needs some unique & fresh articles.

    Writing manually is time consuming, but there is tool for this task.
    Just search for: Digitalpoilo’s tools

  3. JamalNRichel November 20, 2016 at 3:14 am - Reply

    I got this web site from my friend who informed me about
    this website and now this time I am visiting this site and reading very informative posts at this place.

    • Twinkle Sharma November 27, 2016 at 1:57 pm - Reply

      Thank You so much for your acknowledgement more unique and informative posts are yet to come. Meanwhile, you can add any of your post,ask queries,answer queries so help people reach out the information on http://www.mycloudinfinity.in/contact-us-2

Leave A Comment

6 + seven =

Avada WordPress Theme