> 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.