Jetpack Compose PDF Viewer
Since PSPDFKit for Android version 8, our SDK exposes Jetpack Compose-specific APIs out of the box, enabling PDF viewing and editing. This makes dealing with PSPDFKit in a Jetpack Compose app easier, and it doesn’t require you to wrap PdfFragment
yourself if you want to go the Compose route.
The main entry point is the DocumentView
composable. DocumentView
wraps the functionality of PdfUiFragment
using the AndroidView
composable.
Displaying a Document
To display a document, use the DocumentView
composable function that expects a Uri
parameter:
setContent { Surface { val documentUri = remember { getDocumentUri() } DocumentView( documentUri = documentUri, modifier = Modifier .height(100.dp) .padding(16.dp) ) } }
Displaying an Image
To display an image, use the ImageDocumentView
composable function that expects a Uri
parameter:
setContent { Surface { val imageUri = remember { getDocumentUri() } ImageDocumentView( imageUri = imageUri, modifier = Modifier .height(100.dp) .padding(16.dp) ) } }
Advanced Use
The DocumentView
and ImageDocumentView
composables both have the expected Modifier
parameter, which allows you to control how these composables will be displayed inside your layout. You can also provide a DocumentState
object, which is a wrapper that allows you to modify the PdfActivityConfiguration
used to display the document. It also exposes operations for verifying and updating the current page of the displayed document.
The correct way of instantiating a DocumentState
is via the rememberDocumentState
method. Here’s how to use the DocumentView
composable after hoisting the DocumentState
to control the UserInterfaceViewMode
, and how to ensure the DocumentView
only recomposes when another property changes:
setContent { Surface { var hideInterfaceElements by remember { mutableStateOf(false) } // Configuration to hide the interface. val pdfActivityConfiguration = remember(hideInterfaceElements) { val userInterfaceViewMode = if (hideInterfaceElements) UserInterfaceViewMode.USER_INTERFACE_VIEW_MODE_HIDDEN else UserInterfaceViewMode.USER_INTERFACE_VIEW_MODE_AUTOMATIC PdfActivityConfiguration .Builder(this) .setUserInterfaceViewMode(userInterfaceViewMode) .build() } val documentState = rememberDocumentState(documentUri, pdfActivityConfiguration) DocumentView( documentState = documentState, modifier = Modifier .height(100.dp) .padding(16.dp), documentManager = getDefaultDocumentManager() ) } }
In addition to the Uri
parameter, you can use DocumentView
and ImageDocumentView
composables with DataProvider
as well.
Below is an example of DocumentView
using a resource from the assets folder via AssetDataProvider
:
val dataProvider: DataProvider by remember { mutableStateOf(AssetDataProvider("demo.pdf")) } val documentState = rememberDocumentState(dataProvider, pdfActivityConfiguration) DocumentView( documentState, modifier = Modifier.fillMaxSize() )
Interacting with DocumentView
To make interactions easier, DocumentView
provides DocumentManager
, which provides all the lifecycle and annotation callbacks from the PSPDFKit SDK.
Along with this, to perform any action, DocumentConnection
is provided in documentState
.
Learn more about DocumentManager
and DocumentConnection
here.
File Type Support
-
PDF
-
PNG, JPEG, JPG, TIFF, TIF
Exploring Further
We have a dedicated GitHub public repository demonstrating everything related to DocumentView
and the com.pspdfkit.jetpack.compose
package.