> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/xamarin/viewer/new-ui-customization-x.md). # Customize the Document Viewer UI Customize the Document Viewer UI in Xamarin.Android by setting themes and styles. Learn how to enhance the user experience with custom attributes and styles for various UI components. The Apryse Xamar {% tabs %} {% tab title="Android" %} ## Customize the Document Viewer UI in Xamarin.Android ## Customize the theme The theme of [`PdfViewCtrlTabHostFragment2`](https://sdk.apryse.com/api/xamarinandroid/tools/api/pdftron.PDF.Controls.PdfViewCtrlTabHostFragment2.html) can be set by calling the following method when creating the fragment using `ViewerBuilder2`: {% code lineNumbers="true" %} ```csharp // 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; } ``` {% endcode %} 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: {% code lineNumbers="true" %} ```csharp ViewerConfig.Builder builder = new ViewerConfig.Builder() .HideToolbars( new String[]{ DefaultToolbars.TagAnnotateToolbar } ); ``` {% endcode %} ## 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`. {% endtab %} {% tab title="iOS" %} ## Customize the Document Viewer UI in Xamarin.iOS The following snippets assume you are using a `PTDocumentController` called `documentController`: {% code lineNumbers="true" %} ```csharp PTDocumentController documentController = new PTDocumentController(); ``` {% endcode %} ## Hide the Toolbar Switcher {% code lineNumbers="true" %} ```csharp documentController.ToolGroupIndicatorView.Hidden = true; ``` {% endcode %} ## 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: {% code lineNumbers="true" %} ```csharp documentController.ToolGroupManager.SelectedGroup = documentController.ToolGroupManager.ViewItemGroup; ``` {% endcode %} The toolbar can be shown again by changing the group to any group other than view: {% code lineNumbers="true" %} ```csharp documentController.ToolGroupManager.SelectedGroup = documentController.ToolGroupManager.DrawItemGroup; ``` {% endcode %} ## 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: {% code lineNumbers="true" %} ```csharp NSMutableArray mutableGroups = new NSMutableArray(documentController.ToolGroupManager.Groups); mutableGroups.RemoveObject((nint)mutableGroups.IndexOf(documentController.ToolGroupManager.DrawItemGroup)); mutableGroups.RemoveObject((nint)mutableGroups.IndexOf(documentController.ToolGroupManager.PensItemGroup)); documentController.ToolGroupManager.Groups = NSArray.FromArray(mutableGroups); ``` {% endcode %} ## Remove buttons from a toolbar The example below shows how to remove the text highlight and text underline button from a toolbar. {% hint style="info" %} **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](/ios/annotation/customization.md#create-and-edit-annotations) system. {% endhint %} {% code lineNumbers="true" %} ```csharp PTToolGroup annotateGroup = documentController.ToolGroupManager.AnnotateItemGroup; // tool buttons that exist currently UIBarButtonItem[] defaultAnnotateGroupTools = annotateGroup.BarButtonItems; // new set of tools to replace current ones NSMutableArray newAnnotateGroupTools = new NSMutableArray(); // 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(newAnnotateGroupTools); ``` {% endcode %} ## Add a tool button to a toolbar {% code lineNumbers="true" %} ```csharp // create a mutable array of the current items in the annotation toolbar group NSMutableArray availableTools = new NSMutableArray(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(availableTools); ``` {% endcode %} ## Create a new toolbar The code below creates a new toolbar that contains a free hand, cloudy and image stamp tool. {% code lineNumbers="true" %} ```csharp 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 groups = new NSMutableArray(documentController.ToolGroupManager.Groups); groupss.Add(customGroup); // add the tool group documentController.ToolGroupManager.Groups = NSArray.FromArray(groups); ``` {% endcode %} ## 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. {% code lineNumbers="true" %} ```csharp PTSelectableBarButtonItem selectableItem = new PTSelectableBarButtonItem(); selectableItem.Title = "Custom Tool"; selectableItem.Image = UIImage("square.and.pencil"); selectableItem.Style = UIBarButtonItemStyle.Plain; NSMutableArray availableTools = new NSMutableArray(documentController.ToolGroupManager.AnnotateItemGroup.BarButtonItems); availableTools.Add(items); documentController.ToolGroupManager.AnnotateItemGroup.BarButtonItems = NSArray.FromArray(availableTools); ``` {% endcode %} If you want to toggle the items selection, flip its selected property: {% code lineNumbers="true" %} ```csharp selectableItem.Clicked += (button, e) => { button.isSelected = !button.isSelected } ``` {% endcode %} ## Modify `UINavigationBar` Items You can modify the navigation bar items. Here is an example of adding a new button (for the current size class): {% code lineNumbers="true" %} ```csharp UIBarButtonItem myItem = new UIBarButtonItem(UIImage("square.and.pencil"), UIBarButtonItemStyle.Plain, null); NSMutableArray navigationItems = new NSMutableArray(documentController.NavigationItem.RightBarButtonItems); navigationItems.Add(myItem); documentController.NavigationItem.RightBarButtonItems = NSArray.FromArray(navigationItems); ``` {% endcode %} Tools can also be added: {% code lineNumbers="true" %} ```csharp UIBarButtonItem freeHand = documentController.ToolGroupManager.CreateItemForToolClass(new ObjCRuntime.Class(typeof(PTFreeHandCreate))); NSMutableArray navigationItems = new NSMutableArray(documentController.NavigationItem.RightBarButtonItems); navigationItems.Add(freeHand); documentController.NavigationItem.RightBarButtonItems = NSArray.FromArray(navigationItems); ``` {% endcode %} 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. {% code lineNumbers="true" %} ```csharp // 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 toolbarItems = new NSMutableArray(documentController.ToolbarItems); toolbarItems.Add(spacer); toolbarItems.Add(myItem); // set the toolbarItems to the new items documentController.ToolbarItems = NSArray.FromArray(toolbarItems); ``` {% endcode %} {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.apryse.com/xamarin/viewer/new-ui-customization-x.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.