Some test text!

Search
Hamburger Icon

Xamarin / Guides / Custom Style editor (Android)

Customize annotation style editor in Xamarin

This tutorial only applies to Xamarin.Android.

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.

Customize standard colors in color picker

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

standard colors

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:

    <string-array name="custom_standard_colors">
        <item>#f1a099</item>
        <item>#ffc67b</item>
        <item>#ffe6a2</item>
        <item>#80e5b1</item>
        <item>#92e8e8</item>
        <item>#a6a1e6</item>
        <item>#e2a1e6</item>
    </string-array>
  2. 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:

    <style name="CustomPresetColorGridStyle" parent="PresetColorGridViewStyle">
        <item name="color_list">@array/custom_standard_colors</item>
    </style>
  3. Finally, set your customized style CustomPresetColorGridStyle to the preset_colors_style attribute in your application's theme:

    <style name="PDFTronAppTheme" parent="PDFTronAppThemeBase">
        <item name="preset_colors_style">@style/CustomPresetColorGridStyle</item>
    </style>
    To learn more about applying your custom theme to an application, see: Styles and Themes.

Customize the annotation preset styles

annotation presets

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.

    <style name="CustomPresetStyle1">
        <item name="annot_color">#ffcd45</item>
        <item name="annot_icon">Comment</item>
    </style>
    <style name="CustomPresetStyle2">
        <item name="annot_color">#25d2d1</item>
        <item name="annot_icon">Star</item>
    </style>
    <style name="CustomPresetStyle3">
        <item name="annot_color">#00cc63</item>
        <item name="annot_icon">CheckMark</item>
    </style>
    <style name="CustomPresetStyle4">
        <item name="annot_color">#e44234</item>
        <item name="annot_icon">CrossMark</item>
    </style>
  2. In the Resources/values/arrays.xml file of your project, define an array containing your customized presets:

    <array name="custom_presets">
        <item>@style/CustomPresetStyle1</item>
        <item>@style/CustomPresetStyle2</item>
        <item>@style/CustomPresetStyle3</item>
        <item>@style/CustomPresetStyle4</item>
    </array>
  3. In the application theme, set your custom_presets array to the sticky_note_presets attribute:

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

    If you want to change the presets for a different annotation type, refer to the attribute presets table to find the appropriate attribute.

Attribute presets table

Preset attributeAnnotation typeDefault presets preview
R.attr.free_text_presetsFreeTextfree_text_presets
R.attr.freehand_presetsInkpresets
R.attr.line_presetsLine and Arrowpresetspresets
R.attr.link_presetsLinkpresets
R.attr.oval_presetsCirclepresets
R.attr.rect_presetsSquarepresets
R.attr.signature_presetsSignaturepresets
R.attr.highlight_presetsHighlightpresets
R.attr.squiggly_presetsSquigglypresets
R.attr.strikeout_presetsStrikeOutpresets
R.attr.underline_presetsUnderlinepresets
R.attr.sticky_note_presetsText(sticky note)presets
R.attr.callout_presetsCalloutpresets
R.attr.ruler_presetsRulerpresets
R.attr.polyline_presetsPolylinepresets
R.attr.polygon_presetsPolygonpresets
R.attr.cloud_presetsCloudpresets
R.attr.free_highlighter_presetsFree Highlighterpresets
R.attr.widget_presetsWidgetpresets
R.attr.other_presetsother annotation typesfree_text_presets

Customize the icon picker

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

icon picker

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

Default icons table

Icon nameIcon
Commenticon
Helpicon
InsertCareticon
Staricon
LightBulbicon
NewParagraphicon
CrossMarkicon
CheckMarkicon
LocationPinicon
ThumbsUpicon

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.

    <string-array name="custom_icons">
        <item>Help</item>
        <item>InsertCaret</item>
    </string-array>
  2. Then, set your custom_icons array to the sticky_note_icons attribute in your application theme:

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

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.

Get the answers you need: Chat with us