Customize the Document Viewer UI

Android

Customize the Document Viewer UI in Xamarin.Android

Customize the theme

The theme of PdfViewCtrlTabHostFragment2 can be set by calling the following method when creating the fragment using ViewerBuilder2:

// Add a viewer fragment to the layout container in the specified 
// activity, and returns the added fragment
public PdfViewCtrlTabHostFragment2 addViewerFragment(
        int fragmentContainer,
        AppCompatActivity activity,
        Android.Net.Uri fileUri,
        String password,
        int customTheme)
{

    // Create the viewer fragment
    PdfViewCtrlTabHostFragment2 fragment =
            ViewerBuilder2.WithUri(fileUri, password)
                    // Add custom theme here
                    .UsingTheme(customTheme)
                    .Build(activity) as PdfViewCtrlTabHostFragment2;

    // Add the fragment to the layout fragment container
    activity.SupportFragmentManager.BeginTransaction()
            .Replace(fragmentContainer, fragment)
            .Commit();

    return fragment;
}

Theme supplied to ViewerBuilder2.usingTheme(int) is recommended to extend PDFTronAppThemeBase. If you cannot extend PDFTronAppThemeBase and is extending an AppCompat theme, then you will need to define custom theme attributes for the theme to work properly. Custom attributes are listed in the table below. PDFTronAppThemeBase contains a number of attributes which can be used to define the style for certain UI components. A full list of theme attributes can be found below:

Attribute	Description
pt_toolbar_theme	Used to style the options menu toolbar. See ToolbarTheme.
pt_toolbar_popup_style	Used to style the popup menu in the toolbar. See ToolbarPopupTheme.
pt_toolbar_style	Used to style the options menu toolbar background. See ToolbarStyle.
quick_menu_item	Used to style the quick menu. See QuickMenuItem.
custom_bookmarks_tab_layout	Used to style the outline/user bookmark/annotation list dialog. See BookmarksTabLayoutStyle.
pt_stamp_tab_layout_style	Used to style the stamp dialog tab layout. See StampTabLayoutStyle.
pt_bottom_bar_style	Used to style the bottom navigation bar. See PTBottomBarTheme.
pt_preset_bar_style	Used to style the annotation preset bar. See PTPresetBarTheme.
pt_annotation_toolbar_style	Used to style the annotation toolbar. See PTAnnotationToolbarTheme.
pt_toolbar_switcher_dialog_style	Used to style the toolbar switcher popup dialog. See PTToolbarSwitcherDialogTheme.
pt_toolbar_switcher_button_style	Used to style the toolbar switcher menu button. See PTToolbarSwitcherButtonTheme .
pt_toolbar_tab_action_button_style	Used to style the tab action button. See TabActionButtonTheme .
pt_document_slider_style	Used to style the page slider. See DocumentSliderStyle.
pt_pdf_tab_layout_style	Used to style the document tabs. See PdfTabLayoutStyle.
pt_floating_nav_style	Used to style the floating action buttons. See DefaultFloatingButtonNavStyle.
pt_sound_dialog_style	Used to style the sound annotation dialog. See SoundDialogStyle.
pt_page_indicator_style	Used to style the page indicator. See PageIndicatorTheme.
pt_sticky_note_dialog	Used to style the sticky note dialog. See DialogStickyNote.
pt_create_signature_dialog_style	Used to style the signature creation dialog. See CreateSignatureDialogTheme.
pt_menu_editor_dialog_style	Used to style the toolbar editor dialog. See MenuEditorDialogTheme.
pt_annot_style_dialog_style	Used to style the annotation style dialog. See AnnotStyleDialogTheme.
pt_annotation_filter_dialog_style	Used to style the annotation filter dialog. See AnnotationFilterDialogTheme.
pt_create_stamp_dialog_style	Used to style the stamp creation dialog. See CreateStampDialogTheme.
pt_add_page_dialog_style	Used to style the add page dialog. See AddPageDialogTheme.
pt_tab_switcher_dialog_style	Used to style the tab switcher dialog. See TabSwitcherDialogTheme.
pt_outline_dialog_style	Used to style the outline dialog. See OutlineDialogTheme

A full list of attributes can be found in the styles.xml file in the Apryse Android SDK Tools package.

Customizing the default annotation toolbars

The built-in default toolbars can be customized using the ViewerConfig and ToolManagerBuilder classes. To hide a specific toolbar, call ViewerConfig.Builder.hideToolbars(String[]) with the toolbar's tag. For example to hide the annotate toolbar:

ViewerConfig.Builder builder = new ViewerConfig.Builder()
        .HideToolbars(
                new String[]{
                        DefaultToolbars.TagAnnotateToolbar
                }
        );

Hide annotation toolbar buttons

To hide certain tool buttons, you can disable tool modes using ToolManagerBuilder as described in this guide.

Customize the options toolbar

The options toolbar can be customized using a similar method as described in this guide, however the ViewerBuilder2 class will be used instead of ViewerBuilder.

iOS

Customize the Document Viewer UI in Xamarin.iOS

The following snippets assume you are using a PTDocumentController called documentController:

PTDocumentController documentController = new PTDocumentController();

Hide the Toolbar Switcher

documentController.ToolGroupIndicatorView.Hidden = true;

Hide (and show) the annotation toolbar

The toolbar can be programmatically hidden by setting the mode to view group, which is a special group and the only group where the toolbar is hidden:

documentController.ToolGroupManager.SelectedGroup = documentController.ToolGroupManager.ViewItemGroup;

The toolbar can be shown again by changing the group to any group other than view:

documentController.ToolGroupManager.SelectedGroup = documentController.ToolGroupManager.DrawItemGroup;

Remove toolbars from the switcher

Toolbars can be removed by removing them from the toolGroupManager's groups array. The following code removes the "Draw" and "Pens" toolbars:

NSMutableArray<PTToolGroup> mutableGroups = new NSMutableArray<PTToolGroup>(documentController.ToolGroupManager.Groups);

mutableGroups.RemoveObject((nint)mutableGroups.IndexOf(documentController.ToolGroupManager.DrawItemGroup));
mutableGroups.RemoveObject((nint)mutableGroups.IndexOf(documentController.ToolGroupManager.PensItemGroup));

documentController.ToolGroupManager.Groups = NSArray.FromArray<PTToolGroup>(mutableGroups);

Remove buttons from a toolbar

The example below shows how to remove the text highlight and text underline button from a toolbar.

Disabling a tool type entirely

If you want to disable a tool entirely, from all toolbars and the long press menu, please use the annotations permissions system.

PTToolGroup annotateGroup = documentController.ToolGroupManager.AnnotateItemGroup;

// tool buttons that exist currently
UIBarButtonItem[] defaultAnnotateGroupTools = annotateGroup.BarButtonItems;

// new set of tools to replace current ones
NSMutableArray<UIBarButtonItem> newAnnotateGroupTools = new NSMutableArray<UIBarButtonItem>();

// add all currently existing tools except for the ones we don't want
foreach (UIBarButtonItem defaultToolItem in defaultAnnotateGroupTools) {
    if (defaultToolItem.IsKindOfClass(new ObjCRuntime.Class(typeof(PTToolBarButtonItem))))
    {
        PTToolBarButtonItem toolBarButton = (PTToolBarButtonItem)defaultToolItem;

        if (toolBarButton.ToolClass.Equals(new ObjCRuntime.Class(typeof(PTTextHighlightCreate))) ||
                toolBarButton.ToolClass.Equals(new ObjCRuntime.Class(typeof(PTTextUnderlineCreate)))) {
            continue;
        }
        else {
            newAnnotateGroupTools.Add(defaultToolItem);
        }
    }
    else {
        newAnnotateGroupTools.Add(defaultToolItem);
    }
}

// assign tools to new array
documentController.ToolGroupManager.AnnotateItemGroup.BarButtonItems = NSArray.FromArray<UIBarButtonItem>(newAnnotateGroupTools);

Add a tool button to a toolbar

// create a mutable array of the current items in the annotation toolbar group
NSMutableArray<UIBarButtonItem> availableTools = new NSMutableArray<UIBarButtonItem>(documentController.ToolGroupManager.AnnotateItemGroup.BarButtonItems);

// create a new toolbar item for freehand annotations
UIBarButtonItem[] freeHandItem = { documentController.ToolGroupManager.CreateItemForToolClass(new ObjCRuntime.Class(typeof(PTFreeHandCreate))) };


// add the freehand annotation item to the front of the list
availableTools.InsertObjects(freeHandItem, new NSIndexSet(0));

// assign the array back to the annotation toolbar group.
documentController.ToolGroupManager.AnnotateItemGroup.BarButtonItems = NSArray.FromArray<UIBarButtonItem>(availableTools);

Create a new toolbar

The code below creates a new toolbar that contains a free hand, cloudy and image stamp tool.

UIImage image = new UIImage("square.and.pencil");

// the tools it will contain
UIBarButtonItem freeHandItem = documentController.ToolGroupManager.CreateItemForToolClass(new ObjCRuntime.Class(typeof(PTFreeHandCreate)));
UIBarButtonItem cloudyItem = documentController.ToolGroupManager.CreateItemForToolClass(new ObjCRuntime.Class(typeof(PTCloudCreate)));
UIBarButtonItem stampItem = documentController.ToolGroupManager.CreateItemForToolClass(new ObjCRuntime.Class(typeof(PTImageStampCreate)));

UIBarButtonItem[] tools = { freeHandItem, cloudyItem, stampItem };

// the name of the custom group, its image, and its tool items
PTToolGroup customGroup = PTToolGroup.GroupWithTitle("MyApps Group", image, tools);
            
NSMutableArray<PTToolGroup> groups = new NSMutableArray<PTToolGroup>(documentController.ToolGroupManager.Groups);
groupss.Add(customGroup);

// add the tool group
documentController.ToolGroupManager.Groups = NSArray.FromArray<PTToolGroup>(groups);

Add a button with fully custom behavior

Your app may need a button that does not invoke one of the built in annotation tools. The following code will add a button that calls a selector.

PTSelectableBarButtonItem selectableItem = new PTSelectableBarButtonItem();
selectableItem.Title = "Custom Tool";
selectableItem.Image = UIImage("square.and.pencil");
selectableItem.Style = UIBarButtonItemStyle.Plain;

NSMutableArray<UIBarButtonItem> availableTools = new NSMutableArray<UIBarButtonItem>(documentController.ToolGroupManager.AnnotateItemGroup.BarButtonItems);

availableTools.Add(items);

documentController.ToolGroupManager.AnnotateItemGroup.BarButtonItems = NSArray.FromArray<UIBarButtonItem>(availableTools);

If you want to toggle the items selection, flip its selected property:

selectableItem.Clicked += (button, e) => { 
    button.isSelected = !button.isSelected
}

Modify UINavigationBar Items

You can modify the navigation bar items. Here is an example of adding a new button (for the current size class):

UIBarButtonItem myItem = new UIBarButtonItem(UIImage("square.and.pencil"), UIBarButtonItemStyle.Plain, null);

NSMutableArray<UIBarButtonItem> navigationItems = new NSMutableArray<UIBarButtonItem>(documentController.NavigationItem.RightBarButtonItems);
navigationItems.Add(myItem);
             
documentController.NavigationItem.RightBarButtonItems = NSArray.FromArray<UIBarButtonItem>(navigationItems);

Tools can also be added:

UIBarButtonItem freeHand = documentController.ToolGroupManager.CreateItemForToolClass(new ObjCRuntime.Class(typeof(PTFreeHandCreate)));
NSMutableArray<UIBarButtonItem> navigationItems = new NSMutableArray<UIBarButtonItem>(documentController.NavigationItem.RightBarButtonItems);
navigationItems.Add(freeHand);

documentController.NavigationItem.RightBarButtonItems = NSArray.FromArray<UIBarButtonItem>(navigationItems);

Note that in the example above, de-selecting the tool button item needs to be implemented by the app, by listening to the Tool Did Change notification.

Add and Remove Toolbar Items (iPhone UI)

These are the buttons that appear at the bottom of the screen.

// new button
UIBarButtonItem myItem = new UIBarButtonItem(UIImage("square.and.pencil"), UIBarButtonItemStyle.Plain, null, null);

// spacer to keep evenly spaced buttons
UIBarButtonItem spacer = new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace, null, null);

// new array
NSMutableArray<UIBarButtonItem> toolbarItems = new NSMutableArray<UIBarButtonItem>(documentController.ToolbarItems);
toolbarItems.Add(spacer);
toolbarItems.Add(myItem);

// set the toolbarItems to the new items
documentController.ToolbarItems = NSArray.FromArray<UIBarButtonItem>(toolbarItems);