> 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/collaboration/custom-ui.md). # Customize UI for document collaboration Customize the annotation reply UI with custom theme colors. Learn how to personalize the real-time annotation interface using Android styles and themes. Enhance your reply UI for a unique look and fee ## Customize the annotation reply UI ### Custom theme colors All UI components in the real-time annotation reply interface can be customized using Android styles defined in `res/values/styles.xml`. You can extend `ReplyBaseTheme.DayNight` and override the inherited attributes to change the look of your reply UI. A description of each color attribute used in `ReplyBaseTheme.DayNight` is summarized [below](https://docs.apryse.com). {% tabs %} {% tab title="XML" %} {% code lineNumbers="true" %} ```xml ... ``` {% endcode %} {% endtab %} {% endtabs %} then you can use this theme by specifying it in your activity's theme using the `replyTheme` attribute: {% tabs %} {% tab title="XML" %} {% code lineNumbers="true" %} ```xml ... ``` {% endcode %} {% endtab %} {% endtabs %} This theme will look something like this: ![](https://226546913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0QItsdFBmuuL9ezHimHy%2Fuploads%2Fgit-blob-d5264c08ab5a4c0bf639f9529602a344d12bf602%2Ff1229883414ec3c1942d2059be0309066a29fcdb-1080x1683.png?alt=media) Annotation reply UI with a custom theme. ### UI color attributes Below is a list of all available color and size attributes used by the annotation reply UI. | Attribute | Description | Format | | ------------------------------------ | --------------------------------------------------------------------------- | --------- | | `replyColorBackgroundPrimary` | Primary background color, used by most of the reply UI | Color | | `replyColorBackgroundSecondary` | Secondary background color, used by the header and edit message label | Color | | `replyIconColor` | Color of icon image buttons | Color | | `replyDividerColor` | Color of horizontal dividers | Color | | `replyEditorSendButtonColor` | Color of the send message text button | Color | | `replyEditorSendButtonDisabledColor` | Color of the send message text button when it is disabled | Color | | `replyEditorCancelButtonColor` | Color of the cancel editing message text button | Color | | `android:textColorPrimary` | Main text color used in the text editor and message content | Color | | `android:textColorSecondary` | Text color used in subheaders, annotation preview content, and caption text | Color | | `replySmallTextSize` | Text size of the reply messages | Dimension | | `replyMediumTextSize` | Text size of the text editor | Dimension | | `replyLargeTextSize` | Text size of the header | Dimension | ### Custom layout attributes Each view in the reply UI can be further customized by individually specifying its style. Default styles are used by each view, and you can extend and override them in your reply theme. Here is a list of default styles used by each view in the reply interface. | Attribute | Description | Format | | -------------------------------- | -------------------------------------------------------------------------------------------------------- | --------------- | | `replyHeaderContainerStyle` | Style used by the reply header container | Style reference | | `replyCloseButtonStyle` | Style used by the reply header close button | Style reference | | `replyListButtonStyle` | Style used by the reply header list button | Style reference | | `replyTitleStyle` | Style ued by the reply header title | Style reference | | `replyMessagesContainerStyle` | Style used by the reply message list container | Style reference | | `replyMessageUsernameStyle` | Style used by each reply message's username | Style reference | | `replyMessageDateStyle` | Style used by each reply message's date stamp | Style reference | | `replyMessageCommentStyle` | Style used by each replymessage's comment | Style reference | | `replyMessageActionIconStyle` | Style used by each reply message's action button, only shown if permission is available for current user | Style reference | | `replyPreviewTextStyle` | Style used by the annotation preview text, only shown if annotation content is available | Style reference | | `replyPreviewIconStyle` | Style used by the annotation preview icon | Style reference | | `replyEditorContainerStyle` | Style used by the text editor container | Style reference | | `replyEditorSendButtonStyle` | Style used by the text editor send button | Style reference | | `replyEditorEditTextStyle` | Style used by the text editor's EditText view | Style reference | | `replyEditorCancelButtonStyle` | Style used by the text editor cancel button, shown when editing user comments | Style reference | | `replyEditorEditHeaderTextStyle` | Style used by the text editor header, shown when editing user comments | Style reference | ## Use a custom viewer fragment If you would like to use a custom viewer fragment, you can extend the `CollabViewerTabHostFragment2` or `CollabViewerTabFragment2` class and pass in your custom classes to `CollabViewerBuilder2`. {% tabs %} {% tab title="Java" %} {% code lineNumbers="true" %} ```java // Create a viewer using a custom fragment that extends // CollabViewerTabFragment2 and/or CollabViewerTabHostFragment2 public CollabViewerTabHostFragment2 createCustomViewerFragment(AppCompatActivity activity, Uri fileUri, ViewerConfig viewerConfig) { return CollabViewerBuilder2.withUri(fileUri) .usingConfig(viewerConfig) .usingAnnotationManagerMode(PDFViewCtrl.AnnotationManagerMode.ADMIN_UNDO_OWN) // Specify your custom tab viewer .usingTabClass(MyCustomTabFragment.class) // Specify your custom tab host viewer .build(activity, MyCustomTabHostFragment.class); } ``` {% endcode %} {% endtab %} {% tab title="Kotlin" %} {% code lineNumbers="true" %} ```kotlin // Create a viewer using a custom fragment that extends // CollabViewerTabFragment2 and/or CollabViewerTabHostFragment2 fun createCustomViewerFragment(activity: AppCompatActivity, fileUri: Uri, viewerConfig: ViewerConfig): CollabViewerTabHostFragment2 { return CollabViewerBuilder2.withUri(fileUri) .usingConfig(viewerConfig) .usingAnnotationManagerMode(PDFViewCtrl.AnnotationManagerMode.ADMIN_UNDO_OWN) // Specify your custom tab viewer .usingTabClass(MyCustomTabFragment::class.java) // Specify your custom tab host viewer .build(activity, MyCustomTabHostFragment::class.java) } ``` {% 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/android/collaboration/custom-ui.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.