> 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/document-slider-a.md).

# Customizing document viewer slider in Android

Enhance your layout with DocumentSlider - a RelativeLayout featuring an AppCompatSeekBar for page navigation and a PageIndicatorLayout. Learn how to set up and customize your document slider effortles

[`DocumentSlider`](https://sdk.apryse.com/api/android/javadoc/reference/com/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://226546913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0QItsdFBmuuL9ezHimHy%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/android/javadoc/reference/com/pdftron/pdf/PDFViewCtrl.html) to the document slider. If [`PDFViewCtrl`](https://sdk.apryse.com/api/android/javadoc/reference/com/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/android/javadoc/reference/com/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="Java" %}
{% code lineNumbers="true" %}

```java
DocumentSlider documentSlider = findViewById(R.id.documentSlider);
documentSlider.setPdfViewCtrl(mPdfViewCtrl);
```

{% endcode %}
{% endtab %}

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

```kotlin
val documentSlider = findViewById(R.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="Java" %}
{% code lineNumbers="true" %}

```java
documentSlider.setOnDocumentSliderTrackingListener(new DocumentSlider.OnDocumentSliderTrackingListener() {
    @Override
    public void onDocumentSliderStartTrackingTouch() {
        // Called when tracking on the seekbar has started
    }

    @Override
    public void onDocumentSliderStopTrackingTouch(int pageNum) {
        // Called when tracking on the seekbar has stopped
    }
});
```

{% endcode %}
{% endtab %}

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

```kotlin
documentSlider!!.setOnDocumentSliderTrackingListener(object : DocumentSlider.OnDocumentSliderTrackingListener {
    override fun onDocumentSliderStartTrackingTouch() {
        // Called when tracking on the seekbar has started
    }

    override fun onDocumentSliderStopTrackingTouch(pageNum: Int) {
        // 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="Java" %}
{% code lineNumbers="true" %}

```java
<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 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/document-slider-a.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.