How to implement both OnClick and Sliding events at once for an ImageFlipper in Android

Question

I am trying to develop an Android image flipper with the following behaviours.

It automatically starts to flip when the activity starts (Flipping interval also has been implemented).
Users also can slide images in the flipper right or left
Users should be able to click a particular image and load another activity

Item 1, I could successfully implement without an issue.

The issue is, I cannot implement both 2 & 3 at once because of imageView.OnClickListner() always comes first before firing the Flipper.OnTouch() Listner. So, sliding never happens but new activity loads at once.

How can I implement all 3 requirements at once in my Android app?

public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {

        View root = inflater.inflate(R.layout.fragment_home, container, false);

        int sliderImgs[] = {R.drawable.slider_img_1, R.drawable.slider_img_1, R.drawable.slider_img_1};
        viewFlipper = root.findViewById(R.id.img_slider);
        mContext = this.getContext();
        viewFlipper.setAutoStart(true);
        viewFlipper.setFlipInterval(20000);

        viewFlipper.setInAnimation(this.getContext(), R.anim.slide_in_right);
        viewFlipper.setOutAnimation(this.getContext(), R.anim.slide_out_left);
        viewFlipper.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(final View view, final MotionEvent event) {
                detector.onTouchEvent(event);
                return true;
            }
        });

        for(int sliderImg:sliderImgs){
            slideshowImages(sliderImg);
        }
}

    private void slideshowImages(int image){
        ImageView imageView = new ImageView(this.getContext());
        imageView.setBackgroundResource(image);

        viewFlipper.addView(imageView);

        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                View notificaionFragment = getLayoutInflater().inflate(R.layout.fragment_property_details, null);
                BottomSheetDialog bottomSheetDialog = arrangeBottomSheet(notificaionFragment);
                new Notification(notificaionFragment, mContext, getLayoutInflater(), bottomSheetDialog);
            }
        });
}

Could you please show us some code? I would like to know if the flipper is a custom implementation — Jorge Martinez, Dec 14 '20 at 10:37

score 1 · Accepted Answer · answered Dec 14 '20 at 10:47

What I have done is to set a threshold...I track the movement of the finger in the screen; if it reach certain number I treat it as a flip; otherwise its a click on button (or ImageView, or whatever), and call performClick.

@Override
        public boolean onTouch(View v, MotionEvent event) {
            int action = event.getActionMasked();
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                    startX = event.getX();
                    break;
                case MotionEvent.ACTION_UP:

                    float endX = event.getX();
                    float endY = event.getY();
                    //swipe right
                    if (startX > endX && (startX - endX) > 10.0) {
                        if (pageIndex < totalPages) {
                            pageIndex++;
                            vFlipper.setInAnimation(EventActivity.this, R.anim.transition_in_left);
                            vFlipper.setOutAnimation(EventActivity.this, R.anim.transition_out_left);
                            vFlipper.showNext();
                        }

                    } else if ((startX - endX) > 0 && (startX - endX) < 10.0) {
                        v.performClick();
                    }
                    float operacion = Math.abs(startX - endX);
                    if (startX < endX && operacion > 10.0) {
                        if (pageIndex > 1) {
                            pageIndex--;
                            vFlipper.setInAnimation(EventActivity.this, R.anim.transition_in_right);
                            vFlipper.setOutAnimation(EventActivity.this, R.anim.transition_out_right);
                            vFlipper.showPrevious();
                        }
                    } else if (operacion < 10 && operacion != 0) {
                        v.performClick();
                    }

                    if (startX - endX == 0) {
                        v.performClick();
                    }

                    break;
            }
            return true;
        }

score 0 · Answer 2 · answered Dec 14 '20 at 11:09

Well... Looking at your implementation, I would suggest you use a viewPager instead, is more user friendly, you can add fragments or views so easy and is less tricky. https://androidwave.com/auto-scroll-viewpager-android/ take a look at this tutorial, it works perfectly, I used it to implement a custom viewPager in one of my apps!

How to implement both OnClick and Sliding events at once for an ImageFlipper in Android

2 Answers2