Search code examples
androidandroid-viewpager

Hide/Show on Button/Layout on click without affecting imageview zoom

enter image description here This image I'm showing from Whatsapp.

I have a FrameLayout. It contains two viewGroup, one is ViewPager and other is RelativeLayout. I want like ImageView, where when user clicks on the image it hides the other button and only shows the image and vice versa.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.bogdwellers.pinchtozoom.view.ImageViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black" />

<RelativeLayout
    android:layout_width="match_parent"
    android:id="@+id/rrr"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/share_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="Share" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/sudoLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
</RelativeLayout>

</FrameLayout>

Coding:

RelativeLayout relativeLayout = v.findViewById(R.id.rrr);
    RelativeLayout sudoLayout = v.findViewById(R.id.sudoLayout);
    sudoLayout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (rrr.getVisibility() == View.VISIBLE){
                rrr.setVisibility(View.GONE);
            }
            else {
                rrr.setVisibility(View.VISIBLE);
            }
        }
    });

I tried onClick method on sudoLayout but it affects ViewPager. I can't swipe left or right and ImageView Zoom is also gone.

Solution

  • I implemented the same functionality for my Gallery App. As a solution I made the ViewPager clickable. For that you have to extend it first:

    public class ClickableViewPager extends ViewPager {

private OnItemClickListener mOnItemClickListener;

public ClickableViewPager(Context context) {
    super(context);
    setup();
}

public ClickableViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
    setup();
}

private void setup() {
    final GestureDetector tapGestureDetector = new    GestureDetector(getContext(), new TapGestureListener());

    setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            tapGestureDetector.onTouchEvent(event);
            return false;
        }
    });
}

public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
    mOnItemClickListener = onItemClickListener;
}

public interface OnItemClickListener {
    void onItemClick();
}

private class TapGestureListener extends GestureDetector.SimpleOnGestureListener {

    @Override
    public boolean onSingleTapConfirmed(MotionEvent e) {
        if(mOnItemClickListener != null) {
            mOnItemClickListener.onItemClick();
        }
        return true;
    }
}
}

    Then in XML replace the support ViewPager with com.yourpackage.ClickableViewPager. And then use it like that:

    mViewPager.setOnItemClickListener(new ClickableViewPager.OnItemClickListener() {
        @Override
        public void onItemClick() {
            // hide and show
        }
    });