Section:

Add a custom view to a PDF page in Xamarin

This tutorial only applies to Xamarin.Android. See Xamarin.iOS equivalent here.

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.

Apryse Docs Image

The position of CustomRelativeLayout is calculated in PDF page coordinates. In page coordinate, the origin location (0, 0) is at the bottom left corner of the PDF page. The x axis extends horizontally to the right and y axis extends vertically upward. For more information, see: understanding coordinates

Show CustomRelativeLayout

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

XML

1<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" >
2  <pdftron.PDF.Tools.CustomRelativeLayout android:layout_width="50dp" android:layout_height="50dp" app:posX="50" app:posY="150" app:pageNum="3" app:zoomWithParent="true">
3    <!--Child views under CustomRelativeLayout-->
4    <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="Custom Layout Text View" android:textSize="24dp" android:elevation="2dp"/>
5    <View android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/light_gray" />
6  </pdftron.PDF.Tools.CustomRelativeLayout>
7</pdftron.PDF.PDFViewCtrl>

If you delete the page defined in CustomRelativeLayout, the CustomRelativeLayoutwill not be removed from PDFViewCtrl. Please remember to remove CustomRelativeLayout manually.

Add custom layout from separate layout file

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:

XML

1<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">
2    <!--Child views under CustomRelativeLayout-->
3    <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="Custom Layout Text View" android:textSize="24dp" android:elevation="2dp"/>
4    <View android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/light_gray" />
5</pdftron.PDF.Tools.CustomRelativeLayout>

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

If you delete the page defined in CustomRelativeLayout, the CustomRelativeLayout will not be removed from PDFViewCtrl. Please remember to remove CustomRelativeLayout manually.

Add custom layout programmatically

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

1CustomRelativeLayout customRelativeLayout = new CustomRelativeLayout(this, pdfViewCtrl, 50, 150, 3);
2customRelativeLayout.SetZoomWithParent(true);
3
4TextView textView = new TextView(this);
5textView.Text = "Custom Layout Text View";
6textView.TextSize = 24;
7
8View view = new View(this);
9view.SetBackgroundColor(Android.Graphics.Color.LightGray);
10
11customRelativeLayout.AddView(view);
12customRelativeLayout.AddView(textView);
13pdfViewCtrl.AddView(customRelativeLayout);

XML attributes

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

Attribute

Description

app:posX

Specifies the x-coordinate in PDF page coordinates .

Default value: 0

app:posY

Specifies the y-coordinate in PDF page coordinates .

Default value: 0

app:pageNum

Specifies the page number of the document that will contain this CustomRelativeLayout.

Default value: 1

app:zoomWithParent

Specifies whether the CustomRelativeLayout will zoom with parent.

Default value: true

android:layout_width

Specifies the width of the view, it must be a positive integer in PDF page coordinates .

android:layout_height

Specifies the height of the view, it must be a positive integer in PDF page coordinates .

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales