Customizing dialog modals on Android

By default, Nutrient styles all dialogs according to your theme without any additional work. This produces light dialogs with light application themes and dark dialogs with dark application themes.

If the default behavior is not enough, a large set of style attributes is available to alter the appearance to your needs. For a comprehensive usage example, take a look at DarkThemeExample and DarkThemeActivity inside the Catalog app.

Alert dialogs

Nutrient supports the standard alertDialogTheme attribute from appcompat-v7 for styling all AlertDialog instances:

<style name="MyApp.PSPDFKitTheme" parent="PSPDFKit.Theme.Default">
    <item name="alertDialogTheme>@style/PSPDFKit.AlertDialog</item>
</style>

Nutrient allows styling the appearance of common properties of custom modal dialogs, including sharing and printing dialogs, the annotation inspector, stamp and signature pickers, and new page dialogs:

<item name="pspdf__modalDialogStyle">@style/MyApp.ModalDialogStyle</item>

Attributes

Attribute Description
pspdf__titleBackground Dialog title bar background color.
pspdf__titleTextColor Dialog title bar text color.
pspdf__titleIconsColor Dialog title bar icon color.
pspdf__titleHeight Dialog title height.
pspdf__titleTextSize Dialog title text size.
pspdf__titlePadding Dialog title padding.
pspdf__cornerRadius Dialog corner radius.

To use different modal dialog styles, override the pspdf__modalDialogStyle theme attribute that is controlling your dialog theming in your styles.xml.

Sharing dialog

The sharing and printing options dialog style is controlled by the following theme attribute:

<item name="pspdf__sharingDialogStyle">@style/MyApp.SharingDialogStyle</item>

Attributes

Attribute Description
pspdf__backgroundColor Sharing dialog background color.
pspdf__errorColor Error highlight color used in text fields.

The style of controls inside the sharing dialog are controlled by existing theme attributes. For example:

Attribute Description
android:colorBackground Color used in spinner pop-ups.
android:textColorPrimary Text color inside dialog.
android:textColorSecondary Text color used for captions.

New page dialog

To control the style of a new page dialog, just add the following attribute to your theme:

<item name="pspdf__newPageDialogStyle">@style/MyApp.NewPageDialogStyle</item>

Attributes

Attribute Description
pspdf__backgroundColor Dialog background color.

The style of controls inside the new page dialog are controlled by existing theme attributes. For example:

Attribute Description
android:colorBackground Color used in spinner pop-ups.
android:textColorPrimary Text color inside dialog.
android:textColorSecondary Text color used for captions.

Stamp picker Dialog

The stamp picker dialog style is controlled by the following theme attribute:

<item name="pspdf__stampPickerStyle">@style/MyApp.StampPickerStyle</item>

Attributes

Attribute Description
pspdf__maxHeight Maximum height of the stamp picker dialog.
pspdf__maxWidth Maximum width of the stamp picker dialog.
pspdf__backgroundColor Dialog background color.
pspdf__textColor Stamp picker text color.
pspdf__hintColor Stamp picker edit text hint color.
pspdf__acceptCustomStampIcon Icon for accepting a custom stamp when editing it. This will be displayed inside the FAB. This is a checkmark by default.
pspdf__acceptCustomStampIconColor Color for a custom stamp acceptance icon.
pspdf__acceptCustomStampIconBackgroundColor Color for a custom stamp acceptance icon background.

Add signature dialog

The signature dialog style is controlled by the following theme attribute:

<item name="pspdf__signatureLayoutStyle">@style/MyApp.SignatureLayoutStyle</item>

Attributes

Attribute Description
pspdf__backgroundColor Signature layout background color.
pspdf__textColor Signature layout foreground color.
pspdf__addSignatureIcon Icon for adding signature (displayed in FAB by default).
pspdf__addSignatureIconColor Color for the Add Signature icon.
pspdf__addSignatureIconBackgroundColor Background color for the Add Signature icon (the background of the FAB).
pspdf__acceptSignatureIcon Icon for accepting a signature when editing it. This will be displayed inside the FAB. This is a checkmark by default.
pspdf__acceptSignatureIconColor Color for the signature acceptance icon.
pspdf__acceptSignatureIconBackgroundColor Color for the signature acceptance icon background.
pspdf__signatureListSelectedItemBackground Color for the selected signature list item background.
pspdf__deleteSelectedSignaturesIcon Icon for deleting the selected signature. This will be displayed inside the FAB. This is a trash icon by default.
pspdf__deleteSelectedSignaturesIconColor Color for the signature deletion icon.
pspdf__deleteSelectedSignaturesIconBackgroundColor Background color for the signature deletion icon.
pspdf__clearSignatureCanvasIcon Signature layout icon for clearing the signature canvas.
pspdf__clearSignatureCanvasIconColor Color of the clear canvas icon.
pspdf__colorIconsBorderColor Color of the border for the signature ink color icons.
pspdf__signatureInkColorPrimary First color offered in the signature ink color picker.
pspdf__signatureInkColorSecondary Second color offered in the signature ink color picker.
pspdf__signatureInkColorTertiary Third color offered in the signature ink color picker.

Annotation inspector

Use this to change the appearance of the annotation inspector:

<item name="pspdf__propertyInspectorStyle">@style/MyApp.PropertyInspectorStyle</item>

Attributes

Attribute Description
pspdf__backgroundColor Inspector background color.
pspdf__textColor Inspector text color.
pspdf__minHeight Minimum height of the inspector when resized.
pspdf__maxHeight Maximum height of the inspector when resized.
pspdf__maxWidth Maximum width of the inspector.

Action menu

The action menu style is controlled by the following theme attribute:

<item name="pspdf__actionMenuStyle">@style/MyApp.ActionMenuStyle</item>

Attributes

Attribute Description
pspdf__maxWidth Maximum width of the action menu on tablets.
pspdf__backgroundColor Background color used in the action menu.
pspdf__labelColor Action labels text color.
pspdf__fixedActionsPanelBackgroundColor Fixed actions background color.
pspdf__fixedActionsIconColor Fixed actions icon color.
pspdf__fixedActionsIconBackground Fixed actions circular background color.

Using light dialogs with dark themes

You may want to use a dark application theme like Theme.AppCompat.NoActionBar and still use light-themed dialogs. To achieve this, change the dialog style parent to Theme.AppCompat.Dialog.Light or ThemeOverlay.AppCompat.Light. The first variant will override all theme values like primaryColor and colorAccent, while the latter will simply overlay dark theme colors with their light variants.

For example, to produce a lightly colored sharing dialog, set the following as your pspdf__sharingDialogStyle:

<style name="MyApp.SharingDialogStyle" parent="ThemeOverlay.AppCompat.Light">
    <item name="pspdf__backgroundColor">@color/pspdf__color_white</item>
    <item name="pspdf__errorColor">@color/pspdf__color_error</item>
</style>