Some test text!

platform
search

Page slider

Contents

Show thumbnail slider
Change thumbnail slider buttons
Thumbnail slider listeners
Buttons listener
Seekbar listener
Appearance styling
Thumbnail slider buttons styles
Thumbnail slider seekbar styles
XML attributes

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.

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

ThumbnailSlider thumbnailSlider = findViewById(R.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"/>

Alternatively, you can also change them 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(R.drawable.left_icon, ThumbnailSlider.POSITION_LEFT);

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

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

linkAppearance styling

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

linkThumbnail slider seekbar styles

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

<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 change seekbar styles such as padding and height, you can override the default seekbar style: R.style.ThumbnailSliderStyle.Seekbar.

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

In addition, you can also provide your own 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.

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

Contents

Show thumbnail slider
Change thumbnail slider buttons
Thumbnail slider listeners
Buttons listener
Seekbar listener
Appearance styling
Thumbnail slider buttons styles
Thumbnail slider seekbar styles
XML attributes