androidandroid-viewflipper

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


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

  1. It automatically starts to flip when the activity starts (Flipping interval also has been implemented).
  2. Users also can slide images in the flipper right or left
  3. 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);
            }
        });
}

Solution

  • 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;
            }