> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/android/ui-customization/custom-relative-layout.md).

# Add a custom view to a PDF page in Android

Learn how to use CustomRelativeLayout in PDFViewCtrl for precise positioning and nesting of child views. Optimize your layout with CustomRelativeLayout attributes like posX, posY, and pageNum. Add cus

[`CustomRelativeLayout`](https://sdk.apryse.com/api/android/javadoc/reference/com/pdftron/pdf/tools/CustomRelativeLayout.html) is a [`RelativeLayout`](https://developer.android.com/reference/android/widget/RelativeLayout.html) that can be nested under [`PDFViewCtrl`](https://sdk.apryse.com/api/android/javadoc/reference/com/pdftron/pdf/PDFViewCtrl.html) 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.

![](https://226546913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0QItsdFBmuuL9ezHimHy%2Fuploads%2Fgit-blob-9c2127964b8e906c63fca3f7c6d26f0d3ae46a1e%2F84930a5a06fd0b2b269baedcfd077e0d46071906-380x327.png?alt=media)

{% hint style="info" %}
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](/android/viewer/coordinates.md)
{% endhint %}

## Show CustomRelativeLayout

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

{% tabs %}
{% tab title="XML" %}
{% code lineNumbers="true" %}

```xml
<com.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" >
    <com.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" />
    </com.pdftron.pdf.tools.CustomRelativeLayout>
</com.pdftron.pdf.PDFViewCtrl>
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**If you delete the page defined in CustomRelativeLayout, the CustomRelativeLayoutwill not be removed from PDFViewCtrl. Please remember to remove CustomRelativeLayout manually.**
{% endhint %}

## 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:

{% tabs %}
{% tab title="XML" %}
{% code lineNumbers="true" %}

```xml
<com.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" />
</com.pdftron.pdf.tools.CustomRelativeLayout>
```

{% endcode %}
{% endtab %}
{% endtabs %}

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

{% hint style="info" %}
If you delete the page defined in `CustomRelativeLayout`, the `CustomRelativeLayout` **will not** be removed from `PDFViewCtrl`. Please remember to remove `CustomRelativeLayout` manually.
{% endhint %}

## Add custom layout programmatically

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

{% tabs %}
{% tab title="C#" %}
{% code lineNumbers="true" %}

```csharp
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);
```

{% endcode %}
{% endtab %}

{% tab title="Java" %}
{% code lineNumbers="true" %}

```java
CustomRelativeLayout customRelativeLayout = new CustomRelativeLayout(this, pdfViewCtrl, 50, 150, 3);
customRelativeLayout.setZoomWithParent(true);
TextView textView = new TextView(this);
textView.setText("Custom Layout Text View");
textView.setTextSize(24);
View view = new View(this);
view.setBackgroundColor(Color.LTGRAY);
customRelativeLayout.addView(view);
customRelativeLayout.addView(textView);
pdfViewCtrl.addView(customRelativeLayout);
```

{% endcode %}
{% endtab %}

{% tab title="Kotlin" %}
{% code lineNumbers="true" %}

```kotlin
val customRelativeLayout = CustomRelativeLayout(this, pdfViewCtrl, 50.0, 150.0, 3)
customRelativeLayout.setZoomWithParent(true)
val textView = TextView(this)
textView.text = "Custom Layout Text View"
textView.textSize = 24f
val view = View(this)
view.setBackgroundColor(Color.LTGRAY)
customRelativeLayout.addView(view)
customRelativeLayout.addView(textView)
pdfViewCtrl.addView(customRelativeLayout)
```

{% endcode %}
{% endtab %}
{% endtabs %}

## 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 ](/android/viewer/coordinates.md). Default value: 0                     |
| `app:posY`              | Specifies the y-coordinate in [PDF page coordinates ](/android/viewer/coordinates.md). 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/viewer/coordinates.md).  |
| `android:layout_height` | Specifies the height of the view, it must be a positive integer in [PDF page coordinates ](/android/viewer/coordinates.md). |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.apryse.com/android/ui-customization/custom-relative-layout.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.