Creating Swipe Effect For An Image

This is a sample program to show Swipe Effect for an Image.

Underlying Algorithm:

Basic description of algorithm in step by step form:

1.) Create a Project SwipeImage.
2.) Put an image in res/drawable.
3.) We will use the TranslateAnimation class to show the swipe effect :

 

TranslateAnimation anim = new TranslateAnimation(-500, 50, 50, 50);
anim.setDuration(1000);
anim.setFillAfter(true);
image.startAnimation(anim);
image.setImageResource(R.drawable.bee);

 

 

4.) Run the application.

Steps to Create:

1.) Open Eclipse. Use the New Project Wizard and select Android Project Give the respective project name i.e. SwipeImage. Enter following information:
Project name: SwipeImage
Build Target: Google APIs
Application name: SwipeImage
Package name: com.example.SwipeImage
Create Activity: SwipeImage

On Clicking Finish SwipeImage code structure is generated with the necessary Android Packages being imported along with SwipeImage.java. SwipeImage class will look like following:

 

package com.example.SwipeImage;

import android.app.Activity;
import android.os.Bundle;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class SwipeImage extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView image = (ImageView) findViewById(R.id.ImageView01);
TranslateAnimation anim = new TranslateAnimation(-500, 50, 50, 50);
anim.setDuration(1000);
anim.setFillAfter(true);
image.startAnimation(anim);
image.setImageResource(R.drawable.bee);
}
}

 

 

Output –The final output:

Leave a Comment:

17 comments
jeyaganesh says May 29, 2011

Nice tutorial.. Expecting more beginner tutorials.

Reply
jeyaganesh says May 29, 2011

nice tutorial

Reply
Sekhar says June 17, 2011

Its very good tutorial for beginners.

Reply
Anuradha says June 27, 2011

I tried this example but i am not seeing any animation.Only static image is visible.
Do we need to change any other settings?

Reply
Sushant says June 27, 2011

Anuradha,

No other settings are required for swipe effect. when you launch above example this effect will animate the image from left to right and then the image gets static on screen.

Reply
Gabriel says July 6, 2011

You may consider renaming this post “Simple example of image animation”. “Swipe” implies a drag-gesture of the finger.

Reply
Sekhar says July 19, 2011

Hello Sushant, can u tell me how to swipe imageviews? that means if we have an imageviews like 0 0 in one activity when i swipe left side 0 imageview it will be swipe up and increment the value to 1, this prrocess will continue until i reached my requirement. can u provide code for this?

Reply
    Sushant says July 20, 2011

    You have 2 options for doing so:

    1.) You can implement this by putting an ImageView on your Layout and detect Swipes using GestureListener. On Left or right swipe, cycle through the imageList in appropriate direction and set the image in the ImageView. When you set the image, play appropriate slide left or slide right animation.

    2.) By creating a CustomGallery class that extends Gallery. Then Override the onFling method of Gallery. Inside the onFling method, simply return false. This will cause the Gallery to only move to the next image when onFling is called.

    Thanks

    Reply
Sekhar says July 20, 2011

thanks sushant, but iam asking how to swipe adjacent imageviews like 00 when we swipe right side 0 imageview it will swipe up and increment the value 1 means same image resourse but the value will be incremented by resourse id, can u provide code for this problem?

Reply
free android apps download says January 25, 2012

Thank you for the auspicious writeup. It in reality was a amusement account it. Look complicated to far added agreeable from you! By the way, how can we be in contact?

Reply
Yogesh Tiwari says February 24, 2012

Hi Freinds,
i have 700 png images and 700 mp3 audio file . i have to swipe Horizontally ,three images swipe Horizontally at a time from left to right and right to left when users click on image corresponding sound should come. when we swipe next three images comes at a time till at the end of image.

please help me to overcome with this problem.
thanks in advance.

Reply
Jetzer says May 16, 2012

I tried it but it won’t work. Please help me and also please help me in spinner. I also tried to put spinner but it won’t work.

Reply
Prashanth Y says May 30, 2012

Great example. Works really fine. Thanks for sharing it across.

As per my requirement i have modified the above code and thought it would help others.

public void animation(ImageView img,String flingDirection) {

//Basing on the fling direction the image would swipe

TranslateAnimation anim = new TranslateAnimation(flingDirection==”Left”?500:-500, 0, 0, 0);
anim.setDuration(600);
anim.setFillAfter(true);
img.startAnimation(anim);
}

Reply
Prashanth Y says May 30, 2012

Great example. Works really fine. Thanks for sharing it across.

As per my requirement i have modified the above code and thought it would help others.

public void animation(ImageView img,String flingDirection) {

//Basing on the fling direction the image would swipe

TranslateAnimation anim = new TranslateAnimation(flingDirection=="Left"?500:-500, 0, 0, 0);
anim.setDuration(600);
anim.setFillAfter(true);
img.startAnimation(anim);
}

Reply
Khalilah Baquiran says December 2, 2012

I don’t know why there is not more concern about this on a safety level. Anyone can find anyone out there. I am sure as hell not going to make it easy for some weirdo to stalk me by using my real name on the WORLD WIDE WEB. Really? I also think it’s terribly idealistic that having people use there names will stop the harsh comments. It would be nice, but at least now there is just some cyber harm’, people using real names can lead to real harm…. pro/con? think.

Reply
Gurmeet says December 21, 2012

Thanks Sushant..!!

For those who are not seeing the animation, only static image is displayed. Increase the duration for animation to 5000 or something.

anim.setDuration(5000);

Reply
Add Your Reply