Customizing document viewer slider in Android

DocumentSlider is a RelativeLayout that contains an AppCompatSeekBar to change pages, and a PageIndicatorLayout on the top or side of the slider to show current page number when sliding.

Show document slider

To set up your layout with the document slider, add a <DocumentSlider> element to your XML layout. For example, your layout may look like this:

XML

<com.pdftron.pdf.widget.seekbar.DocumentSlider android:id="@+id/documentSlider" android:layout_width="0dp" android:layout_height="@dimen/document_seek_bar_height" android:layout_marginBottom="@dimen/page_jump_button_margin" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="1.0" />

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

XML

<com.pdftron.pdf.widget.seekbar.DocumentSlider android:id="@+id/documentSlider" android:layout_width="0dp" android:layout_height="@dimen/document_seek_bar_height" android:layout_marginBottom="@dimen/page_jump_button_margin" app:pdfviewctrlId="@id/pdfviewctrl" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="1.0" />

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

Java

DocumentSlider documentSlider = findViewById(R.id.documentSlider);
documentSlider.setPdfViewCtrl(mPdfViewCtrl);

Kotlin

val documentSlider = findViewById(R.id.documentSlider)
documentSlider.setPdfViewCtrl(mPdfViewCtrl)

Document slider listeners

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

Java

documentSlider.setOnDocumentSliderTrackingListener(new DocumentSlider.OnDocumentSliderTrackingListener() {
    @Override
    public void onDocumentSliderStartTrackingTouch() {
        // Called when tracking on the seekbar has started
    }

    @Override
    public void onDocumentSliderStopTrackingTouch(int pageNum) {
        // Called when tracking on the seekbar has stopped
    }
});

Kotlin

documentSlider!!.setOnDocumentSliderTrackingListener(object : DocumentSlider.OnDocumentSliderTrackingListener {
    override fun onDocumentSliderStartTrackingTouch() {
        // Called when tracking on the seekbar has started
    }

    override fun onDocumentSliderStopTrackingTouch(pageNum: Int) {
        // 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 pt_document_slider_style attribute in your apps's theme. The custom style must extend DocumentSliderStyle. For example:

Java

<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="pt_document_slider_style">@style/CustomDocumentSliderStyle</item> </style>

<style name="CustomDocumentSliderStyle" parent="DocumentSliderStyle"> <!-- 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> </style>

XML attributes

Attribute	Description	Format
app:pdfviewctrlId	Specifies the PDFViewCtrl view id	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