How do I add some widgets on top on Android PDFViewCtrl?

[Support]

Q: I would like to add some widgets (buttons for example) on top of a page in PDFViewCtrl for Android. What is the best way to do that? How can we access the view container or the view form the PDFViewCtrl?

 

-------------

A:

 

PDFViewCtrl itself is a ViewGroup, so you can programmatically add views to it calling PDFViewCtrl.addView(...) or use the layout files.

For example, if you want to add a seekbar at the bottom of your activity, you could use the following layout. At runtime, you can call SeekBar.setVisibility(View.GONE) to hide or setVisibility(View.VISIBLE) to show the seekbar.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <pdftron.PDF.PDFViewCtrl
        android:id="@+id/pdfviewctrl"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical|horizontal" />
  
    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_gravity="center|bottom"
        android:progressDrawable="@drawable/seekbar" />
</FrameLayout>


If you use addView(...), you just need to create the widget you want, add it to the PDFViewCtrl and make sure the widget is in the right position, maybe calling/overriding layout() or using another layout as the base layout.

http://stackoverflow.com/questions/3228248/android-button-position-programmatically
http://stackoverflow.com/questions/5646929/changing-position-of-a-button

[Support]

A small clarification:

 

PDFViewCtrl does not have pageviews. The rendered pages are actually bitmaps, and PDFViewCtrl is just the container where the pages are presented.

I see two options to add buttons inside the page. One is to use PDFViewCtrl.addView(). In this case you will also need to listen for zoom and scale changes so you can reposition the button in the page. For example, with the PageChangeListener you can check what page you are and then decide where to position the button. I think this is the best option if you want to add and delete buttons based on page number or other aspects.

Another option is to use annotations, where the button is added directly in the document as a form field. As an example, you can check the InteractiveForms sample in our sample page.

[Support]

In this case, the widget change its position because when zooming in, the canvas size of the PDFViewCtrl is changed, and the widget will be positioned accordingly to what was specified in the layout() call, ie, 100 px from the left, 100 from the top. While zoomed in, if you scroll the control to the upper left, you'll see that the widget is still there, in its "original" position. The only thing that changed was the canvas size.

So, to keep the widget in the same position while zooming in/out, you should update its layout taking into account the scroll position of the PDFViewCtrl. Without extending the PDFViewCtrl class, you can use a Tool to achieve that. For example, in the onScale() event, you can update the widget layout with something along these lines:

@Override

public boolean onScale(float x, float y) {

if (bt != null) {

bt.layout(mPDFView.getScrollX() + 100, mPDFView.getScrollY() + 100, mPDFView.getScrollX() + 300, mPDFView.getScrollY() + 300);

}

return false;

}

 

This will keep the widget in the same position while zooming in/out. You may also want to update the layout while moving.

 

If your idea is to keep some widgets on top of the document, I would suggest using another view placed over the PDF view (maybe using a RelativeLayout) to make the code simpler and not worrying about calculating and updating the widgets position.

 

On Tuesday, April 9, 2013 10:01:46 AM UTC-7, varinder singh wrote:

Hi 

I am using the same code as suggested by you. But it has one problem.

When i zoom into pdf file, the position of widgets changes.

How do i fix that?

Thanks

On Friday, March 1, 2013 3:53:37 PM UTC-4, Anderson Konzen wrote:

PDFViewCtrl does not follow the same approach as LinearLayout, or RelativeLayout - which are also derived from ViewGroup. So you can't just use setX()/setY() because the control will not calculate the position the same way as LinearLayout, for example. In this case you need to explicitly set the layout propertie:

         Button bt = new Button(this);

        bt.setText("hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh");

        bt.setVisibility(View.VISIBLE);

        //bt.setX((float)500);

        //bt.setY((float)500);

        bt.layout(100, 100, 300, 300);

        bt.bringToFront();

        mPDFView.addView(bt);

On Friday, March 1, 2013 7:08:12 AM UTC-8, varinder singh wrote:

I have tried to add BUTTON on top of PDFViewCTRl but button is not visible at all. Please suggest the potential solutions. I am using this following code:

 if ( !inflate ) {

        //not through inflation; need to call initScrollbars to setup the scroll bars.

      

        mPDFView = new MyPDFViewCtrl(this, null);

TypedArray a = obtainStyledAttributes(R.styleable.View);

        mPDFView.initScrollbars(a);

        Button bt=new Button(this);

       

       

        bt.setText("hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh");

        bt.setVisibility(View.VISIBLE);

        bt.setX((float)500);

        bt.setY((float)500);

        bt.bringToFront();

        mPDFView.addView(bt);

        

        

        setContentView(mPDFView);

[varinder singh]

Hi

I have added some buttons on the top of the PDFViewCtrl, and i have override onScale() to reposition the widget correctly when it is scaled.

I have done the same for onMove() method so that when i move my page (when zoomed in), the widgets get repositioned correctly. But when i move my page, the widgets flicker a lot. I am using the following code :

public boolean onMove(MotionEvent e1, MotionEvent e2, float x_dist, float y_dist) {

showTransientPageNumber();

ImageButton bt2= (ImageButton)mPDFView.findViewById(99);

if (bt2 != null) {

bt2.layout(mPDFView.getScrollX() + 700, mPDFView.getScrollY() + 5, mPDFView.getScrollX() + 750, mPDFView.getScrollY() + 55);

}

     return false;  

}

Most of the time, when i move the page, the widget move along it and when i try to move the page again(just slightly) then the widget get repositioned correctly.

Any help will be appreciated. :)

Thanks

Varinder

[Anderson Konzen]

Hi Varinder,

You are doing the right thing. The problem is that the onMove is not enough to update the position of the button, since it is only raised when you are dragging the page with your finger. After a fling, for example, the PDFViewCtrl will still scroll a bit but you won't be able to get this event.

For that we added a new onScrollChanged event on the Tool interface that will be called in response the a scroll in PDFViewCtrl, and then you can update the position of the button accordingly. This will be available in the next unofficial release.

On the other side, I imagine you are trying to keep the button stationary over the PDFViewCtrl, right? In this case I believe the beast approach would be to use another view/layour on top of the PDFViewCtrl, and then forward any touch events to it.