How to show PDF in Jetpack Compose

Using ComposePDFViewer package you can pick pdf from your device and show using Jetpack Compose

ComposePDFViewer is a package that serves to display PDF files in android applications using Jetpack Compose. Jadi tidak menggunakan Android View lagi dalam penggunaannya.

Now, this package reaches version 1.0.1. Still under construction but can be used in general. In the future I will add a feature to display PDF from network urls.

Ok, let’s go straight to the implementation

Setup Project

Before starting the project there are several requirements that must be met so that the package can run properly. Here are the requirements for your project:

1. Kotlin 1.5.31
2. Jetpack Compose 1.1.0-beta02
3. Android Gradle Plugin 7.0.3

The list above is the minimum requirement, it is recommended to have a higher version

After the requirements are met, just add the jitpack.io repository in your build.gradle file

allprojects {
    repositories {
        ...
	maven { url 'https://jitpack.io' }
    }
}

And then add the dependencies from the Compose PDF Viewer library in the app/build.gradle file as follows

dependencies {
    implementation 'com.github.farhanroy:ComposePDFViewer:1.0.1'
}

Finally sync the project, wait a moment until the package installation process is complete.

Let’s Code

First create a composable function with the name HomeScreen().

@Composable
fun HomeScreen() {
    
}

Then to get the PDF file from storage use rememberLauncherForActivityResult() This is provided specifically for Jetpack Compose . Don’t forget to also add storage permissions to the AndroidManifest.xml file

var imageList by remember { mutableStateOf<ImageBitmap?>(null) }

var pdfUri by remember { mutableStateOf<Uri?>(null) }

val launcherPDF = rememberLauncherForActivityResult(contract =
  ActivityResultContracts.GetContent()) { uri: Uri? ->
      pdfUri = uri
  }

I created a button, so when clicked it will open a chooser which will select the PDF file

Button(onClick = { launcherPDF.launch("application/pdf") }) {
        Text("Open file")
}

In jetpack compose, to get Context, it doesn’t depend on activity, fragment, or anything else. So using LocalContext. This API will provide context as long as it is inside a composable function

val context = LocalContext.current

To use the ComposePDFViewer library, it’s quite easy to call ComposePDF() and fill in the file parameters with File from PDF.

if (pdfUri != null) {
        val file = File(ContentUriUtil.getFilePath(context = context, uri = pdfUri!!)!!)
        ComposePDF(file = file)
 }

Here’s the complete code!

HomeScreen.kt

Consclusion

In conclusion it is quite easy to display PDF files when using Jetpack Compose as a UI tool. We don’t need to use Android View anymore because there is already a ComposePDFView er library which fully uses the API integrated with Jetpack Compose

I am also open to anyone who wants to contribute to this library because actually this library is not for me personally but is intended for the community, especially Android Developers.

GitHub - farhanroy/ComposePDFViewer: library for view pdf file using jetpack compose easier and…