Some test text!

menu
search
Custom UI (Android)keyboard_arrow_down

Realtime collaboration customization

You can customize the client side UI for realtime collaboration.

Realtime collaboration customization

This tutorial only applies to Xamarin.Android.

linkCustomize the annotation reply UI

linkCustom 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.

<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="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:

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

This theme will look something like this:

customize reply ui
Annotation reply UI with a custom theme.

linkUI color attributes

Below is a list of all available color and size attributes used by the annotation reply UI.

AttributeDescriptionFormat
replyColorBackgroundPrimaryPrimary background color, used by most of the reply UIColor
replyColorBackgroundSecondarySecondary background color, used by the header and edit message labelColor
replyIconColorColor of icon image buttonsColor
replyDividerColorColor of horizontal dividersColor
replyEditorSendButtonColorColor of the send message text buttonColor
replyEditorCancelButtonColorColor of the cancel editing message text buttonColor
android:textColorPrimaryMain text color used in the text editor and message contentColor
android:textColorSecondaryText color used in subheaders, annotation preview content, and caption textColor
replySmallTextSizeText size of the reply messagesDimension
replyMediumTextSizeText size of the text editorDimension
replyLargeTextSizeText size of the headerDimension

linkCustom 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.

AttributeDescriptionFormat
replyHeaderContainerStyleStyle used by the reply header containerStyle reference
replyCloseButtonStyleStyle used by the reply header close buttonStyle reference
replyListButtonStyleStyle used by the reply header list buttonStyle reference
replyTitleStyleStyle ued by the reply header titleStyle reference
replyMessagesContainerStyleStyle used by the reply message list containerStyle reference
replyMessageUsernameStyleStyle used by each reply message's usernameStyle reference
replyMessageDateStyleStyle used by each reply message's date stampStyle reference
replyMessageCommentStyleStyle used by each replymessage's commentStyle reference
replyMessageActionIconStyleStyle used by each reply message's action button, only shown if permission is available for current userStyle reference
replyPreviewTextStyleStyle used by the annotation preview text, only shown if annotation content is availableStyle reference
replyPreviewIconStyleStyle used by the annotation preview iconStyle reference
replyEditorContainerStyleStyle used by the text editor containerStyle reference
replyEditorSendButtonStyleStyle used by the text editor send buttonStyle reference
replyEditorEditTextStyleStyle used by the text editor's EditText viewStyle reference
replyEditorCancelButtonStyleStyle used by the text editor cancel button, shown when editing user commentsStyle reference
replyEditorEditHeaderTextStyleStyle used by the text editor header, shown when editing user commentsStyle reference

linkUse a custom viewer fragment

If you would like to use a custom viewer fragment, you can extend the CollabViewerTabHostFragment or CollabViewerTabFragment class and pass in your custom classes to CollabViewerBuilder.

public CollabViewerTabHostFragment CreateCustomViewerFragment(AppCompatActivity activity,
        Uri fileUri, ViewerConfig viewerConfig) {
    return CollabViewerBuilder.WithUri(fileUri)
            .UsingConfig(viewerConfig)
            .UsingTabClass(Java.Lang.Class.FromType(typeof(MyCustomTabFragment))) // Specify your custom tab viewer
            .Build(activity, Java.Lang.Class.FromType(typeof(MyCustomTabHostFragment))); // Specify your custom tab host viewer
}

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

PDFTron Receives USD$71 Million Growth Investment Led By Silversmith Capital Partners

Learn More
close