Customize UI for document collaboration

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.

XML

<resources>
    <!-- Custom theme used by the reply UI components -->
    <style name="MyCustomReplyTheme" parent="ReplyBaseTheme.DayNight"> <item name="replyColorBackgroundPrimary">#202D3D</item> <item name="replyColorBackgroundSecondary">#151e29</item> <item name="replyIconColor">#9dd8ff</item> <item name="replyDividerColor">#151e29</item> <item name="replyEditorSendButtonColor">#9dd8ff</item> <item name="replyEditorSendButtonDisabledColor">#999dd8ff</item> <item name="replyEditorCancelButtonColor">#ff5722</item> <item name="android:textColorPrimary">#FFFFFF</item> <item name="android:textColorSecondary">#C9C9C9</item> </style>
    ...
</resources>

then you can use this theme by specifying it in your activity's theme using the replyTheme attribute:

XML

<resources>
    <!-- Style used by the activity containing the collaboration viewer Fragment-->
    <style name="PDFTronAppTheme" parent="PDFTronAppThemeBase"> ... <!-- Specify your custom reply theme with the replyTheme attribute --> <item name="replyTheme">@style/MyCustomReplyTheme</item> </style>
    ...
</resources>

This theme will look something like this:

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.

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); 
}

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) 
}