Section:

Customize the sticky note icon picker

This guide requires an SVG to PDF conversion tool to create the PDF file containing your custom sticky note icons.

Add customized sticky note icons

In this guide, we'll add a new Right Arrow icon to the sticky note icon picker. The source code for this sample can be found at our Apryse Android Samples GitHub repository.

Apryse Docs Image
  1. First create a PDF file called stickynote_icons.pdf containing your icons. Each page of the PDF will contain a vector icon and a page label that we'll use as a reference later.Using the existing default file stickynote_icons.pdf, we'll add a new page containing our custom vector icon and give it a page label called RightArrow. For reference, get the resulting stickynote_icons.pdf file.Afterwards, add this to the /res/raw folder in your Android project.

You can modify the page labels in a PDF file using the Apryse SDK. Find more in this sample code .

  1. Now create two Android drawables of our custom icon, one for the fill color and the other one for the border. These will be used for the UI buttons in the icon picker. The drawables will be named as follows:Add these two to the /res/drawable folder in your Android project
    • Create an icon drawable with a white fill color. Name the drawable file with your custom icon's page label prefixed with annotation_note_icon_ and suffixed with _fill.For example. annotation_note_icon_rightarrow_fill.xml.
    • Create another icon drawable with outline only. Name the drawable file with your custom icon's page label prefixed with annotation_note_icon_ and suffixed with _outline.For example annotation_note_icon_rightarrow_outline.xml.
  2. Finally add a string array to /res/arrays.xml called stickynote_icons that references the page labels in stickynote_icons.pdf. This list defines the available icons in the sticky note icon picker.You can reorder, add, or remove items from this string array to further customize your sticky note icon picker.

XML

1<string-array name="stickynote_icons">
2    <!-- Add some default icons -->
3    <item>Comment</item>
4    <item>Help</item>
5    <item>InsertCaret</item>
6    <item>Star</item>
7    <item>LightBulb</item>
8    <item>NewParagraph</item>
9    <item>CrossMark</item>
10    <item>CheckMark</item>
11    <item>LocationPin</item>
12    <item>ThumbsUp</item>
13    <!-- Add our custom icon -->
14    <item>RightArrow</item>
15</string-array>

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales