Thumbnail slider

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

Android

Adding PDF page slider in Xamarin.Android

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.

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:

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

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

Thumbnail slider listeners

Buttons listener

You can add a menu item clicked event listener by calling MenuItemClicked 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.
    }
}

Seekbar listener

You can set a thumbnail slider seekbar event listener by calling ThumbSliderStartTrackingTouch and ThumbSliderStopTrackingTouch:

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

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:

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

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 Resource.Style.ThumbnailSliderStyle.Seekbar by declaring the following in Resources/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>

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

iOS

Adding PDF page slider in Xamarin.iOS

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

The PTThumbnailSliderViewController class allows the user to quickly navigate through a document. When using the slider control, a small page preview pop will be shown on top of the thumbnail slider.

Note: If you are using the new UI, we recommend the PTDocumentSliderViewController class, which displays a scroll indicator for the current scroll position and allows the user to quickly skip through pages.

The thumbnail slider control is part of the Tools library, so make sure you have added the Tools library to your project.

Show a thumbnail slider

To create and set up a thumbnail slider, supply a PTPDFViewCtrl instance to the PTThumbnailSliderViewController designated initializer:

var thumbnailSlider = new pdftron.PDF.Controls.PTThumbnailSliderViewController(mPdfViewCtrl);

AddChildViewController(thumbnailSlider);
View.AddSubview(thumbnailSlider.View);

thumbnailSlider.View.TranslatesAutoresizingMaskIntoConstraints = false;

NSLayoutConstraint.ActivateConstraints(new NSLayoutConstraint[] {
    thumbnailSlider.View.LeadingAnchor.ConstraintEqualTo(this.View.LeadingAnchor),
    thumbnailSlider.View.WidthAnchor.ConstraintEqualTo(this.View.WidthAnchor),
    thumbnailSlider.View.BottomAnchor.ConstraintEqualTo(this.View.BottomAnchor)
});
thumbnailSlider.DidMoveToParentViewController(this);

Populate with thumbnail images

The thumbnail images shown in the thumbnail slider view controller are generated by the GetThumbAsync: method of the PTPDFViewCtrl class. When ready, the thumbnail images are provided to the pdfviewCtrl's delegate via the pdfViewCtrl:gotThumbAsync:thumbImage: method.

In your class adopting the PTPDFViewCtrlDelegate protocol (usually the same view controller containing the thumbnail slider view controller), add the following:

mPdfViewCtrl.GotThumbAsync += (sender, e) =>
{
    if (e.Image == null)
    {
        return;
    }
    this.thumbnailSlider?.SetThumbnail(e.Image, e.Page_num);
};

Customization

The PTThumbnailSliderViewController provides a flexible API for displaying buttons on either side of the slider control. This is possible with the following properties:

LeadingToolbarItem - a single UIBarButtonItem to the left of the slider.LeadingToolbarItems - an array of UIBarButtonItems to the left of the slider.TrailingToolbarItem - a single UIBarButtonItem to the right of the slider.TrailingToolbarItems - an array of UIBarButtonItems to the right of the slider.

It is also possible to remove these buttons by setting the appropriate property to nil.

For example, to show a button to present a PTThumbnailsViewController on the left of the slider, and a button to present a PTNavigationListsViewController on the right:

// add a custom UIBarButtonItem to the left of the thumbnail slider
thumbnailSlider.LeadingToolbarItem = new UIBarButtonItem(UIImage.FromFile("icon.png"), UIBarButtonItemStyle.Plain, (sender, e) => {
	// perform custom action
});

// add an array of UIBarButtonItems to the right of the slider
var button1 = new UIBarButtonItem(UIImage.FromFile("icon1.png"), UIBarButtonItemStyle.Plain, (sender, e) => {
    // perform custom action
});
var button2 = new UIBarButtonItem(UIImage.FromFile("icon2.png"), UIBarButtonItemStyle.Plain, (sender, e) => {
    // perform custom action
});
documentViewController.ThumbnailSliderController.TrailingToolbarItems = new UIBarButtonItem[] {button1, button2};

// remove the buttons from the left of the slider by setting the property to null
documentViewController.ThumbnailSliderController.LeadingToolbarItems = null;

The thumbnail slider delegate

The PTThumbnailSliderViewDelegate protocol allows the adopting class (usually the containing view controller, as in this guide) to be notified when the user is actively using the thumbnail slider. The thumbnail slider already handles changing the current page in response to user actions, but the delegate methods can be used to hide or show other content as appropriate.