Add a custom view to a page in Xamarin.Android

CustomRelativeLayout is a RelativeLayout that can be nested under PDFViewCtrl with a given page position and page number. All child views of CustomRelativeLayout are displayed on top of PDFViewCtrl. When PDFViewCtrl is scrolling or zooming, CustomRelativeLayout will adjust position and size automatically according to the app:zoomWithParent attribute.

You can add CustomRelativeLayout as a child view of PDFViewCtrl in your XML layout resource file:

<pdftron.PDF.PDFViewCtrl
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/pdfviewctrl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical|horizontal" >
  <pdftron.PDF.Tools.CustomRelativeLayout
    android:layout_width="50dp"
    android:layout_height="50dp"
    app:posX="50"
    app:posY="150"
    app:pageNum="3"
    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="24dp"
        android:elevation="2dp"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/light_gray" />
  </pdftron.PDF.Tools.CustomRelativeLayout>
</pdftron.PDF.PDFViewCtrl>

Alternatively, you can also add CustomRelativeLayout from separate layout file. Here is an example where the CustomRelativeLayout is inflated and added directly to PDFViewCtrl.

1. Define an XML layout resource file containing a CustomRelativeLayout. For example, our layout file R.layout.custom_layout_textview shown below contains a CustomRelativeLayout with two child views:

   <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="150"
       app:pageNum="3"
       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="24dp"
           android:elevation="2dp"/>
       <View
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:background="@color/light_gray" />
   </pdftron.PDF.Tools.CustomRelativeLayout>

2. Then you can inflate the layout and add it directly to PDFViewCtrl:

   public void AddCustomLayout(PDFViewCtrl pdfViewCtrl)
   {
       LayoutInflater inflater = (LayoutInflater) this.GetSystemService(Context.LayoutInflaterService);
       View view = inflater.Inflate(Resource.Layout.custom_layout_textview, pdfViewCtrl);
   }

You can also add the custom layout programmatically. The code below uses CustomRelativeLayoutconstructor to create a custom layout equivalent to previous examples:

CustomRelativeLayout customRelativeLayout = new CustomRelativeLayout(this, pdfViewCtrl, 50, 150, 3);
customRelativeLayout.SetZoomWithParent(true);

TextView textView = new TextView(this);
textView.Text = "Custom Layout Text View";
textView.TextSize = 24;

View view = new View(this);
view.SetBackgroundColor(Android.Graphics.Color.LightGray);

customRelativeLayout.AddView(view);
customRelativeLayout.AddView(textView);
pdfViewCtrl.AddView(customRelativeLayout);

CustomRelativeLayout allows child views to be displayed inside PDFViewCtrl. XML attributes for positioning CustomRelativeLayout in PDFViewCtrl are defined in the table below: