androidxamarin.androidpdftronpdfnet

Adding a custom view to a page not working in PDFTron.Android for Xamarin


I'm trying to use PDFTron for Xamarin Android. I want to render and paint my custom annotations, without using their annotation system. According to their documentation in https://www.pdftron.com/documentation/xamarin/guides/ui-customization/custom-view/android/ You can add a CustomRelativeLayout which doesn't work. It basically renders nothing in top of the PDF

enter image description here

I hosted the whole solution in here http://s000.tinyupload.com/index.php?file_id=14574507524295393508 so it's easy to test and see if someone can see what's wrong.

Thanks!

UPDATE

Tried Shirley G suggestion. Modified the pdf_custom_layout to be added to:

   <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="50dp"
    android:layout_height="50dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Custom Layout Text View"
        android:textSize="24dp"
        android:elevation="2dp"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_red_dark" />
</LinearLayout>

and the code to:

 [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        private PDFViewCtrl _pdfControl;
        private PDFDoc _doc;        

        protected override void OnCreate(Bundle savedInstanceState)
        {
            PDFNet.Initialize(this, Resource.Raw.pdfnet, "Insert commercial license key here after purchase");
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);

            _pdfControl = FindViewById<PDFViewCtrl>(Resource.Id.pdfControl);

            var assets = this.Assets;
            using var sr = new StreamReader(assets.Open("dummy.pdf"));
            _doc = new PDFDoc(sr.BaseStream);
            _pdfControl.DocumentLoad += _pdfControl_DocumentLoad;
            _pdfControl.SetDoc(_doc);
        }

        private void _pdfControl_DocumentLoad(object sender, System.EventArgs e)
        {
            var overlay = new CustomRelativeLayout(BaseContext);

            var color = new Android.Graphics.Color(BaseContext.GetColor(Resource.Color.red));
            overlay.SetBackgroundColor(color);
            overlay.SetZoomWithParent(true);

            LayoutInflater.Inflate(Resource.Layout.pdf_custom_layout, overlay);

            _pdfControl.AddView(overlay);
        }

But nothing happened, still no overlay shown.

UPDATE 2

I added the fixes and started working, however, when I add this code:

var overlay = new CustomRelativeLayout(BaseContext, _pdfControl, 50, 50, 1);

            overlay.SetBackgroundColor(BaseContext.Resources.GetColor(Resource.Color.orange));
            overlay.SetZoomWithParent(true);


            _pdfControl.AddView(overlay);
            overlay.LayoutParameters.Width = 300;
            overlay.LayoutParameters.Height = 300;


            _pdfControl.Invalidate();
            overlay.RequestLayout();

I see a small rect of 50x50 at page position x=50 and y50. I specified the overlay to be 300 in width and it's not showing it.

If I add this, nothing is shown at all even the overlay should be of 300x300 at x=0, y =0.

var overlay = new CustomRelativeLayout(BaseContext, _pdfControl, 0, 0, 1);

Solution

  • The layout needs to be added on to the view hierarchy (i.e. PDFViewCtrl.AddView) which is not done in your project. You can find a working sample here:

    https://github.com/PDFTron/pdftron-android-samples/tree/master/CustomUI

    In particular, relevant code can be find here: https://github.com/PDFTron/pdftron-android-samples/blob/master/CustomUI/app/src/main/java/com/pdftron/android/tutorial/customui/custom/CustomLinkClick.java

    The sample adds the layout to page 3, since your pdf file only have 1 page, you will want to change that to page 1 in the XML layout. Do note that all posX and poxY are in page space, not screen space. Read more on the topic here: https://www.pdftron.com/documentation/android/guides/basics/coordinates

    With that in mind, running your project will see:

    enter image description here

    layout:

    <pdftron.PDF.Tools.CustomRelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:posX="50"
        app:posY="50"
        app:pageNum="1"
        app:zoomWithParent="true">
        <!--Child views under CustomRelativeLayout-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Custom Layout Text View"
            android:textSize="12sp"
            android:elevation="2dp"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_red_dark" />
    </pdftron.PDF.Tools.CustomRelativeLayout>
    

    If you are adding the view programmatically, you will need to specify the location, or if you are putting it over an annotation, you can specify the annotation.

    Typically looks like this:

    CustomRelativeLayout overlay = new CustomRelativeLayout(context);
    overlay.setBackgroundColor(context.getResources().getColor(R.color.orange));
    overlay.setAnnot(pdfViewCtrl, annot, pageNum);
    overlay.setZoomWithParent(true);
    pdfViewCtrl.addView(overlay);