Section:

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 this ui migration guide.

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.

1// Add a viewer fragment to the layout container in the specified 
2// activity, and returns the added fragment
3public PdfViewCtrlTabHostFragment2 addViewerFragment(@IdRes int fragmentContainer,
4        @NonNull AppCompatActivity activity, @NonNull Uri fileUri, @Nullable String password) {
5
6    // Create the viewer fragment
7    PdfViewCtrlTabHostFragment2 fragment = ViewerBuilder2.withUri(fileUri, password).build(activity);
8
9    // Add the fragment to the layout fragment container
10    activity.getSupportFragmentManager().beginTransaction()
11            .replace(fragmentContainer, fragment)
12            .commit();
13
14    return fragment;
15}

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:

1/**
2* Open a document given a Content Uri
3*
4* @param context the context to start the document reader
5* @param contentUri a content URI that references a document
6*/
7private void openContentUriDocument(Context context, Uri contentUri) {
8    Intent intent = DocumentActivity.IntentBuilder.fromActivityClass(this, DocumentActivity.class)
9            .withUri(contentUri)
10            .usingNewUi(true)
11            .build();
12    startActivity(intent);
13}

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:

1// Supply a unique tag for the toolbar that will be referenced internally
2AnnotationToolbarBuilder builder = AnnotationToolbarBuilder.withTag("my_unique_annotate_toolbar_tag")
3        // Set a display name for this toolbar
4        .setToolbarName("Text Annotate")
5        // Adds three tool buttons (text highlight, freehand highlight, and text underline) to the scrollable region (left)
6        .addToolButton(ToolbarButtonType.TEXT_HIGHLIGHT, DefaultToolbars.ButtonId.TEXT_HIGHLIGHT.value())
7        .addToolButton(ToolbarButtonType.FREE_HIGHLIGHT, DefaultToolbars.ButtonId.FREE_HIGHLIGHT.value())
8        .addToolButton(ToolbarButtonType.TEXT_UNDERLINE, DefaultToolbars.ButtonId.TEXT_UNDERLINE.value())
9        // Adds two tool buttons (undo and redo) to the sticky region
10        .addToolStickyButton(ToolbarButtonType.UNDO, DefaultToolbars.ButtonId.UNDO.value())
11        .addToolStickyButton(ToolbarButtonType.REDO, DefaultToolbars.ButtonId.REDO.value());
12
13// Then supply the builder to ViewerConfig, which will be passed on to your viewer
14ViewerConfig config = new ViewerConfig.Builder()
15        // Add out custom annotation toolbar
16        .addToolbarBuilder(builder)
17        // Other ViewerConfig settings...
18        .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:

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

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

1PdfViewCtrlTabHostFragment2 mPdfViewCtrlTabHostFragment = ...
2mPdfViewCtrlTabHostFragment.addHostListener(new PdfViewCtrlTabHostFragment2.TabHostListener() {
3
4@Override
5public boolean onToolbarOptionsItemSelected(MenuItem item) {
6        // The button id defined previously in the AnnotationToolbarBuilder
7        final int id = item.getItemId();
8
9        // Listen for annotation toolbar button events
10        // ... 
11        return false;
12}

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales