Thumbnail slider

ThumbnailSlider is a LinearLayout that contains a left AppCompatImageButton, a AppCompatSeekBar for changing pages, and a right AppCompatImageButton. When sliding the seekbar, it will show a small page preview popup on top of the thumbnail slider.

Show thumbnail slider

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

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

Then, you must attach a PDFViewCtrl to the thumbnail slider. You can set it by adding attribute: app:pdfviewctrlId if PDFViewCtrl is in the same layout:

<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"
/>

If PDFViewCtrl is not in the same layout, you can set it to thumbnail slider programmatically by calling setPdfViewCtrl(PDFViewCtrl):

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

Change thumbnail slider buttons

You can change the image drawable of the left menu item and right menu item buttons by adding attributes app:leftMenuItemDrawable and app:rightMenuItemDrawable in the xml layout.

Example

<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"
/>

Alternatively, you can also change them programmatically by calling setMenuItem(@DrawableRes int, @MenuItemPosition int). The second parameter determines the position of the button which can be POSITION_LEFT or POSITION_RIGHT.

Example

mSeekBar.setMenuItem(R.drawable.left_icon, ThumbnailSlider.POSITION_LEFT);

Listeners

Thumbnail slider buttons listener

You can add menu item clicked event listener by calling setOnMenuItemClickedListener(OnMenuItemClickedListener) to be notified when one of the left or right buttons has been clicked.

mSeekBar.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.
        }
    }
});

Thumbnail slider seekbar track listener

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

mSeekBar.setThumbSliderListener(new ThumbnailSlider.OnThumbnailSliderTrackingListener() {
    @Override
    public void onThumbSliderStartTrackingTouch() {
        // a tracking touch on thumbnail slider was started.
    }

    @Override
    public void onThumbSliderStopTrackingTouch(int pageNum) {
        // the tracking touch on thumbnail slider was stopped
    }
});

Appearance styling

Thumbnail slider buttons styles

To customize left and right menu item icon colors add app:leftMenuItemColor and app:rightMenuItemColor attributes respectively into the XML resource. Finally to change the description of buttons use app:leftMenuItemContentDescription and app:rightMenuItemContentDescription:

<com.pdftron.pdf.controls.ThumbnailSlider
    android:id="@+id/thumbnailSlider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:seekbarColor="@android:color/black"
    app:leftMenuItemColor="@android:color/black"
    app:rightMenuItemColor="@android:color/black"
    app:leftMenuItemContentDescription="Left"
    app:rightMenuItemContentDescription="Right"/>
/>

Alternatively, you can define thumbnail_slider style inside your style.xml file:

<style name="YourAppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <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>

    <item name="thumbnail_slider">@style/CustomThumbnailSliderStyle</item>
</style>

<style name="CustomThumbnailSliderStyle" parent="ThumbnailSliderStyle">
    app:leftMenuItemColor="@android:color/black"
    app:rightMenuItemColor="@android:color/black"
    app:leftMenuItemContentDescription="Left"
    app:rightMenuItemContentDescription="Right"/>
</style>

Thumbnail slider Seekbar styles

You can customize thumbnail slider seekbar by setting app:seekbarColor in your XML layout, like:

<com.pdftron.pdf.controls.ThumbnailSlider
    android:id="@+id/thumbnailSlider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:seekbarColor="@android:color/black"
    ...
/>

or in your style.xml file:

...

<style name="CustomThumbnailSliderStyle" parent="ThumbnailSliderStyle">
    app:seekbarColor="@android:color/black"
    ...
</style>

If you want to further changing seekbar styles such as padding and height, you can override the default seekbar style: R.style.ThumbnailSliderStyle.Seekbar.

Example API < 21:

<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:layout_gravity">center</item>
    <item name="android:minHeight">2dp</item>
    <item name="android:maxHeight">2dp</item>
</style>

API >= 21:

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

In addition, you can also override seekbar progress bar drawable by overriding the drawable file seek_track_material.xml. If you want to change seekbar thumbnail drawable, you should override the drawable file seek_thumb.xml.

XML attributes

app:pdfviewctrlId

Specifies the PDFViewCtrl view id

Format: reference

app:seekbarColor

Specifies seekbar progress bar and thumb color

Format: color

Default value: ?attr/colorPrimary in day mode and @android:color/white in night mode

app:leftMenuItemDrawable

Specifies left menu item drawable resource.

Format: reference

app:rightMenuItemDrawable

Specifies right menu item drawable resource.

Format: reference

app:leftMenuItemColor

Specifies left menu item color

Format: color

Default value: ?attr/colorPrimary in day mode and @android:color/white in night mode

app:rightMenuItemColor

Specifies right menu item color

Format: color

Default value: ?attr/colorPrimary in day mode and @android:color/white in night mode

app:leftMenuItemContentDescription

Specifies the content description of left menu item

Format: string

app:rightMenuItemContentDescription

Specifies the content description of right menu item

Format: string