Wednesday, 24 October 2018

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

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 Normal View without zooming (pinch to zoom)

Screenshot after zooming Pinch to zoom Pinch to zoom

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



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

No comments:

Post a Comment