How to change images in imageview on fling

Question

I have a relative layout which contains an image. I have like 10-20 images in drawable folder and a hashmap which stores these images.

On swiping below the image from left to right, it should change to next image. On each swipe, it should change to next image from hashmap.

I am completely new to java and android programming and help in any way is appreciated.

This is what I have:

<?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.bschiranth.homework2_chiranthbs.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/alice"
        android:onClick="onClick"
        android:clickable="true"
        android:src="@drawable/alice"/>

    <SeekBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/zoombar"
        android:max="100"
        android:progress="50"
       android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>

and my java:

@Override
public boolean onFling(MotionEvent event1, MotionEvent event2,
                       float velocityX, float velocityY) {
    Log.d("fling", "doing fling");

    MovieData movieData = new MovieData();
    HashMap hashMap = new HashMap();
    for(int i=1;i<movieData.getSize();i++)
    {
        hashMap = movieData.getItem(i);
    }

    if(event1.getX()-event2.getX()> SWIPE_MIN_DISTANCE && Math.abs(velocityX)>SWIPE_THRESHOLD_VELOCITY)
    {
        Toast.makeText(Activity_Control.this,
                "its flinging right to left", Toast.LENGTH_SHORT).show();
        imageView.setImageResource(R.drawable.avatar);
    }
    if(event2.getX()-event1.getX()> SWIPE_MIN_DISTANCE && Math.abs(velocityX)>SWIPE_THRESHOLD_VELOCITY)
    {
        Toast.makeText(Activity_Control.this,
                "its flinging left to right", Toast.LENGTH_SHORT).show();
        imageView.setImageResource(R.drawable.avengers);
    }
    return true;
}

by swiping below image i guess, since I am using gestures and onFling() method — Chiranth Bs, Feb 03 '16 at 09:11

Vinodh Kumar · Answer 1 · 2016-02-03T09:18:39.027

Better you can use view pager instead of imageview

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >

<android.support.v4.view.ViewPager
    android:id="@+id/myfivepanelpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  </LinearLayout>

ViewPagerAdapter.java

        import android.app.Activity;
        import android.os.Parcelable;
       import android.support.v4.view.PagerAdapter;
      import android.support.v4.view.ViewPager;
     import android.view.View;
        import android.view.ViewGroup.LayoutParams;
     import android.widget.ImageView;
     import android.widget.ImageView.ScaleType;

      public class ViewPagerAdapter extends PagerAdapter {

      Activity activity;
      int imageArray[];

      public ViewPagerAdapter(Activity act, int[] imgArra) {
      imageArray = imgArra;
      activity = act;
       }

         public int getCount() {
         return imageArray.length;
         }

        public Object instantiateItem(View collection, int position) {
          ImageView view = new ImageView(activity);
         view.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
         LayoutParams.FILL_PARENT));
         view.setScaleType(ScaleType.FIT_XY);
         view.setBackgroundResource(imageArray[position]);
          ((ViewPager) collection).addView(view, 0);
          return view;
          }

          @Override
           public void destroyItem(View arg0, int arg1, Object arg2) {
          ((ViewPager) arg0).removeView((View) arg2);
           }

           @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == ((View) arg1);
           }

           @Override
         public Parcelable saveState() {
           return null;
           }
           }

PageIndicatorActivity.java

  public class PageIndicatorActivity extends Activity {

  @Override
  public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  ViewPagerAdapter adapter = new ViewPagerAdapter(this, imageArra);
  ViewPager myPager = (ViewPager) findViewById(R.id.myfivepanelpager);
  myPager.setAdapter(adapter);
  myPager.setCurrentItem(0);
  }

   private int imageArra[] = { R.drawable.antartica1, R.drawable.antartica2,
   R.drawable.antartica3, R.drawable.antartica4,
   R.drawable.antartica5, R.drawable.antartica6,
   R.drawable.antartica7, R.drawable.antartica8 };

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
   getMenuInflater().inflate(R.menu.activity_main, menu);
   return true;
   }

    }

      public int getCount() {
      return imageArray.length;
        }

     public Object instantiateItem(View collection, int position) {
     ImageView view = new ImageView(activity);
     view.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
     LayoutParams.FILL_PARENT));
     view.setScaleType(ScaleType.FIT_XY);
     view.setBackgroundResource(imageArray[position]);
      ((ViewPager) collection).addView(view, 0);
       return view;
        }

      @Override
     public void destroyItem(View arg0, int arg1, Object arg2) {
    ((ViewPager) arg0).removeView((View) arg2);
    }

       @Override
      public boolean isViewFromObject(View arg0, Object arg1) {
       return arg0 == ((View) arg1);
      }

       @Override
     public Parcelable saveState() {
      return null;
     }
    }

actually its an assignment problem and we have to use only imageview :( But thanks for the different approach — Chiranth Bs, Feb 03 '16 at 09:31

score 0 · Answer 2 · answered Feb 03 '16 at 09:32

This can be done by ViewFlipper as described below.

This is your Activity.xml file

<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/view_flipper"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HowToUseActivity" >
    <ImageView
        android:id="@+id/imageHowToUse"
        android:contentDescription="@string/app_name"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@mipmap/screen_1" />
</ViewFlipper>

declare required variables in your activity class

private int number = 0;
private float initialX;
private ImageView imageView;

in your Activity's onCreate(...) method retrieve the ImageView

imageView = (ImageView) findViewById(R.id.imageHowToUse);

override the method onTouchEvent(...) in same activity

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch(event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            initialX = event.getX();
            break;
        case MotionEvent.ACTION_UP:
            float finalX = event.getX();
            if (initialX > finalX) {
                if (number >= 3) {
                    break;
                }
                next();
            } else {
                if(number <= 0) {
                    break;
                }
                previous();
            }
            break;
    }
    return false;
}

private void next() {
    number++;
    imageView.setImageResource(getImage());
}

private void previous() {
    number--;
    imageView.setImageResource(getImage());
}

then write method getImage() to get next image you want to display

private int getImage() {
    int resource = R.mipmap.screen_1;
    switch(number) {
        case 0:
            resource = R.mipmap.screen_1;
        break;
        case 1:
            resource = R.mipmap.screen_2;
            break;
        case 2:
            resource = R.mipmap.screen_3;
            break;
    }
    return resource;
}

this is working code in my project. It'll help you.

NOTE : R.mipmap.screen_* is the image resource present in my resource directory.

How to change images in imageview on fling

2 Answers2