Some test text!

Search
Hamburger Icon

Android / Guides

Integrate the new Viewer UI

If you are newly adding the document viewer into your app, you can follow this guide to add the viewer with the new UI. If you are looking to migrate from the your viewer in your app to use the new UI, you can follow thi guide here.

For reference, you can checkout the new-ui branch in our Android Samples GitHub repository for some integration sample projects.

Integrate via Fragment

To use the new drop-in viewer fragment, create a PdfViewCtrlTabHostFragment2 using the new ViewerBuilder2 class.

// Add a viewer fragment to the layout container in the specified 
// activity, and returns the added fragment
public PdfViewCtrlTabHostFragment2 addViewerFragment(@IdRes int fragmentContainer,
        @NonNull AppCompatActivity activity, @NonNull Uri fileUri, @Nullable String password) {

    // Create the viewer fragment
    PdfViewCtrlTabHostFragment2 fragment = ViewerBuilder2.withUri(fileUri, password).build(activity);

    // Add the fragment to the layout fragment container
    activity.getSupportFragmentManager().beginTransaction()
            .replace(fragmentContainer, fragment)
            .commit();

    return fragment;
}

Integrate via Activity

A new builder class DocumentActivity.IntentBuilder has been added to help you more easily customize the activity document viewer. You can also use this new builder to specify the viewer to use the new UI as follows:

/**
* Open a document given a Content Uri
*
* @param context the context to start the document reader
* @param contentUri a content URI that references a document
*/
private void openContentUriDocument(Context context, Uri contentUri) {
    Intent intent = DocumentActivity.IntentBuilder.fromActivityClass(this, DocumentActivity.class)
            .withUri(contentUri)
            .usingNewUi(true)
            .build();
    startActivity(intent);
}

Building a custom annotation toolbar

Buttons in the annotation toolbar can be customized using the AnnotationToolbarBuilder API. The buttons on the annotation toolbar are contained in two groups: the scrollable region (left) and the sticky region (right). The scrollable region can contain any number of buttons and scrolling is used to access buttons that are off-screen. Buttons in the sticky region will always show on the screen and will not be scrollable.

For example, built-in PDF tool buttons can be added to a viewer as follows:

// Supply a unique tag for the toolbar that will be referenced internally
AnnotationToolbarBuilder builder = AnnotationToolbarBuilder.withTag("my_unique_annotate_toolbar_tag")
        // Set a display name for this toolbar
        .setToolbarName("Text Annotate")
        // Adds three tool buttons (text highlight, freehand highlight, and text underline) to the scrollable region (left)
        .addToolButton(ToolbarButtonType.TEXT_HIGHLIGHT, DefaultToolbars.ButtonId.TEXT_HIGHLIGHT.value())
        .addToolButton(ToolbarButtonType.FREE_HIGHLIGHT, DefaultToolbars.ButtonId.FREE_HIGHLIGHT.value())
        .addToolButton(ToolbarButtonType.TEXT_UNDERLINE, DefaultToolbars.ButtonId.TEXT_UNDERLINE.value())
        // Adds two tool buttons (undo and redo) to the sticky region
        .addToolStickyButton(ToolbarButtonType.UNDO, DefaultToolbars.ButtonId.UNDO.value())
        .addToolStickyButton(ToolbarButtonType.REDO, DefaultToolbars.ButtonId.REDO.value());

// Then supply the builder to ViewerConfig, which will be passed on to your viewer
ViewerConfig config = new ViewerConfig.Builder()
        // Add out custom annotation toolbar
        .addToolbarBuilder(builder)
        // Other ViewerConfig settings...
        .build();

Afterwards, you can supply this AnnotationToolbarBuilder to the viewer using the ViewerConfig class.

If you would like to add a button with custom functionality, you can add a generic button as so:

AnnotationToolbarBuilder.withTag("my_unique_annotate_toolbar_tag")
        // Here we add a button with custom title, icon, and an id of 1000. 
        // This id will be referenced when implementing callbacks
        .addCustomButton(R.string.custom_title, R.drawable.custom_icon, 1000);

Then you can listen for annotation toolbar button events by adding a PdfViewCtrlTabHostFragment2.TabHostListener:

PdfViewCtrlTabHostFragment2 mPdfViewCtrlTabHostFragment = ...
mPdfViewCtrlTabHostFragment.addHostListener(new PdfViewCtrlTabHostFragment2.TabHostListener() {

@Override
public boolean onToolbarOptionsItemSelected(MenuItem item) {
        // The button id defined previously in the AnnotationToolbarBuilder
        final int id = item.getItemId();

        // Listen for annotation toolbar button events
        // ... 
        return false;
}

Get the answers you need: Chat with us