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.

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

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

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