Jetpack Compose: The ultimate guide

If you’re using Jetpack Compose and want to integrate Nutrient Android SDK, this post is your all-in-one scrollable spellbook. From setting up the DocumentView inside Compose to handling configuration, lifecycle, gestures, performance tips, real-world use cases, and what’s coming next — it’s all here.

Jetpack Compose is the future of user interfaces (UIs) in Android. But if you’re wondering how to summon a full-featured document viewer like DocumentView into your modern UI world, you’re not alone. Compose doesn’t (yet) play natively with Views — and that’s where things get interesting.

Nutrient’s DocumentView is a powerful component built with the Android View system, offering robust PDF rendering, annotations, and much more. While it’s not a Compose-native Composable, it can still shine beautifully with a few tricks.

Setting up your project

Before diving into code, make sure your project is ready.

• Ensure you’re using Jetpack Compose(opens in a new tab) in your Android app.
• Add the Nutrient SDK and Compose integration module to your build.gradle file:

implementation("com.pspdfkit:nutrient-compose:<latest-version>")

• Make sure you have all permissions and ProGuard rules needed for Nutrient.

Rendering a PDF with DocumentView

The hero of this blog post is DocumentView, a UI component that renders PDFs, handles user interaction, and supports gestures and annotations.

Here’s the simplest way to show a PDF using the Nutrient Compose module:

DocumentView(
    uri = pdfUri,
    modifier = Modifier.fillMaxSize(),
    configuration = PdfActivityConfiguration.Builder(context)
        .scrollDirection(PageScrollDirection.VERTICAL)
        .build()
)

In the code above, you’re using DocumentView, the official Composable from our Android SDK. Modifier.fillMaxSize() tells Compose to make the PDF viewer fill the available space. No manual lifecycle handling, no XML. Just clean, idiomatic Compose.

Previews and tooling

Jetpack Compose’s @Preview annotation is one of its standout features, allowing you to see your UI without running the entire app. While this works beautifully for most Composables, DocumentView is a platform view under the hood and may not render correctly in the Android Studio Preview window. To work around this, you can preview the container layout using mock content — such as a placeholder box or image — which mimics the size and position DocumentView would occupy. This helps with layout tuning, theming, and spacing decisions before wiring up the actual PDF viewer.

Jetpack Compose shines when it comes to live previews. But there’s a catch — you shouldn’t preview DocumentView itself, since it depends on Android runtime resources. Instead, use placeholders:

@Preview(
    name = "Light Mode",
    showSystemUi = true,
    uiMode = UI_MODE_NIGHT_NO,
    widthDp = 360,
    heightDp = 640
)
@Composable
fun PdfViewerPreview() {
    Box(modifier = Modifier.fillMaxSize()) {
        Text("Preview Mode: PDF would render here")
    }
}

Want a dark mode preview?

@Preview(
    name = "Dark Mode",
    uiMode = UI_MODE_NIGHT_YES
)

Check out our theming guide for more information on how to style appearance.

Styling and layout

Compose makes it easy to compose rich UIs with Material-inspired components like Card, Box, or Surface, and DocumentView plays nicely with these when it comes to layout and presentation. Wrapping your DocumentView in a Box allows you to apply padding, constraints, or background color. A Card gives you elevation, rounded corners, and visual depth. This is particularly helpful if you’re embedding PDFs in a dashboard-style UI or want to animate visibility using Compose’s animation APIs. You’re not limited to flat, static layouts — you can style, animate, and nest DocumentView just like any other Composable.

Want a top app bar? Compose makes it simple:

@Composable
fun PdfWithTopBar(context: Context, uri: Uri) {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("My PDF Viewer") })
        }
    ) { paddingValues ->
        DocumentView(
            documentSource = DocumentSource.fromUri(context, uri),
            modifier = Modifier
                .padding(paddingValues)
                .fillMaxSize()
        )
    }
}

You can treat DocumentView just like any other Composable. Wrap it in Column, add gestures, or animate its visibility — it plays well with the rest of your Compose UI.

Interop: XML ↔ Compose

Still using XML views in parts of your app? No problem. You can embed them like this:

@Composable
fun LegacyViewWrapper() {
    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { context ->
            LegacyPdfView(context).apply {
                setDocument("file:///android_asset/sample.pdf")
            }
        }
    )
}

This works great for publicly available XML views. But avoid using internal SDK views — they may not behave as expected.

Managing DocumentView state

To manage DocumentView state, there are two options, outlined below.

1. Compose-only using rememberDocumentState(...):

   val documentState = rememberDocumentState(
       uri = pdfUri,
       configuration = PdfActivityConfiguration.Builder(context)
           .scrollDirection(PageScrollDirection.VERTICAL)
           .build()
   )
   DocumentView(documentState = documentState)

2. ViewModel-driven with manual DocumentState creation:

   val state = DocumentState(
       uri = pdfUri,
       configuration = config
   )

How to choose between them?

• If you’re creating simple, self-contained Composables, use rememberDocumentState.

val state = DocumentState(
    uri = pdfUri,
    configuration = config
)

How to choose between them?

• If you’re creating simple, self-contained Composables, use rememberDocumentState.
• For production-grade apps, managing state from your ViewModel guarantees your state retention over configuration changes.

Final thoughts and wrapup

Jetpack Compose is here to stay — and paired with Nutrient’s SDK, you can build snappy, scalable, and stylish PDF viewers in no time. Integrating the Nutrient SDK into Jetpack Compose is seamless. With DocumentView, you get full PDF rendering power without sacrificing Compose’s flexibility and simplicity.

Build UI the modern way. Delight users. Make your teammates nod approvingly.

And if you’re stuck? We’ve got your back. Submit a ticket and we’ll be more than happy to help!

Want to learn more?

Check out these other blog posts on Jetpack Compose:

• Introducing Jetpack Compose support
• Opening a PDF in a Jetpack Compose application
• Drag-to-reorder with Jetpack Compose
• How we expose Jetpack Compose APIs
• Using ViewModels to retain state on Android