Customize annotation style dialog fragment

It is possible to override the default AnnotationStyleDialogFragment to fit your needs.

Customize standard colors in color picker

The standard colors are the color grid in the color picker.

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

  1. Define your own color list in arrays.xml
<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>
  1. In the styles.xml file, define your own style and inherit PresetColorGridViewStyle. Set your own color list custom_standard_colors to attribute color_list.
<style name="CustomPresetColorGridStyle" parent="PresetColorGridViewStyle">
    <item name="color_list">@array/custom_standard_colors</item>
</style>
  1. In the application theme, set your customized style CustomPresetColorGridStyle to attribute preset_colors_style
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name"preset_colors_style">@style/CustomPresetColorGridStyle</item>
</style>
To learn about apply your custom theme to application, see: Apply a theme to an activity or app.

Customize annotation presets

Different annotation types have different presets for style editing. It allows users to change style with only one tap. You can override the existing annotation presets as follows:

Preset attribute table

To override an existing annotation presets, first identify which annotation presets you are interested in changing

Preset attributeAnnotation typeDefault presets preview
R.attr.free_text_presetsFreeText
R.attr.freehand_presetsInk
R.attr.line_presetsLine
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.other_presetsother annotation types
  1. In the styles.xml file, create a series of customized annotation styles. For detailed 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>
  1. In the arrays.xml file, create your customized presets array.
<array name="custom_presets">
    <item>@style/CustomPresetStyle1</item>
    <item>@style/CustomPresetStyle2</item>
    <item>@style/CustomPresetStyle3</item>
    <item>@style/CustomPresetStyle4</item>
</array>
  1. In the application theme, set your customized presets array custom_presets to the annotation presets attribute identified in presets attribute table.

For example, if you want to change Text(sticky note) annotation presets, you set custom_presets to sticky_note_presets

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name"sticky_note_presets">@array/custom_presets</item>
</style>

Customize icons list

If the style dialog is for Text(sticky note) annotation, it shows an icon list for user to change sticky note icon.

Default icons table

Icon nameIcon
Comment
Help
InsertCaret
Star
LightBulb
NewParagraph
CrossMark
CheckMark
LocationPin
ThumbsUp
  1. To change the icon list, first define a string array list in arrays.xml file. Each item in the list represents the icon name.
<string-array name="custom_icons">
    <item>Help</item>
    <item>InsertCaret</item>
</string-array>
  1. Set your customized icon list array to attribute sticky_note_icons in your application theme.
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name"sticky_note_icons">@array/custom_icons</item>
</style>