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

# Customizing thumbnail slider in Android

Learn how to set up and customize ThumbnailSlider in your Android app layout. Add a ThumbnailSlider element to your XML layout, attach a PDFViewCtrl, change buttons, and customize appearance. Optimize

[`ThumbnailSlider`](https://sdk.apryse.com/api/android/javadoc/reference/com/pdftron/pdf/widget/seekbar/DocumentSlider.html) is a [`LinearLayout`](https://developer.android.com/reference/android/widget/LinearLayout.html) that contains an [`AppCompatSeekBar`](https://developer.android.com/reference/androidx/appcompat/widget/AppCompatSeekBar/) to change pages, and two [`AppCompatImageButton`](https://developer.android.com/reference/androidx/appcompat/widget/AppCompatImageButton/) on the left and right side. When sliding the seekbar, it displays a small page preview on top of the thumbnail slider.

![](https://226546913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0QItsdFBmuuL9ezHimHy%2Fuploads%2Fgit-blob-8d9a5332f5f0f19b7366a42dff2c60c5f53be78a%2F2a26a9c2e25e146ff678eb03af5c39fc52d55587-420x540.gif?alt=media)

## Show thumbnail slider

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

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

```xml
<com.pdftron.pdf.controls.ThumbnailSlider android:id="@+id/thumbnailSlider" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true"/>
```

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

Then, attach a [`PDFViewCtrl`](https://sdk.apryse.com/api/android/javadoc/reference/com/pdftron/pdf/PDFViewCtrl.html) to the thumbnail 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.controls.ThumbnailSlider android:id="@+id/thumbnailSlider" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:pdfviewctrlId="@id/pdfviewctrl"/>
```

{% 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 thumbnail slider by calling `setPdfViewCtrl(PDFViewCtrl)`:

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

```java
ThumbnailSlider thumbnailSlider = findViewById(R.id.thumbnailSlider);
thumbnailSlider.setPdfViewCtrl(mPdfViewCtrl);
```

{% endcode %}
{% endtab %}

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

```kotlin
val thumbnailSlider = findViewById(R.id.thumbnailSlider)
thumbnailSlider.setPdfViewCtrl(mPdfViewCtrl)
```

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

## Change thumbnail slider buttons

You can change the image drawable of the left menu item and right menu item buttons by adding the [`app:leftMenuItemDrawable`](https://docs.apryse.com) and [`app:rightMenuItemDrawable`](https://docs.apryse.com) attributes in your xml layout.

**Example**

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

```xml
<com.pdftron.pdf.controls.ThumbnailSlider android:id="@+id/thumbnailSlider" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:leftMenuItemDrawable="@drawable/left_icon" app:rightMenuItemDrawable="@drawable/right_icon"/>
```

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

Additionally, you can remove the left and right slider buttons by setting the drawables to null:

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

```xml
<com.pdftron.pdf.controls.ThumbnailSlider android:id="@+id/thumbnailSlider" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:leftMenuItemDrawable="@null" app:rightMenuItemDrawable="@null"/>
```

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

You can also change the buttons programmatically by calling `setMenuItem(@DrawableRes int, @MenuItemPosition int)`. The second parameter determines the position of the button which is either `POSITION_LEFT` or `POSITION_RIGHT`.

**Example**

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

```java
thumbnailSlider.setMenuItem(R.drawable.left_icon, ThumbnailSlider.POSITION_LEFT);
```

{% endcode %}
{% endtab %}

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

```kotlin
thumbnailSlider.setMenuItem(R.drawable.left_icon, ThumbnailSlider.POSITION_LEFT)
```

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

## Thumbnail slider listeners

### Buttons listener

You can add a menu item clicked event listener by calling `setOnMenuItemClickedListener` to be notified when one of the left or right buttons is clicked.

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

```java
thumbnailSlider.setOnMenuItemClickedListener(new ThumbnailSlider.OnMenuItemClickedListener(){
    @Override
    public void onMenuItemClicked(int menuItemPosition) {
        if (menuItemPosition == ThumbnailSlider.POSITION_LEFT) {
            // The left button was clicked.
        } else {
            // The right button was clicked.
        }
    }
});
```

{% endcode %}
{% endtab %}

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

```kotlin
thumbnailSlider!!.setOnMenuItemClickedListener { menuItemPosition ->
    if (menuItemPosition == ThumbnailSlider.POSITION_LEFT) {
        // The left button was clicked.
    } else {
        // The right button was clicked.
    }
}
```

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

### Seekbar listener

You can set a thumbnail slider seekbar event listener by calling `setThumbSliderListener` to be notified when thumbnail slider touch tracking has started/stopped:

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

```java
thumbnailSlider.setThumbSliderListener(new ThumbnailSlider.OnThumbnailSliderTrackingListener() {
    @Override
    public void onThumbSliderStartTrackingTouch() {
        // Called when tracking on the seekbar has started
    }

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

{% endcode %}
{% endtab %}

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

```kotlin
thumbnailSlider!!.setThumbSliderListener(object : ThumbnailSlider.OnThumbnailSliderTrackingListener {
    override fun onThumbSliderStartTrackingTouch() {
        // Called when tracking on the seekbar has started
    }

    override fun onThumbSliderStopTrackingTouch(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 `thumbnail_slider` attribute in your apps's theme. The custom style must extend `ThumbnailSliderStyle`. 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="thumbnail_slider">@style/CustomThumbnailSliderStyle</item> </style>

<style name="CustomThumbnailSliderStyle" parent="ThumbnailSliderStyle"> <!-- 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> <!-- Change the color of the menu button left of the slider --> <item name="leftMenuItemColor">@android:color/black</item> <!-- Change the color of the menu button right of the slider --> <item name="rightMenuItemColor">@android:color/black</item> <!-- Change the description of the menu button left of the slider --> <item name="leftMenuItemContentDescription">"LeftDescription"</item> <!-- Change the color of the menu button right of the slider --> <item name="rightMenuItemContentDescription">"RightDescription"</item> <!-- Change the icon of the menu button left of the slider --> <item name="leftMenuItemDrawable">@drawable/ic_thumbnails_grid_black_24dp</item> <!-- Change the icon of the menu button right of the slider --> <item name="rightMenuItemDrawable">@drawable/ic_list_white_24dp</item> </style>
```

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

### Customize seekbar attributes

If you want to further customize the seekbar's layout attributes and appearance, such as padding and height, you can override the default seekbar style `R.style.ThumbnailSliderStyle.Seekbar` by declaring the following in `res/values/styles.xml`:

**Example**

For API < 21:

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

```java
<style name="ThumbnailSliderStyle.Seekbar" parent="Widget.AppCompat.SeekBar" > <!-- add paddingTop and paddingBottom for api < 21 here for avoiding seekbar becomes too thick--> <item name="android:paddingTop">16dp</item> <item name="android:paddingBottom">16dp</item> <item name="android:minHeight">2dp</item> <item name="android:maxHeight">2dp</item> <item name="android:layout_gravity">center</item> </style>
```

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

For API >= 21:

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

```xml
<style name="ThumbnailSliderStyle.Seekbar" parent="Widget.AppCompat.SeekBar"> <item name="android:progressTint">?attr/colorPrimary</item> <item name="android:progressBackgroundTint">?attr/colorPrimary</item> <item name="android:colorControlActivated">?attr/colorPrimary</item> <item name="android:colorControlHighlight">?attr/colorPrimary</item> <item name="android:minHeight">2dp</item> <item name="android:maxHeight">2dp</item> <item name="android:layout_gravity">center</item> </style>
```

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

### Customize the thumb and progress bar

The seekbar progress bar drawable can be customized by overriding the `seek_track_material.xml` drawable file. Similarly, the seekbar thumbnail drawable can be changed by overriding the `seek_thumb.xml` drawable file. For reference, the source code for these drawables can be found in the `lib\src\PDFViewCtrlTools\res\drawable` folder of the SDK package.

## XML attributes

| Attribute                             | Description                                                                                                                               | Format    |
| ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `app:pdfviewctrlId`                   | Specifies the `PDFViewCtrl` view id                                                                                                       | Reference |
| `app:leftMenuItemContentDescription`  | Specifies the content description of left menu item.                                                                                      | String    |
| `app:rightMenuItemContentDescription` | Specifies the content description of right menu item.                                                                                     | String    |
| `app:leftMenuItemDrawable`            | Specifies left menu item drawable resource.                                                                                               | Reference |
| `app:rightMenuItemDrawable`           | Specifies right menu item drawable resource.                                                                                              | 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     |
| `app:leftMenuItemColor`               | Specifies left menu item color. Default value: `?attr/colorPrimary` in day mode and `@android:color/white` in night mode.                 | Color     |
| `app:rightMenuItemColor`              | Specifies right menu item color. Default value: `?attr/colorPrimary` in day mode and `@android:color/white` in night mode.                | Color     |
| `app:shadowEnabled`                   | Specifies whether the shadow will appear. Default value: `true`.                                                                          | Boolean   |


---

# 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/thumbnail-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.