Customizing thumbnail slider in Xamarin

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.

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

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

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

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
}

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>

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>

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.