> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/xamarin/annotation/annotation-toolbar.md).
# Annotation Toolbar
Customize annotation toolbar for Xamarin.Android viewer to conveniently create and switch between annotation tools. Learn how to customize, show/hide toolbar items, and disable specific tools for a ta
You can customize the annotation toolbars for the document viewers.
{% tabs %}
{% tab title="Android" %}
## Customize annotation toolbar for Xamarin.Android viewer
{% hint style="info" %}
**This tutorial only applies to Xamarin.Android. See Xamarin.iOS equivalent here .**
{% endhint %}
[`AnnotationToolbarComponent`](https://sdk.apryse.com/api/xamarinandroid/tools/api/pdftron.PDF.Widget.Toolbar.Component.AnnotationToolbarComponent.html) 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.
{% hint style="info" %}
**To learn more about each icon, see the icon cheat sheet .**
{% endhint %}
## 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:
{% code lineNumbers="true" %}
```xml
```
{% endcode %}
Then in your activity, setup your `AnnotationToolbarComponent` with [`ToolManager`](https://sdk.apryse.com/api/xamarinandroid/tools/api/pdftron.PDF.Tools.ToolManager.html) and attach the required ViewModel classes:
{% tabs %}
{% tab title="C#" %}
{% code lineNumbers="true" %}
```csharp
AnnotationToolbarComponent annotationToolbarComponent;
// ...
private void SetupAnnotationToolbar(ToolManager toolManager)
{
// First find our container view group
var mToolbarContainer = FindViewById(Resource.Id.annotation_toolbar_container);
// Then setup ToolManager and related ViewModels with AnnotationToolbarComponent
// Remember to initialize your ToolManager before calling below
var vmProvider = ViewModelProviders.Of(this);
var toolManagerVm = (ToolManagerViewModel)vmProvider.Get(Java.Lang.Class.FromType(typeof(ToolManagerViewModel)));
toolManagerVm.ToolManager = toolManager;
var presetVm = (PresetBarViewModel)vmProvider.Get(Java.Lang.Class.FromType(typeof(PresetBarViewModel)));
var annotToolbarVm = (AnnotationToolbarViewModel)vmProvider.Get(Java.Lang.Class.FromType(typeof(AnnotationToolbarViewModel)));
// Create our UI component for the annotation toolbar
annotationToolbarComponent = new AnnotationToolbarComponent(this, annotToolbarVm, presetVm, toolManagerVm, mToolbarContainer);
}
```
{% endcode %}
{% endtab %}
{% tab title="Java" %}
{% code lineNumbers="true" %}
```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 AnnotaetionToolbarComponent(
this,
annotToolbarVm,
presetVm,
toolManagerVm,
mToolbarContainer
);
}
```
{% endcode %}
{% endtab %}
{% tab title="Kotlin" %}
{% code lineNumbers="true" %}
```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
)
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
Finally, you can customize the annotation toolbar by either using one of our default toolbars or creating a custom toolbar from scratch.
{% tabs %}
{% tab title="C#" %}
{% code lineNumbers="true" %}
```csharp
// Use a default toolbar
annotationToolbarComponent.InflateWithBuilder(DefaultToolbars.DefaultAnnotateToolbar);
// Or create a custom toolbar from scratch
annotationToolbarComponent.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.FreeHighlight, 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(Resource.String.favorites, Resource.Drawable.annotation_note_icon_star_fill, 105)
.AddToolStickyButton(ToolbarButtonType.Undo, 106)
.AddToolStickyButton(ToolbarButtonType.Redo, 107)
);
```
{% endcode %}
{% endtab %}
{% tab title="Java" %}
{% code lineNumbers="true" %}
```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)
);
```
{% endcode %}
{% endtab %}
{% tab title="Kotlin" %}
{% code lineNumbers="true" %}
```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)
);
```
{% endcode %}
{% endtab %}
{% endtabs %}
## Show and hide annotation toolbar
You can show and hide the toolbar by calling [`AnnotationToolbarComponent.show(boolean)`](https://sdk.apryse.com/api/xamarinandroid/tools/api/pdftron.PDF.Widget.Toolbar.Component.AnnotationToolbarComponent.html) and [`AnnotationToolbarComponent.hide(boolean)`](https://sdk.apryse.com/api/xamarinandroid/tools/api/pdftron.PDF.Widget.Toolbar.Component.AnnotationToolbarComponent.html).
## 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[])`](https://sdk.apryse.com/api/xamarinandroid/tools/api/pdftron.PDF.Tools.ToolManager.html). This will also hide the tool in the quick menu. For example:
{% tabs %}
{% tab title="C#" %}
{% code lineNumbers="true" %}
```csharp
// Disable TextHighlightCreate tool, TextUnderlineCreate tool,
// TextSquigglyCreate tool and TextStrikeoutCreate tool
mToolManager.DisableToolMode(new ToolManager.ToolMode[] {
ToolManager.ToolMode.TextHighlight,
ToolManager.ToolMode.TextUnderline,
ToolManager.ToolMode.TextSquiggly,
ToolManager.ToolMode.TextStrikeout
});
```
{% endcode %}
{% endtab %}
{% tab title="Java" %}
{% code lineNumbers="true" %}
```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}
);
```
{% endcode %}
{% endtab %}
{% tab title="Kotlin" %}
{% code lineNumbers="true" %}
```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)
)
```
{% endcode %}
{% endtab %}
{% endtabs %}
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`](https://sdk.apryse.com/api/xamarinandroid/tools/api/pdftron.PDF.Widget.Toolbar.Component.AnnotationToolbarComponent.IAnnotationButtonClickListener.html) to be notified of annotation toolbar button click events.
{% code lineNumbers="true" %}
```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) {
}
});
```
{% endcode %}
## 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 ](/xamarin/guides/viewer-components/custom-theme-a.md).
{% endtab %}
{% tab title="iOS" %}
## Customize annotation toolbar for Xamarin.iOS viewer
{% hint style="info" %}
**This tutorial only applies to Xamarin.iOS. See Xamarin.Android equivalent here .**
{% endhint %}
The [`PTAnnotationToolbar`](https://sdk.apryse.com/api/xamarinios/tools/api/pdftron.PDF.Controls.PTAnnotationToolbar.html) class is a [`UIToolbar`](https://developer.apple.com/uikit/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](/xamarin/annotation/config-annot-tools.md#ios).
{% hint style="info" %}
\*\* 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. \*\*
{% endhint %}
| Scenario | Annotation Toolbar |
| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Small devices in landscape mode + Tablet devices |  |
| Small devices in portrait mode |  |
## Show and hide the annotation toolbar
To create and set up an annotation toolbar, initialize an `AnnotationToolbar` instance and add it to your view hierarchy:
{% tabs %}
{% tab title="C#" %}
{% code lineNumbers="true" %}
```csharp
var annotationToolbar = new pdftron.PDF.Controls.PTAnnotationToolbar(mToolManager);
annotationToolbar.AnnotationToolbarDidCancel += (sender, e) =>
{
annotationToolbar.Hidden = true;
};
View.AddSubview(annotationToolbar);
// position annotation toolbar
annotationToolbar.TranslatesAutoresizingMaskIntoConstraints = false;
NSLayoutConstraint.ActivateConstraints(new NSLayoutConstraint[] {
annotationToolbar.LeadingAnchor.ConstraintEqualTo(this.View.LeadingAnchor),
annotationToolbar.WidthAnchor.ConstraintEqualTo(this.View.WidthAnchor),
annotationToolbar.TopAnchor.ConstraintEqualTo(this.View.LayoutMarginsGuide.TopAnchor)
});
// hide annotation toolbar by default
annotationToolbar.Hidden = true;
```
{% endcode %}
{% endtab %}
{% tab title="Swift" %}
{% code lineNumbers="true" %}
```swift
let annotationToolbar = PTAnnotationToolbar(toolManager: toolManager)
// Set the current view controller as the annotation toolbar's delegate.
annotationToolbar.delegate = self;
self.view.addSubview(annotationToolbar)
// Position annotation toolbar in superview.
annotationToolbar.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activateConstraints([
annotationToolbar.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
annotationToolbar.widthAnchor.constraint(equalTo: self.view.widthAnchor),
annotationToolbar.topAnchor.constraint(equalTo: self.view.layoutMarginsGuide.topAnchor)
])
// Hide annotation toolbar by default.
annotationToolbar.isHidden = true
```
{% endcode %}
{% endtab %}
{% tab title="Obj-C" %}
{% code lineNumbers="true" %}
```objc
AnnotationToolbar *annotationToolbar = [[PTAnnotationToolbar alloc] initWithToolManager:toolManager];
// Set the current view controller as the annotation toolbar's delegate.
annotationToolbar.delegate = self;
[self.view addSubview:annotationToolbar];
// Position annotation toolbar in superview.
annotationToolbar.translatesAutoresizingMaskIntoConstraints = NO;
[NSLayoutConstraint activateConstraints:@[
[annotationToolbar.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
[annotationToolbar.widthAnchor constraintEqualToAnchor:self.view.widthAnchor],
[annotationToolbar.topAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.topAnchor],
]];
// Hide annotation toolbar by default.
annotationToolbar.hidden = YES;
```
{% endcode %}
{% endtab %}
{% endtabs %}
To show:
{% code lineNumbers="true" %}
```csharp
// Show the annotation toolbar.
annotationToolbar.Hidden = false;
```
{% endcode %}
## Customization
The [`PTAnnotationToolbar`](https://sdk.apryse.com/api/xamarinios/tools/api/pdftron.PDF.Controls.PTAnnotationToolbar.html) 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`](https://sdk.apryse.com/api/xamarinios/tools/api/pdftron.PDF.Controls.PTAnnotationToolbar.html#pdftron_PDF_Controls_PTAnnotationToolbar_PrecedenceArray) property.
## Annotation toolbar delegate
The [`PTAnnotationToolbarDelegate`](https://sdk.apryse.com/api/xamarinios/tools/api/pdftron.PDF.Controls.PTAnnotationToolbarDelegate.html) protocol allows the adopting class (usually the containing view controller, as in [this guide](#customize-annotation-toolbar-for-xamarinios-viewer)) to be notified of annotation toolbar events and control the behavior of the toolbar.
{% code lineNumbers="true" %}
```csharp
annotationToolbar.AnnotationToolbarDidCancel += (sender, e) =>
{
annotationToolbar.Hidden = true;
}
```
{% endcode %}
## 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:
{% code lineNumbers="true" %}
```csharp
mAnnotationToolbar.ToolShouldGoBackToPan = (annotationToolbar) =>
{
return false;
};
```
{% endcode %}
The annotation toolbar's behavior could also be handled within user settings by checking and returning the appropriate settings value in the method above.
{% endtab %}
{% endtabs %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.apryse.com/xamarin/annotation/annotation-toolbar.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.