Some test text!

menu
Custom style editorkeyboard_arrow_down

Customize annotation style editor in 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.

linkCustomize 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 res/value/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 res/value/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="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name"preset_colors_style">@style/CustomPresetColorGridStyle</item>
    </style>
    To learn more about applying your custom theme to an application, see: Styles and Themes.

linkCustomize 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 res/value/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 res/value/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="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <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.

linkAttribute presets table

Preset attributeAnnotation typeDefault presets preview
R.attr.free_text_presetsFreeTextfree_text_presets
R.attr.freehand_presetsInkpresets
R.attr.line_presetsLine and Arrowpresets
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.other_presetsother annotation typesfree_text_presets

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

linkDefault 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 res/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="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="sticky_note_icons">@array/custom_icons</item>
    </style>

If you want to add a custom icon to the sticky note icon picker, please refer to this guide for more details.

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

ToolManagerBuilder tmBuilder = ToolManagerBuilder.from()
        // Hide font and preset properties in the annotation 
        // style dialog for Free Text annotation
        .addAnnotStyleProperty(new AnnotStyleProperty(Annot.e_FreeText)
                .setCanShowFont(false)
                .setCanShowPreset(false)
        )
        .setUseDigitalSignature(false)
        .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.

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.