Some test text!

menu
search
Thumbnail sliderkeyboard_arrow_down

Thumbnail slider

You can use the slider to get a thumbnail review of pages before they are actually shown in the viewer.

Page slider

This tutorial only applies to Xamarin.Android. See Xamarin.iOS equivalent here.

ThumbnailSlider is a LinearLayout that contains an AppCompatSeekBar to change pages, and two AppCompatImageButton on the left and right side. When sliding the seekbar, it displays a small page preview on top of the thumbnail slider.

thumbnail-slider

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

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

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

<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 programmatically set it to a thumbnail slider by calling setPdfViewCtrl(PDFViewCtrl):

var thumbnailSlider = FindViewById<ThumbnailSlider>(Resource.Id.thumbnailSlider);
thumbnailSlider.SetPdfViewCtrl(mPdfViewCtrl);

linkChange thumbnail slider buttons

You can change the image drawable of the left menu item and right menu item buttons by adding the app:leftMenuItemDrawable and app:rightMenuItemDrawable attributes in your 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"/>

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

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

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

thumbnailSlider.SetMenuItem(Resource.Drawable.left_icon, ThumbnailSlider.PositionLeft);

linkThumbnail slider listeners

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

thumbnailSlider.MenuItemClicked += (sender, e) =>
{
    if (e.MenuItemPosition == ThumbnailSlider.PositionLeft)
    {
        // The left button was clicked.
    }
    else
    {
        // The right button was clicked.
    }
}

linkSeekbar listener

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

thumbnailSlider.ThumbSliderStartTrackingTouch += (sender, e) =>
{
    // Called when tracking on the seekbar has started
}
thumbnailSlider.ThumbSliderStopTrackingTouch += (sender, e) =>
{
    // Called when tracking on the seekbar has stopped
}

linkAppearance style

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

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

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

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

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

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

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

linkXML attributes

AttributeDescriptionFormat
app:pdfviewctrlIdSpecifies the PDFViewCtrl view idReference
app:leftMenuItemContentDescriptionSpecifies the content description of left menu itemString
app:rightMenuItemContentDescriptionSpecifies the content description of right menu itemString
app:leftMenuItemDrawableSpecifies left menu item drawable resource.Reference
app:rightMenuItemDrawableSpecifies right menu item drawable resource.Reference
app:seekbarColorSpecifies seekbar progress bar and thumb color.

Default value: ?attr/colorPrimary in day mode and @android:color/white in night mode
Color
app:leftMenuItemColorSpecifies left menu item color.

Default value: ?attr/colorPrimary in day mode and @android:color/white in night mode
Color
app:rightMenuItemColorSpecifies right menu item color.

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

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

PDFTron Receives USD$71 Million Growth Investment Led By Silversmith Capital Partners

Learn more
close