Section:

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.

Apryse Docs Image

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

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

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

1DocumentSlider documentSlider = findViewById(R.id.documentSlider);
2documentSlider.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:

1documentSlider.setOnDocumentSliderTrackingListener(new DocumentSlider.OnDocumentSliderTrackingListener() {
2    @Override
3    public void onDocumentSliderStartTrackingTouch() {
4        // Called when tracking on the seekbar has started
5    }
6
7    @Override
8    public void onDocumentSliderStopTrackingTouch(int pageNum) {
9        // Called when tracking on the seekbar has stopped
10    }
11});

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

1<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>
2
3<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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales