> 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/xamarin/guides/viewer-components/document-slider-a.md).

# Customizing document viewer slider in Xamarin

Learn how to implement a DocumentSlider in Xamarin.Android with this comprehensive tutorial. Set up layout, attach PDFViewCtrl, customize appearance, and more. The Apryse Xamarin SDK streamlines secur

{% hint style="info" %}
**This tutorial only applies to Xamarin.Android. See Xamarin.iOS equivalent here .**
{% endhint %}

[`DocumentSlider`](https://sdk.apryse.com/api/xamarinandroid/tools/api/pdftron.PDF.Widget.Seekbar.DocumentSlider.html) is a [`RelativeLayout`](https://developer.android.com/reference/android/widget/RelativeLayout.html) that contains an [`AppCompatSeekBar`](https://developer.android.com/reference/androidx/appcompat/widget/AppCompatSeekBar/) to change pages, and a [`PageIndicatorLayout`](https://sdk.apryse.com/api/android/javadoc/reference/com/pdftron/pdf/controls/PageIndicatorLayout.html) on the top or side of the slider to show current page number when sliding.

![](https://653871032-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgjsBtuYmcKhWOdM9VCg4%2Fuploads%2Fgit-blob-4cd18339e2e4500c2b9b2a1d62f652465608df86%2F7204f484d803318a0b077330cf95a3530ee6ce5e-600x629.gif?alt=media)

## Show document slider

To set up your layout with the document slider, add a `<DocumentSlider>` element to your XML layout. For example, your layout may look like this:

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

```xml
<com.pdftron.pdf.widget.seekbar.DocumentSlider android:id="@+id/documentSlider" android:layout_width="0dp" android:layout_height="@dimen/document_seek_bar_height" android:layout_marginBottom="@dimen/page_jump_button_margin" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="1.0" />
```

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

Then, attach a [`PDFViewCtrl`](https://sdk.apryse.com/api/xamarinandroid/pdfnet/api/pdftron.PDF.PDFViewCtrl.html) to the document slider. If [`PDFViewCtrl`](https://sdk.apryse.com/api/xamarinandroid/pdfnet/api/pdftron.PDF.PDFViewCtrl.html) is in the same layout, you can set it by adding the [`app:pdfviewctrlId`](https://docs.apryse.com) attribute:

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

```xml
<com.pdftron.pdf.widget.seekbar.DocumentSlider android:id="@+id/documentSlider" android:layout_width="0dp" android:layout_height="@dimen/document_seek_bar_height" android:layout_marginBottom="@dimen/page_jump_button_margin" app:pdfviewctrlId="@id/pdfviewctrl" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="1.0" />
```

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

If [`PDFViewCtrl`](https://sdk.apryse.com/api/xamarinandroid/pdfnet/api/pdftron.PDF.PDFViewCtrl.html) is **not** in the same layout, you can programmatically set it to a document slider by calling [`setPdfViewCtrl(PDFViewCtrl)`](https://sdk.apryse.com/api/android/javadoc/reference/com/pdftron/pdf/widget/seekbar/DocumentSlider.html#setPdfViewCtrl\(PDFViewCtrl\)):

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

```csharp
var documentSlider = FindViewById<DocumentSlider>(Resource.Id.documentSlider);
documentSlider.SetPdfViewCtrl(mPdfViewCtrl);
```

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

## Document slider listeners

You can set a document slider seekbar event listener by calling [`setOnDocumentSliderTrackingListener`](https://sdk.apryse.com/api/android/javadoc/reference/com/pdftron/pdf/widget/seekbar/DocumentSlider.html#setOnDocumentSliderTrackingListener\(com.pdftron.pdf.widget.seekbar.DocumentSlider.OnDocumentSliderTrackingListener\)) to be notified when document slider touch tracking has started/stopped:

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

```csharp
documentSlider.DocumentSliderStartTrackingTouch += (sender, e) =>
{
    // Called when tracking on the seekbar has started
}
documentSlider.DocumentSliderStopTrackingTouch += (sender, e) =>
{
    // Called when tracking on the seekbar has stopped
}
```

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

## Appearance style

### Customize slider colors

You can customize the color of the left and right menu buttons as well as the seekbar by setting a custom style to the `pt_document_slider_style` attribute in your apps's theme. The custom style must extend `DocumentSliderStyle`. For example:

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

```xml
<style name="PDFTronAppTheme" parent="PDFTronAppThemeBase"> <item name="colorPrimary">@color/app_color_primary_day</item> <item name="colorPrimaryDark">@color/app_color_primary_dark_day</item> <item name="colorAccent">@color/app_color_accent</item> <!-- Set your custom style in your app theme --> <item name="pt_document_slider_style">@style/CustomDocumentSliderStyle</item> </style>

<style name="CustomDocumentSliderStyle" parent="DocumentSliderStyle"> <!-- Change the background color of the slider--> <item name="colorBackground">@android:color/red</item> <!-- Change the color of the seekbar and seekbar icon in the slider--> <item name="seekbarColor">@android:color/black</item> </style>
```

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

## XML attributes

| Attribute             | Description                                                                                                                               | Format    |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `app:pdfviewctrlId`   | Specifies the `PDFViewCtrl` view id                                                                                                       | Reference |
| `app:colorBackground` | Specifies background color. Uses default system background color if not defined.                                                          | Color     |
| `app:seekbarColor`    | Specifies seekbar progress bar and thumb color. Default value: `?attr/colorPrimary` in day mode and `@android:color/white` in night mode. | Color     |


---

# 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/xamarin/guides/viewer-components/document-slider-a.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.