Some test text!

platform
search

Customize annotation style editor

Contents

Customize standard colors in color picker
Customize the annotation preset styles
Attribute presets table
Customize the icon picker
Default icons table

It is possible to override the default AnnotationStyleDialogFragment to customize the color picker, preset annotation styles, and icon picker.

linkCustomize standard colors in color picker

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

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_presetsFreeText
R.attr.freehand_presetsInk
R.attr.line_presetsLine and Arrow
R.attr.link_presetsLink
R.attr.oval_presetsCircle
R.attr.rect_presetsSquare
R.attr.signature_presetsSignature
R.attr.highlight_presetsHighlight
R.attr.squiggly_presetsSquiggly
R.attr.strikeout_presetsStrikeOut
R.attr.underline_presetsUnderline
R.attr.sticky_note_presetsText(sticky note)
R.attr.callout_presetsCallout
R.attr.ruler_presetsRuler
R.attr.polyline_presetsPolyline
R.attr.polygon_presetsPolygon
R.attr.cloud_presetsCloud
R.attr.free_highlighter_presetsFREE_HIGHLIGHTER
R.attr.other_presetsother annotation types

linkCustomize the icon picker

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:

linkDefault icons table

Icon nameIcon
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 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.

Get the anwsers you need: Support

Contents

Customize standard colors in color picker
Customize the annotation preset styles
Attribute presets table
Customize the icon picker
Default icons table