Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to swipe images

Tags:

android

I am trying to implement a simple gallery of images in which I have an image to be displayed at a time on the device screen. When we swipe the screen from left to right it should show the next image.
For that I implemented a view flipper and added image views to it.
But I don't know how to catch that swipe event.
Can anyone tell me with an example?

like image 848
Vishal Arora Avatar asked Feb 24 '11 07:02

Vishal Arora


People also ask

How do you put swipe pictures on Instagram?

Open Instagram, create a new a post, tap the album icon, and then select the images you want to upload. Make sure to select them in the right order so that the panorama works. Post the image, and you're done. You've got a swipeable panorama for everyone to see.

How do you make a Swipeable gallery?

To use the Swipeable Gallery:Open the Components panel, then the Galleries folder. Drag the Swipeable Gallery component to the stage. In the Swipeable Gallery properties section of the Properties panel, name the component. Add either a set of images or a set of groups.


2 Answers

I needed the same thing for my app, and used a ViewPager: http://blog.sqisland.com/2012/09/android-swipe-image-viewer-with-viewpager.html

Previously I used a ImageSwitcher combined with a GestureDetector: http://blog.sqisland.com/2012/07/android-swipe-image-viewer.html

The code with ViewPager is much simpler, and the experience is much better because the image slides as your finger swipe across the screen. I create ImageView directly, no fragments required.

like image 143
chiuki Avatar answered Nov 15 '22 14:11

chiuki


You can create a custom Pager Adapter for your ViewPager:

public class ImageAdapter extends PagerAdapter {
    private Context context;
    private int[] GalImages = new int[]{
            R.drawable.cap8, R.drawable.cap2, R.drawable.cap3, R.drawable.cap1, R.drawable.cap5,
            R.drawable.cap6, R.drawable.cap7, R.drawable.cap9, R.drawable.cap4,
            R.drawable.cap10

    };

    ImageAdapter(Context context) {
        this.context = context;
    }

    @Override
    public int getCount() {
        return GalImages.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = new ImageView(context);
        int padding = context.getResources().getDimensionPixelSize(R.dimen.activity_horizontal_margin);
        imageView.setPadding(padding, padding, padding, padding);
        imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        imageView.setImageResource(GalImages[position]);
        container.addView(imageView, 0);
        return imageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((ImageView) object);
    }
}

Use the ViewPager in your layout and register the adapter:

<android.support.v4.view.ViewPager
    android:id="@+id/mvieww"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
like image 21
Soni Kumar Avatar answered Nov 15 '22 14:11

Soni Kumar