Some test text!

Loading...
Guides
Document slider

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.

thumbnail-slider

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:

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

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

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

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

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:

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

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

AttributeDescriptionFormat
app:pdfviewctrlIdSpecifies the PDFViewCtrl view idReference
app:colorBackgroundSpecifies background color. Uses default system background color if not defined.Color
app:seekbarColorSpecifies seekbar progress bar and thumb color.

Default value: ?attr/colorPrimary in day mode and @android:color/white in night mode.
Color

Get the answers you need: Support