Some test text!

Search
Hamburger Icon

Xamarin / Guides / Custom UI (Android)

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.

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

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

customize reply ui
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.

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
replyEditorSendButtonDisabledColorColor of the send message text button when it is disabledColor
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

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.

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

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.

public CollabViewerTabHostFragment2 CreateCustomViewerFragment(AppCompatActivity activity,
        Uri fileUri, ViewerConfig viewerConfig) {
    return CollabViewerBuilder2.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
}

Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales