Product:

Get started

Samples

Basic operations

Learn More

Viewer

UI customization

Annotation

Collaboration

MS Office

Conversion

PDF/A

Forms

Generate

Page manipulation

Edit page content

Extraction

Digital signature

Bookmarks

Compare files

Optimization

Layers (OCGs)

Measurement

Redaction

Security

Portfolios

Low-level PDF API

Changelogs

Annotation Toolbar

You can customize the annotation toolbars for the document viewers.

This tutorial only applies to Xamarin.Android. See Xamarin.iOS equivalent here .

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 .

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

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

1AnnotationToolbarComponent annotationToolbarComponent;
2// ...
3private void SetupAnnotationToolbar(ToolManager toolManager)
4{
5    // First find our container view group
6    var mToolbarContainer = FindViewById(Resource.Id.annotation_toolbar_container);
7
8    // Then setup ToolManager and related ViewModels with AnnotationToolbarComponent
9    // Remember to initialize your ToolManager before calling below
10    var vmProvider = ViewModelProviders.Of(this);
11    var toolManagerVm = (ToolManagerViewModel)vmProvider.Get(Java.Lang.Class.FromType(typeof(ToolManagerViewModel)));
12    toolManagerVm.ToolManager = toolManager;
13    var presetVm = (PresetBarViewModel)vmProvider.Get(Java.Lang.Class.FromType(typeof(PresetBarViewModel)));
14    var annotToolbarVm = (AnnotationToolbarViewModel)vmProvider.Get(Java.Lang.Class.FromType(typeof(AnnotationToolbarViewModel)));
15
16    // Create our UI component for the annotation toolbar
17    annotationToolbarComponent = new AnnotationToolbarComponent(this, annotToolbarVm, presetVm, toolManagerVm, mToolbarContainer);
18}

1private AnnotationToolbarComponent mAnnotationToolbarComponent;
2...
3public void setupAnnotationToolbar(ToolManager toolManager) {
4    // First find our container view group
5    FrameLayout mToolbarContainer = findViewById(R.id.annotation_toolbar_container);
6    
7	// Then setup ToolManager and related ViewModels with AnnotationToolbarComponent 
8    // Remember to initialize your ToolManager before calling below
9    ViewModelProvider vmProvider = ViewModelProviders.of(this);
10    ToolManagerViewModel toolManagerVm = vmProvider.get(ToolManagerViewModel.class);
11    toolManagerVm.setToolManager(toolManager);
12    PresetBarViewModel presetVm = vmProvider.get(PresetBarViewModel.class);
13    AnnotationToolbarViewModel annotToolbarVm = vmProvider.get(AnnotationToolbarViewModel.class);
14    // Create our UI component for the annotation toolbar
15    mAnnotationToolbarComponent = new AnnotaetionToolbarComponent(
16        this,
17        annotToolbarVm,
18        presetVm,
19        toolManagerVm,
20        mToolbarContainer
21    );
22}

1lateinit var mAnnotationToolbarComponent: AnnotationToolbarComponent
2...
3fun setupAnnotationToolbar(toolManager: ToolManager?) {
4    // First find our container view group
5    val mToolbarContainer: FrameLayout = findViewById(R.id.annotation_toolbar_container)
6    // Then setup ToolManager and related ViewModels with AnnotationToolbarComponent
7    // Remember to initialize your ToolManager before calling below
8    val vmProvider: ViewModelProvider = ViewModelProviders.of(this)
9    val toolManagerVm: ToolManagerViewModel = vmProvider.get(ToolManagerViewModel::class.java)
10    toolManagerVm.toolManager = toolManager
11    val presetVm: PresetBarViewModel = vmProvider.get(PresetBarViewModel::class.java)
12    val annotToolbarVm: AnnotationToolbarViewModel = vmProvider.get(AnnotationToolbarViewModel::class.java)
13    // Create our UI component for the annotation toolbar
14    mAnnotationToolbarComponent = AnnotationToolbarComponent(
15            this,
16            annotToolbarVm,
17            presetVm,
18            toolManagerVm,
19            mToolbarContainer
20    )
21}

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

1// Use a default toolbar
2annotationToolbarComponent.InflateWithBuilder(DefaultToolbars.DefaultAnnotateToolbar);
3
4// Or create a custom toolbar from scratch
5annotationToolbarComponent.InflateWithBuilder(
6    AnnotationToolbarBuilder.WithTag("Custom Toolbar")
7    // Add some pre-defined tools that will be handled internally using ToolManager
8    .AddToolButton(ToolbarButtonType.Square, 100)
9    .AddToolButton(ToolbarButtonType.Ink, 102)
10    .AddToolButton(ToolbarButtonType.FreeHighlight, 103)
11    .AddToolButton(ToolbarButtonType.Eraser, 104)
12    // We can also add a custom button to handle ourselves, for example here
13    // we have added a "favorites" button that contains a star icon
14    .AddCustomButton(Resource.String.favorites, Resource.Drawable.annotation_note_icon_star_fill, 105)
15    .AddToolStickyButton(ToolbarButtonType.Undo, 106)
16    .AddToolStickyButton(ToolbarButtonType.Redo, 107)
17    );

1// Use a default toolbar
2mAnnotationToolbarComponent.inflateWithBuilder(
3        DefaultToolbars.defaultAnnotateToolbar
4);
5// Or create a custom toolbar from scratch
6mAnnotationToolbarComponent.inflateWithBuilder(
7        AnnotationToolbarBuilder.withTag("Custom Toolbar")
8                // Add some pre-defined tools that will be handled internally using ToolManager
9                .addToolButton(ToolbarButtonType.SQUARE, 100)
10                .addToolButton(ToolbarButtonType.INK, 102)
11                .addToolButton(ToolbarButtonType.FREE_HIGHLIGHT, 103)
12                .addToolButton(ToolbarButtonType.ERASER, 104)
13                // We can also add a custom button to handle ourselves, for example here
14                // we have added a "favorites" button that contains a star icon
15                .addCustomButton(R.string.favorites, R.drawable.annotation_note_icon_star_fill, 105)
16                .addToolStickyButton(ToolbarButtonType.UNDO, 106)
17                .addToolStickyButton(ToolbarButtonType.REDO, 107)
18);

1mAnnotationToolbarComponent.inflateWithBuilder(
2        DefaultToolbars.defaultAnnotateToolbar
3);
4// Or create a custom toolbar from scratch
5mAnnotationToolbarComponent.inflateWithBuilder(
6        AnnotationToolbarBuilder.withTag("Custom Toolbar")
7                // Add some pre-defined tools that will be handled internally using ToolManager
8                .addToolButton(ToolbarButtonType.SQUARE, 100)
9                .addToolButton(ToolbarButtonType.INK, 102)
10                .addToolButton(ToolbarButtonType.FREE_HIGHLIGHT, 103)
11                .addToolButton(ToolbarButtonType.ERASER, 104)
12                // We can also add a custom button to handle ourselves, for example here
13                // we have added a "favorites" button that contains a star icon
14                .addCustomButton(R.string.favorites, R.drawable.annotation_note_icon_star_fill, 105)
15                .addToolStickyButton(ToolbarButtonType.UNDO, 106)
16                .addToolStickyButton(ToolbarButtonType.REDO, 107)
17);

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

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:

1// Disable TextHighlightCreate tool, TextUnderlineCreate tool,
2// TextSquigglyCreate tool and TextStrikeoutCreate tool
3mToolManager.DisableToolMode(new ToolManager.ToolMode[] {
4    ToolManager.ToolMode.TextHighlight,
5    ToolManager.ToolMode.TextUnderline,
6    ToolManager.ToolMode.TextSquiggly,
7    ToolManager.ToolMode.TextStrikeout
8});

1// Disable TextHighlightCreate tool, TextUnderlineCreate tool,
2// TextSquigglyCreate tool and TextStrikeoutCreate tool
3mToolManager.disableToolMode(new ToolMode[]{
4    ToolManager.ToolMode.TEXT_HIGHLIGHT,
5    ToolManager.ToolMode.TEXT_UNDERLINE,
6    ToolManager.ToolMode.TEXT_SQUIGGLY,
7    ToolManager.ToolMode.TEXT_STRIKEOUT}
8);

1// Disable TextHighlightCreate tool, TextUnderlineCreate tool,
2// TextSquigglyCreate tool and TextStrikeoutCreate tool
3mToolManager!!.disableToolMode(arrayOf(
4    ToolManager.ToolMode.TEXT_HIGHLIGHT,
5    ToolManager.ToolMode.TEXT_UNDERLINE,
6    ToolManager.ToolMode.TEXT_SQUIGGLY,
7    ToolManager.ToolMode.TEXT_STRIKEOUT)
8)

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`

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

Java

1mAnnotationToolbarComponent.addButtonClickListener(new AnnotationToolbarComponent.AnnotationButtonClickListener() {
2    @Override
3    public boolean onInterceptItemClick(MenuItem menuItem) {
4        // We can intercept button click events by implementing this method.
5        // Here we can handle our custom "favorites" button by referring to the button's id
6        // that was defined above.
7        if (menuItem.getItemId() == 105) {
8            Toast.makeText(MainActivity.this, "Favorites Pressed", Toast.LENGTH_SHORT).show();
9            return true;
10        }
11        return false;
12    }
13    @Override
14    public void onPreItemClick(MenuItem menuItem) {
15    }
16    @Override
17    public void onPostItemClick(MenuItem menuItem) {
18    }
19});

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 .

This tutorial only applies to Xamarin.iOS. See Xamarin.Android equivalent here .

The PTAnnotationToolbar class is a UIToolbar consisting of various annotation creation tools. With the annotation toolbar, users are able to conveniently create and switch between different tools.

The annotation toolbar control is part of the Tools library, so make sure you have added it to your project.

Due to space limitations, only a limited number of tools will show up in portrait mode on smaller devices. See the customization section of this guide for more details on how to customize this.

Scenario	Annotation Toolbar
Small devices in landscape mode + Tablet devices
Small devices in portrait mode

To create and set up an annotation toolbar, initialize an AnnotationToolbar instance and add it to your view hierarchy:

1var annotationToolbar = new pdftron.PDF.Controls.PTAnnotationToolbar(mToolManager);
2annotationToolbar.AnnotationToolbarDidCancel += (sender, e) =>
3{
4    annotationToolbar.Hidden = true;
5};
6View.AddSubview(annotationToolbar);
7
8// position annotation toolbar
9annotationToolbar.TranslatesAutoresizingMaskIntoConstraints = false;
10NSLayoutConstraint.ActivateConstraints(new NSLayoutConstraint[] {
11    annotationToolbar.LeadingAnchor.ConstraintEqualTo(this.View.LeadingAnchor),
12    annotationToolbar.WidthAnchor.ConstraintEqualTo(this.View.WidthAnchor),
13    annotationToolbar.TopAnchor.ConstraintEqualTo(this.View.LayoutMarginsGuide.TopAnchor)
14});
15
16// hide annotation toolbar by default
17annotationToolbar.Hidden = true;

1let annotationToolbar = PTAnnotationToolbar(toolManager: toolManager)
2// Set the current view controller as the annotation toolbar's delegate.
3annotationToolbar.delegate = self;
4self.view.addSubview(annotationToolbar)
5// Position annotation toolbar in superview.
6annotationToolbar.translatesAutoresizingMaskIntoConstraints = false
7NSLayoutConstraint.activateConstraints([
8    annotationToolbar.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
9    annotationToolbar.widthAnchor.constraint(equalTo: self.view.widthAnchor),
10    annotationToolbar.topAnchor.constraint(equalTo: self.view.layoutMarginsGuide.topAnchor)
11])
12// Hide annotation toolbar by default.
13annotationToolbar.isHidden = true

1AnnotationToolbar *annotationToolbar = [[PTAnnotationToolbar alloc] initWithToolManager:toolManager];
2// Set the current view controller as the annotation toolbar's delegate.
3annotationToolbar.delegate = self;
4[self.view addSubview:annotationToolbar];
5// Position annotation toolbar in superview.
6annotationToolbar.translatesAutoresizingMaskIntoConstraints = NO;
7[NSLayoutConstraint activateConstraints:@[
8   [annotationToolbar.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
9   [annotationToolbar.widthAnchor constraintEqualToAnchor:self.view.widthAnchor],
10   [annotationToolbar.topAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.topAnchor],
11 ]];
12// Hide annotation toolbar by default.
13annotationToolbar.hidden = YES;

To show:

C#

1// Show the annotation toolbar.
2annotationToolbar.Hidden = false;

Customization

The PTAnnotationToolbar class provides an API for specifying which tools are displayed in the toolbar when there is insufficient space to show them all. This is controlled by the PrecedenceArray property.

The PTAnnotationToolbarDelegate protocol allows the adopting class (usually the containing view controller, as in this guide) to be notified of annotation toolbar events and control the behavior of the toolbar.

C#

1annotationToolbar.AnnotationToolbarDidCancel += (sender, e) =>
2{
3    annotationToolbar.Hidden = true;
4}

Edit annotations continuously

By default, the annotation toolbar returns to the pan tool after an annotation is created. If you prefer to stay in the same tool mode after an annotation is created, you should implement the toolShouldGoBackToPan method in your AnnotationToolbarDelegate adopting class:

C#

1mAnnotationToolbar.ToolShouldGoBackToPan = (annotationToolbar) =>
2{
3    return false;
4};

The annotation toolbar's behavior could also be handled within user settings by checking and returning the appropriate settings value in the method above.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales

Product:

Product:

Annotation Toolbar

Customize annotation toolbar for Xamarin.Android viewer

This tutorial only applies to Xamarin.Android. See Xamarin.iOS equivalent here .

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

Create a custom annotation toolbar

XML

Show and hide annotation toolbar

Hide annotation toolbar items

Hide tool buttons