PDF is one of the most common file formats we use daily, but there still needs to be an official PDFViewer available in Jetpack Compose. So, why not build it?

If you are here just for the code, then here you go.

How is it possible?

Let’s see an overview of our plan:

1. We have a PDF file, from a Remote URL or Phone Storage.
2. We can show single pages one by one.
3. Pages should be Zoomable and Moveable.
4. We must download and store the server PDF in our local cache/storage.
5. We can convert the PDF into the List<Bitmap> representing the List<Pages>.
6. Then it’s simple, we will show all the pages one by one Vertically, using the Image composable which provides In-Built support for Bitmap.

Step 1: Download and Save the PDF

Skip this step, if you are planning to view Locally Present PDFs only.

At this point, you only have a URL of your pdf, let’s create a function to download it.

First, add these permissions in AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

We will use the HttpURLConnection object to establish the connection and get the InputStream.

val connection = URL(url).openConnection() as HttpURLConnection
connection.connect()

These above lines will do the work and get the PDF file. Just check if the task was done and we got the required Input stream or not.

if (connection.responseCode != HttpURLConnection.HTTP_OK) {
    connection.disconnect()
    return@withContext null
}

val inputStream = connection.inputStream

Make sure to disconnect after it is done.

connection.disconnect()

So, the download part is done, now store it in your user’s Local Storage.

file = File.createTempFile(fileName, ".pdf")
val outputStream = FileOutputStream(file)
inputStream.copyTo(outputStream)
outputStream.close()

The whole function(after some modification) looks like this:

suspend fun downloadAndGetFile(url: String, fileName: String): File? {
    if (isFileExist(fileName)) return File(fileName)//This line is important to avoid creating duplicate files.
    var connection: HttpURLConnection? = null
    var file: File? = null
    try {
        withContext(Dispatchers.IO) {
            connection = URL(url).openConnection() as HttpURLConnection
            connection!!.connect()

            if (connection!!.responseCode != HttpURLConnection.HTTP_OK) {
                return@withContext null
            }

            val inputStream = connection!!.inputStream
            file = File.createTempFile(fileName, ".pdf")
            val outputStream = FileOutputStream(file)
            inputStream.copyTo(outputStream)
            outputStream.close()
        }
    } catch (e: IOException) {
        //Send some response to your UI
    } finally {
        connection?.disconnect()
    }
    return file
}

fun isFileExist(path: String): Boolean {
    val file = File(path)
    return file.exists()
}

Step 2: Convert File object to List<Bitmap>

We will use the PDFRenderer class for this conversion:

PdfRenderer renderer = new PdfRenderer(ParcelFileDescriptor.open(file, ParcelFileDescriptor.MODE_READ_ONLY));

But using this thing directly won’t be good in Jetpack Compose and will cost us a lot of RAM.

So, we will use something like this:

val rendererScope = rememberCoroutineScope()
val mutex = remember { Mutex() }
val renderer by produceState<PdfRenderer?>(null, file) {
    rendererScope.launch(Dispatchers.IO) {
        val input = ParcelFileDescriptor.open(file, ParcelFileDescriptor.MODE_READ_ONLY)
        value = PdfRenderer(input)
    }
    awaitDispose {
        val currentRenderer = value
        rendererScope.launch(Dispatchers.IO) {
            mutex.withLock {
                currentRenderer?.close()
            }
        }
    }
}

Now that we have our “PDFRenderer” object named “renderer”, we will use this to get all pages and render it in our bitmap object.

renderer?.let {
    it.openPage(index).use { page ->
        page.render(destinationBitmap, null, null, PdfRenderer.Page.RENDER_MODE_FOR_DISPLAY)
    }
}

This will help us get the bitmap for all pages. It’s time to show it in the UI for all the pages.

Step 3: Show List<Bitmap> in UI + Add Zoom & Move features:

If you want the whole code for the PDFViewer Composable, then see this: