> 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/android/viewer/new-ui-customization.md). # Customize the Document Viewer UI Customize the theme of PdfViewCtrlTabHostFragment2 with ViewerBuilder2. Learn how to set custom attributes for styling UI components like toolbar, bottom bar, and more. Optimize your PDF viewing exper ## Customize the theme The theme of [`PdfViewCtrlTabHostFragment2`](https://sdk.apryse.com/api/android/javadoc/reference/com/pdftron/pdf/controls/PdfViewCtrlTabHostFragment2.html) can be set by calling the following method when creating the fragment using `ViewerBuilder2`: {% tabs %} {% tab title="Java" %} {% code lineNumbers="true" %} ```java // Add a viewer fragment to the layout container in the specified // activity, and returns the added fragment public PdfViewCtrlTabHostFragment2 addViewerFragment( @IdRes int fragmentContainer, @NonNull AppCompatActivity activity, @NonNull Uri fileUri, @Nullable String password, @StyleRes int customTheme) { // Create the viewer fragment PdfViewCtrlTabHostFragment2 fragment = ViewerBuilder2.withUri(fileUri, password) // Add custom theme here .usingTheme(customTheme) .build(activity); // Add the fragment to the layout fragment container activity.getSupportFragmentManager().beginTransaction() .replace(fragmentContainer, fragment) .commit(); return fragment; } ``` {% endcode %} {% endtab %} {% tab title="Kotlin" %} {% code lineNumbers="true" %} ```kotlin // Add a viewer fragment to the layout container in the specified // activity, and returns the added fragment fun addViewerFragment( @IdRes fragmentContainer: Int, @NonNull activity: AppCompatActivity, @NonNull fileUri: Uri?, @Nullable password: String?, @StyleRes customTheme: Int): PdfViewCtrlTabHostFragment2? { // Create the viewer fragment val fragment: PdfViewCtrlTabHostFragment2 = ViewerBuilder2.withUri(fileUri, password) // Add custom theme here .usingTheme(customTheme) .build(activity) // Add the fragment to the layout fragment container activity.supportFragmentManager.beginTransaction() .replace(fragmentContainer, fragment) .commit() return fragment } ``` {% endcode %} {% endtab %} {% endtabs %} 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: {% tabs %} {% tab title="Java" %} {% code lineNumbers="true" %} ```java ViewerConfig.Builder builder = new ViewerConfig.Builder() .hideToolbars( new String[]{ DefaultToolbars.TAG_ANNOTATE_TOOLBAR } ); ``` {% endcode %} {% endtab %} {% tab title="Kotlin" %} {% code lineNumbers="true" %} ```kotlin val builder = ViewerConfig.Builder() .hideToolbars( arrayOf( DefaultToolbars.TAG_ANNOTATE_TOOLBAR ) ) ``` {% endcode %} {% endtab %} {% endtabs %} ## 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`. --- # 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/android/viewer/new-ui-customization.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.