Customize quick menu in Android

It is possible to customize the quick menu by overriding the default menu resource XML files, or by creating your own.

It is possible to programmatically modify the quick menu by calling methods to add and remove items.

The following example will customize the quick menu for the Square tool by overriding the onShowQuickMenu function and adding a link button. Menu entries can be moved around and removed as well.

1. Add a menu entry to the ids.xml in Resources/values to identify it:

1<resources>
2    ...
3
4    <item name="qm_custom_link" type="id" />
5    
6    ...
7</resources>

1. Create event handler for the onShowQuickMenu event, and add the code below to create a new QuickMenuItem and specify the order you would like for it to show:

1    if (annot.getType() == Annot.e_Square) {
2        QuickMenuItem item = new QuickMenuItem(MainActivity.this, R.id.qm_custom_link, 
3            QuickMenuItem.FIRST_ROW_MENU);
4        item.setTitle(R.string.qm_custom_link);
5        item.setIcon(R.drawable.ic_link_black_24dp);
6        item.setOrder(3);
7        ArrayList<QuickMenuItem> items = new ArrayList<>(1);
8        items.add(item);
9        quickMenu.addMenuEntries(items);
10    }

The quick menu for the square tool will now have a link item at the 3rd (0 index) position like this:

Quickmenu items can be removed by calling the removeMenuEntries method in the QuickMenu class:

1if (annot.getType() == Annot.e_Square) {
2    QuickMenuItem item = new QuickMenuItem(MainActivity.this, R.id.qm_custom_link, 
3        QuickMenuItem.FIRST_ROW_MENU);
4    ArrayList<QuickMenuItem> items = new ArrayList<>(1);
5    items.add(item);
6    quickMenu.removeMenuEntries(items);
7}

In this tutorial you will customize the quick menu for the Pan tool by overriding the default menu resource XML file in the Apryse SDK.

1. Create a menu resource XML file called pan.xml in your project's Resources/menu folder. This pan.xml file will automatically be used instead of the default one in the tools package. To override other quick menus, refer to the table below to determine the name of the menu resource file.
2. Add two items to you menu in pan.xml with the id attributes @+id/qm_free_text and @+id/qm_floating_sig:Here we use the ids @+id/qm_free_text and @+id/qm_floating_sig to override the Free Text and Signature menu items.Now, when you long-press on a blank space, you will see:

1<?xml version="1.0" encoding="utf-8"?>
2<menu xmlns:android="http://schemas.android.com/apk/res/android">
3    <item android:id="@+id/qm_free_text" android:title="@string/tools_qm_free_text" android:icon="@drawable/ic_annotation_freetext_black_24dp" />
4    <item android:id="@+id/qm_floating_sig" android:title="@string/tools_qm_signature" android:icon="@drawable/ic_annotation_signature_black_24dp" />
5</menu>

You can use quick menus in a ToolManager as well as in your application logic directly. By the end of this tutorial, you will be able to create your own quick menu.

1. First, add a menu resource XML file in your project's res/menu folder. For example, let's create a file called custom.xml.
   

By default, all menu items are placed in the first row of the quick menu. If you want to specify the location of a menu item, enclose the item inside a group with a group id from this list:

1. Add the following to custom.xml:

1<?xml version="1.0" encoding="utf-8"?>
2<menu xmlns:android="http://schemas.android.com/apk/res/android">
3    <group android:id="@id/qm_first_row_group">
4        <item android:id="@+id/rectangle"
5            android:title="@string/tools_qm_rectangle"
6            android:icon="@drawable/ic_annotation_square_black_24dp" />
7    </group>
8    <group android:id="@id/qm_second_row_group">
9        <item android:id="@+id/line"
10            android:title="@string/annot_line"
11            android:icon="@drawable/ic_annotation_line_black_24dp"/>
12        <item android:id="@+id/free_text"
13            android:title="@string/tools_qm_free_text"
14            android:icon="@drawable/ic_annotation_freetext_black_24dp"/>
15    </group>
16    <group android:id="@id/qm_overflow_row_group">
17        <item android:id="@+id/floating_sig"
18            android:title="@string/tools_qm_signature"/>
19        <item android:id="@+id/link"
20            android:title="@string/annot_link"/>
21    </group>
22</menu>

You can also add a sub menu by specifiying it in the menu resource XML. For example, we can add an Oval menu item as a submenu under the Rectangle menu item by changing custom.xml to:

1<?xml version="1.0" encoding="utf-8"?>
2<menu xmlns:android="http://schemas.android.com/apk/res/android">
3    <group android:id="@id/qm_first_row_group">
4        <item android:id="@+id/rectangle"
5            android:title="@string/tools_qm_rectangle"
6            android:icon="@drawable/ic_annotation_square_black_24dp" >
7            <!-- Sub menu added to Rectangle menu item -->
8            <menu>
9                <group android:id="@id/qm_first_row_group">
10                    <item android:id="@+id/oval"
11                        android:title="@string/annot_circle"/>
12                </group>
13            </menu>
14        </item>
15    </group>
16    <group android:id="@id/qm_second_row_group">
17        <item android:id="@+id/line"
18            android:title="@string/annot_line"
19            android:icon="@drawable/ic_annotation_line_black_24dp"/>
20        <item android:id="@+id/free_text"
21            android:title="@string/annot_free_text"
22            android:icon="@drawable/ic_annotation_freetext_black_24dp"/>
23    </group>
24    <group android:id="@id/qm_overflow_row_group">
25        <item android:id="@+id/floating_sig"
26            android:title="@string/tools_qm_signature"/>
27        <item android:id="@+id/link"
28            android:title="@string/annot_link"/>
29    </group>
30</menu>

For more information on defining an XML menu resource, see Defining a Menu in XML.

1. After adding the menu resource XML, initialize QuickMenu as follows:

1private void initQuickMenu(PDFViewCtrl pdfViewCtrl) {
2    QuickMenu quickMenu = new QuickMenu(pdfViewCtrl);
3    quickMenu.initMenuEntries(R.menu.custom);
4}

1private fun initQuickMenu(pdfViewCtrl: PDFViewCtrl) {
2    val quickMenu = QuickMenu(pdfViewCtrl)
3    quickMenu.initMenuEntries(R.menu.custom)
4}

Alternatively, if you want to customize menu items manually you can call QuickMenu.inflate to prevent auto-initialization. Then after customizing the items, call QuickMenu.initMenuEntries to apply your changes:

1    private void initQuickMenu(PDFViewCtrl pdfViewCtrl) {
2        QuickMenu quickMenu = new QuickMenu(pdfViewCtrl);
3        quickMenu.inflate(R.menu.custom);
4        QuickMenuItem quickMenuItem = (QuickMenuItem) quickMenu.getMenu().findItem(R.id.rectangle);
5        // Customize my quick menu item
6        quickMenuItem.setIcon(R.drawable.my_custom_icon);
7        quickMenuItem.setTitle(R.string.my_custom_title);
8        // Initialize quick menu
9        quickMenu.initMenuEntries();
10    }

1    private fun initQuickMenu(pdfViewCtrl: PDFViewCtrl) {
2        val quickMenu = QuickMenu(pdfViewCtrl)
3        quickMenu.inflate(R.menu.custom)
4        val quickMenuItem = quickMenu.menu.findItem(R.id.rectangle) as QuickMenuItem
5        // Customize my quick menu item
6        quickMenuItem.setIcon(R.drawable.my_custom_icon)
7        quickMenuItem.setTitle(R.string.my_custom_title)
8        // Initialize quick menu
9        quickMenu.initMenuEntries()
10    }

1. When you want to show the quick menu, set an anchor view that defines where the quick menu should appear by calling QuickMenu.SetAnchor(View), then call QuickMenu.Show()

1    private void showQuickMenu(QuickMenu quickMenu, View view) {
2        quickMenu.setAnchor(view);
3        quickMenu.show();
4    }

1    private fun showQuickMenu(quickMenu: QuickMenu, view: View) {
2        quickMenu.setAnchor(view)
3        quickMenu.show()
4    }

The quick menu will automatically adjust its position to either the top or bottom of the anchor view, depending on the space available:

At this point, you should see the following when the quick menu is shown:

Without sub menu:

With sub menu:

Click events from your custom items will not be automatically handled by the Apryse SDK if the menu item id does not match any of the default ids defined in the tools package (located in the PDFViewCtrlTools\res\menu\ids.xml file). You will have to handle these events as described in the Quick Menu guide or by implementing onDismiss():

1quickMenu.setOnDismissListener(new QuickMenu.OnDismissListener() {
2    @Override
3    public void onDismiss() {
4        // Get selected quick menu item
5        QuickMenuItem selectedMenuItem = quickMenu.getSelectedMenuItem();
6        // Provide functionality depending on the menu item selected
7        // ...
8    }
9});

1quickMenu.setOnDismissListener {
2    // Get selected quick menu item
3    val selectedMenuItem = quickMenu.selectedMenuItem
4    // Provide functionality depending on the menu item selected
5    // ...
6}

You can call the following methods to customize the quick menu item icons programmatically before they are initialized:

Example

1private void initQuickMenu(Context context, PDFViewCtrl pdfViewCtrl) {
2    QuickMenu quickMenu = new QuickMenu(pdfViewCtrl);
3    quickMenu.inflate(R.menu.custom);
4    QuickMenuItem noteItem = (QuickMenuItem) quickMenu.getMenu().findItem(R.id.my_quickmenu_item);
5    // Customize the menu item by setting a custom icon, with a red color and 0.5 opacity
6    noteItem.setIcon(R.drawable.my_custom_icon);
7    noteItem.setColor(context.getResources().getColor(R.color.red));
8    noteItem.setOpacity(0.5f);
9    // Initialize the quick menu after customizing menu items
10    quickMenu.initMenuEntries();
11}

1private fun initQuickMenu(context: Context, pdfViewCtrl: PDFViewCtrl) {
2  val quickMenu = QuickMenu(pdfViewCtrl)
3  quickMenu.inflate(R.menu.custom)
4  val noteItem = quickMenu.menu.findItem(R.id.my_quickmenu_item) as QuickMenuItem
5  // Customize the menu item by setting a custom icon, with a red color and 0.5 opacity
6  noteItem.setIcon(R.drawable.my_custom_icon)
7  noteItem.setColor(context.resources.getColor(R.color.red))
8  noteItem.opacity = 0.5f
9  // Initialize the quick menu after customizing menu items
10  quickMenu.initMenuEntries()
11}

You can also customize the icon using the android:icon attribute in your menu resource XML file. Additionally if your Android app supports minimum API level 26, you can set the icon tint color and tint mode by setting the android:iconTint and android:iconTintMode attributes.

Example

1<item android:id="@+id/rectangle"
2    android:title="@string/tools_rectangle"
3    android:icon="@drawable/annotation_square"
4    android:iconTint="@color/fab_dark_blue"
5    android:iconTintMode="src_in"/>

QuickMenu uses R.style.QuickMenuButton for the buttons style. You can change the style by overriding it in your res/value/style.xml file.

If you want to change the button style the after quick menu is displayed, you can find the button by calling QuickMenu.findMenuItem(QuickMenuItem). Once the button is found, how you set its style programmatically depends on whether it is an ImageButton or a Button.

Example

1/**
2  * Update quick menu appearance item color
3  * @param color
4  */
5public void updateQuickMenuStyleColor(int color) {
6    if (quickMenu == null) {
7        return;
8    }
9    // Find appearance quick menu item
10    QuickMenuItem menuItem = (QuickMenuItem) quickMenu.getMenu().findItem(R.id.appearance);
11    if (menuItem != null) {
12        menuItem.setIconColor(color);
13        View button = quickMenu.findButtonByMenuItem(menuItem);
14        if (button != null) {
15            if (button instanceof ImageButton) {
16                ((ImageButton) button).setColorFilter(color, PorterDuff.Mode.SRC_IN);
17            } else if (button instanceof Button) {
18                ((Button) button).setTextColor(color);
19            }
20        }
21    }
22}

1/**
2  * Update quick menu appearance item color
3  * @param color
4  */
5fun updateQuickMenuStyleColor(color: Int) {
6    if (quickMenu == null) {
7        return
8    }
9    // find appearance quick menu item
10    val menuItem = quickMenu.getMenu().findItem(R.id.appearance) as QuickMenuItem
11    menuItem.setIconColor(color)
12    val button = quickMenu.findButtonByMenuItem(menuItem)
13    if (button != null) {
14        if (button is ImageButton) {
15            (button as ImageButton).setColorFilter(color, PorterDuff.Mode.SRC_IN)
16        } else if (button is Button) {
17            (button as Button).setTextColor(color)
18        }
19    }
20}

The quick menu background uses drawable/quickmenu_bg_rect.xml for API 21 and above and drawable/quickmenu_bg_rect_old_api for API under 21. You can change the background by overriding these drawable files.

There is a hairline divider between the first and second row of the quick menu. If both rows exist, the divider is VISIBLE by default. You can hide this hairline divider by calling QuickMenu.setDividerVisibility(View.INVISIBLE)