Custom header tool bar

Technical Support Apryse SDK
, ,
1

Product: PDFTron SDK

Product Version: 9.0.3-beta07
Please give a brief summary of your issue:
How to Custom annotation tools bar UI?
In my project we have a specific requirement of having customised UI of toolbar.
Example icon action, font style, align of button switch annotation

rn_image_picker_lib_temp_892a2e8f-991c-4ca7-b5fb-45c53b1b7222
rn_image_picker_lib_temp_892a2e8f-991c-4ca7-b5fb-45c53b1b72221080×2400 446 KB

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

Hi,

Thanks for contacting us about this question.
The icon and color are styleable but the font style and alignment of the button switch are not.
If you need to change font and switch button alignment, you need to create your own toolbar.

Color style can be changed as described here:
https://www.pdftron.com/documentation/android/guides/viewer-components/custom-theme-a/#customize-the-viewers-theme

For icon, you can replace the icon directly with the same resource name in their application drawable folder
i.e. https://github.com/PDFTron/pdftron-react-native/compare/demo/android-change-scrollbar-icon

Could you please let us know which SDK are you using? Native Android or React-Native?

Best regards,
Saeed

4

I using SDK for React-Native.
I hope the next version update will support custom it.

5

Please give me a name of each icon

rn_image_picker_lib_temp_892a2e8f-991c-4ca7-b5fb-45c53b1b7222
rn_image_picker_lib_temp_892a2e8f-991c-4ca7-b5fb-45c53b1b72221080×2400 454 KB

6

And the requirement of my project is a custom UI like the image above, please tell my how can I do it ?
image

7
  1. The overflow menu is Android specific menu and is provided by system, usually apps should not change it. You may want to check with your design team to make sure they are aware of the platform convention.
  2. The toolbar switcher icon is called “ic_arrow_down_white_24dp”, you will need a vector drawable replacement in your application
  3. The search icon is at the bottom for Android, so to move it to the top, you will need to pass in your own menu: https://www.pdftron.com/documentation/android/guides/basics/open/fragment/#customize-the-options-toolbar. Alternatively, you can choose to subclass the viewer to adjust it directly in the code.
  4. The back arrow is “ic_arrow_back_white_24dp”.

Could you please give it a try?

Thanks.

8

This is a requirement of my project please support me to can do it

9

Hi,

Thanks for contacting us about this question. The toolbar can be customized with a search icon if you provide a custom toolbar with the search as its first value. You can then add an event listener for it to trigger the Search functionality.

You can customize the toolbar with the provided links:

I have created an example project with these settings here:

And I have a video showing it in action here:

For instructions on customizing the icons and other UI tweaks please refer to this post:

Could you please give it a try? Thanks!

Best Regards,
Andrew

10

Thanks for support.
I had customized icon search button.
Next step: How to make button switch annotation to center of view (center of toolbar) because is a requirement of my project. Please tell me how to can do it.
Looking forward to hearing from you as soon as possible.
Thanks!

11

Hi,

You can achieve a centered toolbar by extending the PdfViewCtrlTabHostFragment2 class and calling this on initViews:

        Toolbar.LayoutParams layoutParams =new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.WRAP_CONTENT);
        layoutParams.gravity = Gravity.CENTER;
        mSwitcherButton.setLayoutParams(layoutParams);

I have included a Github commit showing this example:

This will be the result:

Could you give this a try?

In regards to alignment of toolbar items, this will require a new API on our end, please let us know if this feature will help you.

Thanks,
Andrew

12

It woring for Center dropdown title but can’t style for text of button.
Please support to font style for text of button
Screen Shot 2021-08-26 at 15.44.52

13

Hi,

You can customize the font with the following inside your custom TabHostFragment class:

        TextView title = mSwitcherButton.findViewById(R.id.title);
        Typeface bold = Typeface.createFromAsset(getContext().getAssets(), "fonts/Roboto-Bold.ttf");
        title.setTypeface(bold);

Example branch available here:

It will look like this (example using Roboto-Bold font)

Can you please give it a try? Thanks
Andrew

14

Hi,

I’ve updated the PDFTron React Native library to the latest Android snapshot version which includes API to help set the gravity of the toolbar items.

You can change the Annotation Toolbar item gravity by calling the following API in PdfViewCtrlTabHostFragment2.initViews() (as referenced in the GitHub sample sent previously):

    @Override
    protected void initViews() {
        super.initViews();
        // ...
        mAnnotationToolbarComponent.setToolbarItemGravity(Gravity.START);
    }
15

Hi team, how to can listen even when I choose switch annotation toolbar?
Exmple how to know I seleted Annotate, or Draw or Insert ?

16

Hi,
PdfViewCtrlTabHostFragment2.addOnToolbarChangedListener is what you are looking for. Thanks.

17

How to can implement this for react-native-pdftron because I using this ?

18

mPdfViewCtrlTabHostFragment in DocumentView class is what you are looking for.

19

Can give me example for this, how to listener event when I change switch button toolbar like video? Thanks.

20

Since you’ve already created a new ticket here: How to get event onClick of ToolbarSwitcherButton - #2 by system we will continue discussion there.