How to change images after it compare on button next in android?

Question

I have next and previous button. I want to change the images after comparing images comes from previous activity using Next Button Click. I got image value using bundle object. There are 26 alphabets images for change on next button event as well as on previous button event. Below is my source code for performing change images on button event(Next, Previous).

private DrawingView mDrawingView;

Bundle extras = getIntent().getExtras();
    int imageRes1 = extras.getInt("picture1");
    int imageRes2 = extras.getInt("picture2");
    mDrawingView = (DrawingView) findViewById(R.id.drawing_view);
    mDrawingView.setShape(imageRes1, imageRes2);
    btn_next = (Button) findViewById(R.id.btn_next);
    //      btn_next.setOnClickListener(this);
            btn_next.setOnClickListener(new OnClickListener() {

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

                    initializeMP();
                    playsound.start();




                    if(imageRes1==R.drawable.img_a_inner||imageRes2==R.drawable.img_a){
                        mDrawingView.setShape(R.drawable.img_b_inner, R.drawable.img_b);
                        index++;
                    }
                    else if(imageRes1==R.drawable.img_b_inner||imageRes2==R.drawable.img_b){
                        mDrawingView.setShape(R.drawable.img_c_inner, R.drawable.img_c);
                        index++;
                    }
                    else if(imageRes1==R.drawable.img_c_inner||imageRes2==R.drawable.img_c){
                        mDrawingView.setShape(R.drawable.img_d_inner, R.drawable.img_d);
                        index++;
                    }
                    else if(imageRes1==R.drawable.img_d_inner||imageRes2==R.drawable.img_d){
                        mDrawingView.setShape(R.drawable.img_e_inner, R.drawable.img_e);
                        index++;
                    }
                }
            });


    btn_prev = (Button) findViewById(R.id.btn_prev);

    //      btn_prev.setOnClickListener(this);
            btn_prev.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    initializeMP();
                    playsound.start();


                    if(imageRes1==R.drawable.img_b_inner||imageRes2==R.drawable.img_b){
                        mDrawingView.setShape(R.drawable.img_a_inner, R.drawable.img_a);
                        index--;
                    }
                    else if(imageRes1==R.drawable.img_c_inner||imageRes2==R.drawable.img_c){
                        mDrawingView.setShape(R.drawable.img_b_inner, R.drawable.img_b);
                        index--;
                    }
                    else if(imageRes1==R.drawable.img_d_inner||imageRes2==R.drawable.img_d){
                        mDrawingView.setShape(R.drawable.img_c_inner, R.drawable.img_c);
                        index--;
                    }
            });

        }

After using this code i got current position of image and when i press next button then only one time image is changed. I want to change image continously using next and previous button click.

Answer 1

After doing lots of R&D i got my answer...

    indexForImage = extras.getInt("pictureIndex");

         // OR, 2.  if you have no way to pass the index of array, you can get the index of array from resource id
         int resId = extras.getInt("picture1");
         for(int i=0; i<arrayOfImage.length; ++i) {
                      if (arrayOfImage[i] == resId) {
                                    indexForImage = i;
                                    break;


mDrawingView.setShape(arrayOfImage[indexForImage], innerImage[indexForImage]);

        btn_next.setOnClickListener(new OnClickListener() {

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

                initializeMP();
                playsound.start();

                btn_prev.setVisibility(View.VISIBLE);

                 // bound check is optional because next button will be invisible if there is no next image.
                indexForImage++;

                if (indexForImage + 1 >= arrayOfImage.length) {
                              v.setVisibility(View.INVISIBLE);
                 }


                mDrawingView.clearDrawing();
                // do whatever you need to do before setShape
                mDrawingView.setShape(arrayOfImage[indexForImage], innerImage[indexForImage]);
                // do whatever you need to do after setShape
        }       
        });

        btn_prev.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                initializeMP();
                playsound.start();


                btn_next.setVisibility(View.VISIBLE);

                   // bound check is optional because prev button will be invisible if there is no prev image.
                indexForImage--;

                if (indexForImage <= 0) {
                              v.setVisibility(View.INVISIBLE);
                 }
                else{
                    v.setVisibility(View.VISIBLE);
                }

                mDrawingView.clearDrawing();
                // do whatever you need to do before setShape
                mDrawingView.setShape(arrayOfImage[indexForImage], innerImage[indexForImage]);
                // do whatever you need to do after setShape
            }
        });


                      }
         }

Answer 2

You could implement something like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<ViewFlipper 
    android:id="@+id/view_flipper_component"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent" 
    android:layout_centerInParent="true"
    >

</ViewFlipper>

<LinearLayout 
    style="@style/ButtonContainer"
    android:orientation="horizontal">

    <Button 
        android:id="@+id/btnPrevious"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:background="@drawable/previous"
        android:gravity="center" />

    <Button 
        android:id="@+id/btnNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:background="@drawable/next"
        android:gravity="center" />

</LinearLayout>

This is how to add the ViewFlipper and two buttons for show prev/next image.

Then in your onCreate method add the code:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.view_flipper);
    mContext = this;
    mPreviousButton= (Button) this.findViewById(R.id.previous);
    mNextButton= (Button) this.findViewById(R.id.next);
    mPreviousButton.setOnClicklistener(onClickPreviousButtonListener);
    mNextButton.setOnClickListener(onClickNextButtonListener);
    mViewFlipper = (ViewFlipper) this.findViewById(R.id.view_flipper_component);
    String mPath = "your images folder";
    File file = new File(mPath);
    File[] files = file.listFiles();
    if(files != null) {
        ImageView imageView;
        Bitmap bitMap;
            for(File inFile : files) {
            bitMap = BitmapFactory.decodeFile(inFile.getAbsolutePath());
            imageView = new ImageView(this);
            imageView.setImageBitmap(bitMap);
            LinearLayout layout = new LinearLayout(mContext);
            layout.setTag(inFile.getAbsolutePath());
            layout.addView(imageView);
            mViewFlipper.addView(layout);
        }
    }
}

private OnClickListener onClickPreviousButtonListener = new OnClickListener() {
    @Override
    public void onClick(View v) {
    mViewFlipper.showPrevious();
    }
}

private OnClickListener onClickNextButtonListener = new OnClickListener() {
    @Override
    public void onClick(View v) {
    mViewFlipper.showNext();
    }
}

Answer 3

You can declare a ViewFlipper component in your xml layout, and then add programatically the images with an ImageView into the ViewFlipper. For this you can get the images like this:

String mPath = "your images folder";
File file = new File(mPath);
File[] files = file.listFiles();
if(files != null) {
    ImageView imageView;
    Bitmap bitMap;
    for(File inFile : files) {
        bitMap = BitmapFactory.decodeFile(inFile.getAbsolutePath());
        imageView = new ImageView(this);
        imageView.setImageBitmap(bitMap);
        LinearLayout layout = new LinearLayout(mContext);
        layout.setTag(inFile.getAbsolutePath());
        layout.addView(imageView);
        mViewFlipper.addView(layout);
    }
}

In this point, you have a imageView set into your ViewFlipper. Now you can call 'showNext()', 'showPrevious()', 'startFlipping()', 'stopFlipping()' methods. If you want use Buttons you should call this methods in yout ButtonClickListener.

Answer 4

Check ot out to the ViewFlipper component. This component has the methods 'showNext()' and 'showPrevious()', you can call this methods in your button listeners and the component show you the next/previous image, even you can implement a GestureDetectorListener and navigate through pictures slipping right o left with your finger.