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 isn’t 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>Modal dialogs
Nutrient enables you to style common properties of custom modal dialogs. These include 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 is 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 is 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 floating action button (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. |
Material 3 modal sheets
Since 12.0, the document info screen, outline container, settings dialog, and share menu present as Material 3 modal sheets rather than dialogs. They supply their own scrim and sizing, so the window-level styling described above no longer sizes or dims them.
On expanded windows (840dp wide and up), the outline and the settings present as an end-anchored side sheet instead of a bottom sheet. The side sheet has full height and a clamped width, and it slides in from the trailing edge. The share menu stays a bottom sheet at every width, clamped rather than stretched.
Two theme attributes control this, on the outline and settings styles:
| Attribute | Description |
|---|---|
pspdf__maxWidth | Width the sheet is clamped to: the side sheet’s exact width, and the bottom sheet’s maximum. Defaults to @dimen/pspdf__sheet_max_width (480dp). |
pspdf__sheetPresentationMode | One of auto (the default), bottom, or side. |
<style name="MyOutlineView" parent="PSPDFKit.OutlineView"> <!-- Always a bottom sheet, regardless of window width. --> <item name="pspdf__sheetPresentationMode">bottom</item> <item name="pspdf__maxWidth">640dp</item></style>Override the pspdf__sheet_max_width dimension in your own dimens.xml to move both sheets at once. A theme that sets the legacy pspdf__width on the outline style still wins over pspdf__maxWidth, so check for it if pspdf__maxWidth appears to do nothing.
For the full set of changes these surfaces bring, see the 12 migration guide.
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 overrides all theme values like primaryColor and colorAccent, while the second overlays 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>