Android pinch-to-zoom layout inside a viewpager with padding left and right

Question

I have a viewpager with left and right padding for showing the previews of left and right pages of viewpager.

viewPager.setPadding(30,0,30,0);

The content of the viewpager is a zoomlayout borrowed from here. So the issue is, whenever I zoom the layout from the viewpager, the only visible zoom is at top and bottom. Zooming is not visible to the left and right due to padding.

Screenshot before zooming

Screenshot after zooming

The zoomed view is limited inside the viewpager padding. I need the view to zoom fullscreen without any padding or boundaries.

These are the code snippets I was trying

activity_reader.xml

<?xml version="1.0" encoding="utf-8"?>
<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">
    <ViewPager
        android:id="@+id/reader_pager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#000"/>
</FrameLayout>

each_page.xml

<?xml version="1.0" encoding="utf-8"?>

<com.test.poc.widgets.ZoomLayout
    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"
    android:id="@+id/zoom_layout">
    <RelativeLayout
        android:id="@+id/img_holder"
        android:transitionName="pager"
        android:background="#FFF"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/page_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/a_four"
            android:layout_weight="1"
            android:scaleType="fitXY"
            />
    </RelativeLayout>
</com.test.poc.widgets.ZoomLayout>

After zooming the view, when I release the finger, the view should move smoothly to a fullscreen viewpager.

Tried setting clipToPadding as false, but still one side of padding still exist while zooming

Pilar

Answer 1

Did you try putting zoomview beside viewpager in framelayout (not in each page) so it is on top of viewpager.

Almshouse

I want to zoom each page of viewpager. That padding is for left and right preview. Zoomview should work from left and right also. I have to zoom the layouts of left and right also – Pilar

Answer 2

Try this, it's worked for me using this :https://gist.github.com/atermenji/3781644

public class ImageZoomViewPager extends ViewPager {

public ImageZoomViewPager(Context context) {
    super(context);
}

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

@Override
protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) {
    if (v instanceof ImageViewTouch) {
        return ((ImageViewTouch) v).canScroll(dx);
    } else {
        return super.canScroll(v, checkV, dx, x, y);
    }
}}

Sansculotte

Tried this before. Still the left and right portion of the zoomed view is cut (due to padding). – Pilar