Some test text!
Xamarin / Guides / Custom UI (Android)
You can customize the client side UI for realtime collaboration.
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:
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 |
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 |
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