Section:

Realtime collaboration customization

You can customize the client side UI for realtime collaboration.

Realtime collaboration customization in Xamarin.Android

This tutorial only applies to Xamarin.Android.

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 Resources/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

1<resources>
2    <!-- Custom theme used by the reply UI components -->
3    <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>
4    ...
5</resources>

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

XML

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

This theme will look something like this:

Apryse Docs Image

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.

C#

1public CollabViewerTabHostFragment2 CreateCustomViewerFragment(AppCompatActivity activity,
2        Uri fileUri, ViewerConfig viewerConfig) {
3    return CollabViewerBuilder2.WithUri(fileUri)
4            .UsingConfig(viewerConfig)
5            .UsingTabClass(Java.Lang.Class.FromType(typeof(MyCustomTabFragment))) // Specify your custom tab viewer
6            .Build(activity, Java.Lang.Class.FromType(typeof(MyCustomTabHostFragment))); // Specify your custom tab host viewer
7}

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales