Customize annotation style editor in Xamarin

The AnnotationStyleDialogFragment can be customized using Android styles or with ToolManagerBuilder, depending on the specific property that needs to be customized.

Android styles are used to customize the color picker, preset annotations, and icon picker.

ToolManagerBuilder is used to customize the annotation style dialog properties.

Standard colors are colors presented in the grid layout of the color picker.

To change these colors, you can override the standard color list as follows:

1. In the Resources/values/arrays.xml file of your project, define a string-array containing your custom color list:

1<string-array name="custom_standard_colors">
2    <item>#f1a099</item>
3    <item>#ffc67b</item>
4    <item>#ffe6a2</item>
5    <item>#80e5b1</item>
6    <item>#92e8e8</item>
7    <item>#a6a1e6</item>
8    <item>#e2a1e6</item>
9</string-array>

1. In your Resources/values/styles.xml file, define your own style and inherit PresetColorGridViewStyle, then set your color list custom_standard_colors to the color_list attribute:

1<style name="CustomPresetColorGridStyle" parent="PresetColorGridViewStyle"> <item name="color_list">@array/custom_standard_colors</item> </style>

1. Finally, set your customized style CustomPresetColorGridStyle to the preset_colors_style attribute in your application's theme:

1<style name="PDFTronAppTheme" parent="PDFTronAppThemeBase"> <item name="preset_colors_style">@style/CustomPresetColorGridStyle</item> </style>

An annotation preset style defines a group of annotation style attributes. Presets allow users to conveniently change the annotation's appearance with only one tap. You can override existing annotation presets and define your own in your app.

In this tutorial you will implement custom annotation presets for Text(sticky note) annotations.

1. In the Resources/values/styles.xml file of your project, create a series of customized annotation styles. For more detail on annotation style attributes, see tool style attributes.

1<style name="CustomPresetStyle1"> <item name="annot_color">#ffcd45</item> <item name="annot_icon">Comment</item> </style>
2<style name="CustomPresetStyle2"> <item name="annot_color">#25d2d1</item> <item name="annot_icon">Star</item> </style>
3<style name="CustomPresetStyle3"> <item name="annot_color">#00cc63</item> <item name="annot_icon">CheckMark</item> </style>
4<style name="CustomPresetStyle4"> <item name="annot_color">#e44234</item> <item name="annot_icon">CrossMark</item> </style>

1. In the Resources/values/arrays.xml file of your project, define an array containing your customized presets:

1<array name="custom_presets">
2    <item>@style/CustomPresetStyle1</item>
3    <item>@style/CustomPresetStyle2</item>
4    <item>@style/CustomPresetStyle3</item>
5    <item>@style/CustomPresetStyle4</item>
6</array>

1. In the application theme, set your custom_presets array to the sticky_note_presets attribute:If you want to change the presets for a different annotation type, refer to the attribute presets table to find the appropriate attribute.

1<style name="PDFTronAppTheme" parent="PDFTronAppThemeBase"> <item name="sticky_note_presets">@array/custom_presets</item> </style>

Preset attribute	Annotation type	Default presets preview
R.attr.free_text_presets	FreeText
R.attr.freehand_presets	Ink
R.attr.line_presets	Line and Arrow
R.attr.link_presets	Link
R.attr.oval_presets	Circle
R.attr.rect_presets	Square
R.attr.signature_presets	Signature
R.attr.highlight_presets	Highlight
R.attr.squiggly_presets	Squiggly
R.attr.strikeout_presets	StrikeOut
R.attr.underline_presets	Underline
R.attr.sticky_note_presets	Text(sticky note)
R.attr.callout_presets	Callout
R.attr.ruler_presets	Ruler
R.attr.polyline_presets	Polyline
R.attr.polygon_presets	Polygon
R.attr.cloud_presets	Cloud
R.attr.free_highlighter_presets	Free Highlighter
R.attr.widget_presets	Widget
R.attr.other_presets	other annotation types

The icon picker for Text(sticky note) annotations allows users to choose their own icon:

Below is the list of icons available for Text(sticky note) annotations:

Icon name	Icon
Comment
Help
InsertCaret
Star
LightBulb
NewParagraph
CrossMark
CheckMark
LocationPin
ThumbsUp

You can also create your own list by using the icons above:

1. To change the icon list, first define a string array list in your Resources/values/arrays.xml file. Each item in the list represents the icon name defined in the table above.

1<string-array name="custom_icons">
2    <item>Help</item>
3    <item>InsertCaret</item>
4</string-array>

1. Then, set your custom_icons array to the sticky_note_icons attribute in your application theme:

1<style name="PDFTronAppTheme" parent="PDFTronAppThemeBase"> <item name="sticky_note_icons">@array/custom_icons</item> </style>

Hide properties in the annotation style dialog By default, each annotation type will contain it's own set of annotation style properties. You can hide these defined properties by using `ToolManagerBuilder` as follows:

1ToolManagerBuilder tmBuilder = ToolManagerBuilder.from() 
2// Hide font and preset properties in the annotation 
3// style dialog for Free Text annotation 
4.addAnnotStyleProperty(new AnnotStyleProperty(Annot.e_FreeText) 
5.setCanShowFont(false) .setCanShowPreset(false) ) 
6.setUseDigitalSignature(false) 
7.setAutoResizeFreeText(false);

If the property is not defined for a annotation type (for example font property is not defined for rectangle annotations), setting the CanShow property will not do anything.