Opening a PDF in a Jetpack Compose Application

This article was first published in July 2021 and was updated in September 2024.

Jetpack Compose is Google’s declarative UI framework designed for modern Android development. It empowers engineers to build elegant and responsive UIs with less code and fewer bugs. Since its stable release, Jetpack Compose has become a popular choice for developing new Android applications and is increasingly used in production environments.

In this blog post, you’ll learn how to integrate PSPDFKit for Android with your Jetpack Compose application. We’ll look at how to create a @Composable function that previews a document’s thumbnail and opens the document when tapped. In case you want to dive into the code, you can check it out in this repo. Even though it’s by no means what can be considered production-ready code, there are some good practices baked into it that can potentially be useful for real-world scenarios.

Getting Started

Before you can start building your app, you need to have Jetpack Compose and PSPDFKit for Android configured. If you already have these two in place, you can skip to the next section.

1. Open Android Studio and select File > New > New Project… to create a new project for your application.

2. Choose Empty Activity as the template.

3. Set your app name (e.g. PSPDFKit Demo), and specify the Save location, Language, and Minimum SDK 21.

4. Click Finish to save the project.

Adding PSPDFKit to Your Project

1. Update settings.gradle:

// settings.gradle
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven {
            url = uri("https://my.pspdfkit.com/maven")
        }
    }
}

2. Update app/build.gradle:

// app/build.gradle
android {
    compileSdk 34

    defaultConfig {
        applicationId 'com.example.app'
        minSdk 21
        targetSdk 34
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_17
        targetCompatibility JavaVersion.VERSION_17
    }
}

dependencies {
    implementation "com.pspdfkit:pspdfkit:2024.5.0"
}

If you have a more advanced integration scenario for PSPDFKit, you can check out our integration guide.

Displaying a PDF

The other thing you need before displaying a document is… well, the document itself! For the sample project, I added a few documents to Android’s src/main/assets/ folder, but your PDFs can come from pretty much anywhere. PSPDFKit provides built-in APIs for displaying PDFs inside Composable apps. You’ll use them in this example, but you aren’t limited to showing your PDFs this way. To learn more about how to open documents, refer to this guide on opening PDFs from custom data providers.

With the setting up of things out of the way, it’s now time write some declarative UI!

Preparing the Stage

When working with Jetpack Compose, you can take full advantage of modern Android development practices to simplify your code. For this example app, you’ll use AppCompatActivity to serve as the base activity and leverage the DocumentView composable to display a PDF document from the assets folder. This composable makes it easy to render PDFs in a declarative way.

Here’s what your MainActivity looks like:

// MainActivity.kt
class MainActivity : AppCompatActivity() {
    @OptIn(ExperimentalPSPDFKitApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface {
                val uri = Uri.parse("file:///android_asset/my-document.pdf")
                DocumentView(
                    documentUri = uri,
                    modifier = Modifier.fillMaxSize()
                )
            }
        }
    }
}

Showing PDF Documents in Compose

Since version 8.0, PSPDFKit for Android has offered composable APIs that make integration with Jetpack Compose seamless. To display a PDF document, use the DocumentView composable, which accepts a URI pointing to the document you want to display. This allows you to create a modern, clean, and responsive UI for PDF viewing.

Here’s a quick breakdown of how DocumentView works:

• URI-based loading — The DocumentView composable takes a URI as an input. In this case, the URI points to a PDF file stored in the app’s assets folder (file:///android_asset/my-document.pdf).

• Composable integration — Because DocumentView is a composable, you can use it like any other Jetpack Compose UI element. You can customize its size, layout, and behavior by combining it with other composables and using standard Compose modifiers.

• Simplifying PDF handling — By using DocumentView, you avoid the need for complex setup and boilerplate code that would otherwise be required to integrate a PDF viewer into your app. This composable abstracts away the underlying PDF rendering logic, making it easier to focus on building your app’s user interface.

With the DocumentView composable, you can quickly add PDF viewing capabilities to your Compose app, allowing users to view documents with a modern, responsive UI. For more advanced usage, such as adding annotations or handling user interactions, refer to PSPDFKit’s comprehensive documentation.

Conclusion

Combining the power of Jetpack Compose with PSPDFKit’s DocumentView makes it incredibly easy to integrate PDF viewing into modern Android apps. With this setup, you can leverage the full capabilities of both frameworks to create a polished and responsive user experience.

FAQ

How do I add PSPDFKit to my Android project?

You can add PSPDFKit by including it as a dependency in your build.gradle file and configuring your repositories.

What is Jetpack Compose?

Jetpack Compose is Google’s declarative UI framework for Android that simplifies and accelerates UI development.

Can I display a PDF using Jetpack Compose?

Yes, you can display PDFs in Jetpack Compose using PSPDFKit’s DocumentView composable.

How do I load a PDF file from assets in Jetpack Compose?

You can use a URI with the path file:///android_asset/your-pdf.pdf to load the PDF from the assets folder.

Does PSPDFKit for Android support annotations?

Yes, PSPDFKit provides extensive APIs for working with PDF annotations in Android apps.