Annotation toolbar customization in Android

AnnotationToolbarComponent is a class that contains the logic and views that make up the annotation toolbar. The annotation toolbar can be customized to contain a number of annotation creation tools button as well as any custom button. With the annotation toolbar, users are able to conveniently create annotations and switch between different tools.

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.

To learn more about each icon, see the icon cheat sheet .

Create a custom annotation toolbar

The annotation toolbar allows users to easily switch tools when adding annotations to a document. To add an annotation toolbar to your app, first define some layout groups in your app that will contain the annotation toolbar:

XML

<FrameLayout android:id="@+id/annotation_toolbar_container" android:layout_width="match_parent" android:layout_height="wrap_content"/>

Then in your activity, setup your AnnotationToolbarComponent with ToolManager and attach the required ViewModel classes:

Java

private AnnotationToolbarComponent mAnnotationToolbarComponent;
...
public void setupAnnotationToolbar(ToolManager toolManager) {
    // First find our container view group
    FrameLayout mToolbarContainer = findViewById(R.id.annotation_toolbar_container);
    
	// Then setup ToolManager and related ViewModels with AnnotationToolbarComponent 
    // Remember to initialize your ToolManager before calling below
    ViewModelProvider vmProvider = ViewModelProviders.of(this);
    ToolManagerViewModel toolManagerVm = vmProvider.get(ToolManagerViewModel.class);
    toolManagerVm.setToolManager(toolManager);
    PresetBarViewModel presetVm = vmProvider.get(PresetBarViewModel.class);
    AnnotationToolbarViewModel annotToolbarVm = vmProvider.get(AnnotationToolbarViewModel.class);

    // Create our UI component for the annotation toolbar
    mAnnotationToolbarComponent = new AnnotationToolbarComponent(
        this,
        annotToolbarVm,
        presetVm,
        toolManagerVm,
        mToolbarContainer
    );
}

Kotlin

lateinit var mAnnotationToolbarComponent: AnnotationToolbarComponent
...

fun setupAnnotationToolbar(toolManager: ToolManager?) {
    // First find our container view group
    val mToolbarContainer: FrameLayout = findViewById(R.id.annotation_toolbar_container)

    // Then setup ToolManager and related ViewModels with AnnotationToolbarComponent
    // Remember to initialize your ToolManager before calling below
    val vmProvider: ViewModelProvider = ViewModelProviders.of(this)
    val toolManagerVm: ToolManagerViewModel = vmProvider.get(ToolManagerViewModel::class.java)
    toolManagerVm.toolManager = toolManager
    val presetVm: PresetBarViewModel = vmProvider.get(PresetBarViewModel::class.java)
    val annotToolbarVm: AnnotationToolbarViewModel = vmProvider.get(AnnotationToolbarViewModel::class.java)

    // Create our UI component for the annotation toolbar
    mAnnotationToolbarComponent = AnnotationToolbarComponent(
            this,
            annotToolbarVm,
            presetVm,
            toolManagerVm,
            mToolbarContainer
    )
}

Finally, you can customize the annotation toolbar by either using one of our default toolbars or creating a custom toolbar from scratch.

Java

// Use a default toolbar
mAnnotationToolbarComponent.inflateWithBuilder(
        DefaultToolbars.defaultAnnotateToolbar
);

// Or create a custom toolbar from scratch
mAnnotationToolbarComponent.inflateWithBuilder(
        AnnotationToolbarBuilder.withTag("Custom Toolbar")
                // Add some pre-defined tools that will be handled internally using ToolManager
                .addToolButton(ToolbarButtonType.SQUARE, 100)
                .addToolButton(ToolbarButtonType.INK, 102)
                .addToolButton(ToolbarButtonType.FREE_HIGHLIGHT, 103)
                .addToolButton(ToolbarButtonType.ERASER, 104)
                // We can also add a custom button to handle ourselves, for example here
                // we have added a "favorites" button that contains a star icon
                .addCustomButton(R.string.favorites, R.drawable.annotation_note_icon_star_fill, 105)
                .addToolStickyButton(ToolbarButtonType.UNDO, 106)
                .addToolStickyButton(ToolbarButtonType.REDO, 107)
);

Kotlin

mAnnotationToolbarComponent.inflateWithBuilder(
        DefaultToolbars.defaultAnnotateToolbar
);

// Or create a custom toolbar from scratch
mAnnotationToolbarComponent.inflateWithBuilder(
        AnnotationToolbarBuilder.withTag("Custom Toolbar")
                // Add some pre-defined tools that will be handled internally using ToolManager
                .addToolButton(ToolbarButtonType.SQUARE, 100)
                .addToolButton(ToolbarButtonType.INK, 102)
                .addToolButton(ToolbarButtonType.FREE_HIGHLIGHT, 103)
                .addToolButton(ToolbarButtonType.ERASER, 104)
                // We can also add a custom button to handle ourselves, for example here
                // we have added a "favorites" button that contains a star icon
                .addCustomButton(R.string.favorites, R.drawable.annotation_note_icon_star_fill, 105)
                .addToolStickyButton(ToolbarButtonType.UNDO, 106)
                .addToolStickyButton(ToolbarButtonType.REDO, 107)
);

Show and hide annotation toolbar

You can show and hide the toolbar by calling AnnotationToolbarComponent.show(boolean) and AnnotationToolbarComponent.hide(boolean).

Hide annotation toolbar items

If you have used ToolManager to hide certain tools, then the associated tool buttons will also be hidden in the annotation toolbar.

Hide tool buttons

If there are tools that you would like to remove from the annotation toolbar, you can disable them by calling ToolManager.disableToolMode(ToolMode[]). This will also hide the tool in the quick menu. For example:

Java

// Disable TextHighlightCreate tool, TextUnderlineCreate tool,
// TextSquigglyCreate tool and TextStrikeoutCreate tool
mToolManager.disableToolMode(new ToolMode[]{
    ToolManager.ToolMode.TEXT_HIGHLIGHT,
    ToolManager.ToolMode.TEXT_UNDERLINE,
    ToolManager.ToolMode.TEXT_SQUIGGLY,
    ToolManager.ToolMode.TEXT_STRIKEOUT}
);

Kotlin

// Disable TextHighlightCreate tool, TextUnderlineCreate tool,
// TextSquigglyCreate tool and TextStrikeoutCreate tool
mToolManager!!.disableToolMode(arrayOf(
    ToolManager.ToolMode.TEXT_HIGHLIGHT,
    ToolManager.ToolMode.TEXT_UNDERLINE,
    ToolManager.ToolMode.TEXT_SQUIGGLY,
    ToolManager.ToolMode.TEXT_STRIKEOUT)
)

For reference, a mapping of ToolMode to button icons is shown below:

Icon	ToolMode
	RECT_CREATE
	OVAL_CREATE
	POLYLINE_CREATE
	POLYGON_CREATE
	CLOUD_CREATE
	LINE_CREATE
	ARROW_CREATE
	RULER_CREATE
	TEXT_CREATE
	CALLOUT_CREATE
	TEXT_ANNOT_CREATE
	INK_CREATE
	INK_ERASER
	SIGNATURE
	STAMPER
	RUBBER_STAMPER
	FREE_HIGHLIGHTER
	TEXT_HIGHLIGHT
	TEXT_UNDERLINE
	TEXT_SQUIGGLY
	TEXT_STRIKEOUT
	ANNOT_EDIT_RECT_GROUP

Annotation toolbar listener

You can set an AnnotationButtonClickListener to be notified of annotation toolbar button click events.

Java

mAnnotationToolbarComponent.addButtonClickListener(new AnnotationToolbarComponent.AnnotationButtonClickListener() {
    @Override
    public boolean onInterceptItemClick(MenuItem menuItem) {
        // We can intercept button click events by implementing this method.
        // Here we can handle our custom "favorites" button by referring to the button's id
        // that was defined above.
        if (menuItem.getItemId() == 105) {
            Toast.makeText(MainActivity.this, "Favorites Pressed", Toast.LENGTH_SHORT).show();
            return true;
        }
        return false;
    }
    @Override
    public void onPreItemClick(MenuItem menuItem) {
    }
    @Override
    public void onPostItemClick(MenuItem menuItem) {
    }
});

Edit annotations continuously

For continuous annotation creation, AnnotationToolbarComponent will use value set by PdfViewCtrlSettingsManager.setContinuousAnnotationEdit(Context, boolean) (by default true). If continuous annotation editing is disabled, then the tool button will be de-selected in the annotation toolbar after creating an annotation.

Appearance styles

In order to customize the appearance of UI elements in your annotation toolbar, you can define a new style that extends PTAnnotationToolbarTheme inside your res\values\style.xml file and pass it as an attribute to your viewer's theme named pt_annotation_toolbar_style. For more information on customizing the style of UI components, please take a look at our viewer theme guide .