How to get previous and next image

Question

Am beginner to android...In my app, i need to show previous and next images.. I get here but images get shuffled, not getting proper previous and next images by clicking previous and next button.... here my code...

 public class MainActivity extends Activity  implements OnClickListener{

 ImageButton ib_left_arrow, ib_right_arrow;

 ImageView slidingimage;

 Animation rotateimage;

 public int currentimageindex = 0;

 private int[] IMAGE_IDS = { R.drawable.image1, R.drawable.image2,
        R.drawable.image3};



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


    ib_left_arrow = (ImageButton) findViewById(R.id.iv_left_arrow);
    ib_right_arrow = (ImageButton) findViewById(R.id.iv_right_arrow);

    ib_left_arrow.setOnClickListener(this);
    ib_right_arrow.setOnClickListener(this);


}


    @Override
public void onClick(View v) {
    // TODO Auto-generated method stub


switch (v.getId()) {
    case R.id.iv_left_arrow:

      slidingimage = (ImageView) findViewById(R.id.ImageView3_Left);

      slidingimage.setBackgroundResource(IMAGE_IDS[currentimageindex% IMAGE_IDS.length]);

      currentimageindex--;

      rotateimage = AnimationUtils.loadAnimation(this,R.anim.slide_in_left);

      slidingimage.startAnimation(rotateimage);        

        break;



case R.id.iv_right_arrow:


      slidingimage = (ImageView) findViewById(R.id.ImageView3_Left);

 slidingimage.setBackgroundResource(IMAGE_IDS[currentimageindex % IMAGE_IDS.length]);

     currentimageindex++;

    rotateimage = AnimationUtils.loadAnimation(this,R.anim.slide_in_right);

    slidingimage.startAnimation(rotateimage);   

    break;              


       }
    }

 }

ANy idea ???

Answer 1

There's a flaw in your code. Your Index is starting from 0.

If I press the left arrow itself the first time I interact with your app, the index will become -1. When you try to get the value from the array with -1 modulo length of array, it will return a negative value.

This might be causing your to get wrong values from your array and hence the wrong image might be displayed.

An easy fix is to cause index to roll over when index is 0 and left button is pressed:

case R.id.iv_left_arrow:

   if(currentImageIndex == 0)
           currentImageIndex = IMAGE_IDS.length - 1 ;

That should fix it.

Answer 2

Try removing the modulo operator from your code like so

switch (v.getId()) {
case R.id.iv_left_arrow:
    // should not execute if it is on the first item
    if (currentimageindex > 0) {
        currentimageindex--;

        slidingimage = (ImageView) findViewById(R.id.ImageView3_Left);
        slidingimage.setBackgroundResource(IMAGE_IDS[currentimageindex]);
        rotateimage = AnimationUtils.loadAnimation(this,R.anim.slide_in_left);
        slidingimage.startAnimation(rotateimage);
    }        
    break;

case R.id.iv_right_arrow:
    // should not execute if it's on the last item
    if (currentimageindex < IMAGE_IDS.length) {
        currentimageindex++;

        slidingimage = (ImageView) findViewById(R.id.ImageView3_Left);
        slidingimage.setBackgroundResource(IMAGE_IDS[currentimageindex]);
        rotateimage = AnimationUtils.loadAnimation(this,R.anim.slide_in_right);
        slidingimage.startAnimation(rotateimage); 
    }  
    break; 

Did not test this but this should solve your issue.

I suggest you revert from using this method of transitioning images because you will run in to problems in the future. Rather use a ViewPager . This control is specifically designed to do this. You can also look at a ViewFlipper control. These two controls help you define your list of images and also the recycling for them through a Adapter which is very important if you are going to have a lot of images.