Show PDF files in your Xamarin Android app

Photo by CURVD® on Unsplash

Sometimes it is necessary that you need to display a PDF file within your application. In this post I will show you three different ways to achieve that. I will mainly concentrate on the Android platform, because on iOS you can simply use Xamarin.Forms.WebView control to display the PDF file.

Using Xamarin.Essentials

The first and simplest way is to use the LauncherAPI provided by Xamarin.Essentials. To use this approach we need the PDF file locally available, then we can use Launcher.OpenAsync and pass an OpenFileRequest object containing the file path. If we are calling this method, the default application on your phone gets launched and tries to display the PDF file.

Now I want to provide some code which will show you the usage of the Launcher API. First I’ve created a method called DownloadPdfFileAsync which will download a PDF file from a web server and stores the data within the AppDataDirctory of your application. Finally the method will return the path to that file or null if something goes wrong.

Now I’ve created a simple button in my application and registered the Clicked event. Here I use the DownloadPdfFileAsync method and after that I call Launcher.OpenAsync if a path to the PDF file is provided.

That’s all there is to it. If I’m now launching the demo application you can see that the PDF file gets displayed when I press the button. But keep in mind that your application will launch a different application which is able to display the PDF file.

Using Google Drive Viewer

For the second approach we will use the Google Drive Viewer which is basically only a website which is able to show a PDF file. Here we don’t need to store the PDF file locally, but we need to a have an internet connection available to be able to render the PDF file within our application.

First of all we need to create a user control. In this case I will call it GoogleDriveViewerWebView which will inherit from the Xamarin.Forms.WebView . We need to add a BindableProperty which is called Uri which will store the URL of the PDF file which should be displayed.

Now we need to write a CustomRenderer for our user control, which will load the corresponding Google Drive Viewer using our provided URL for the PDF file. In the Android project I create a class called GoogleDriveViewerWebViewRenderer which will inherit from the WebViewRenderer . Here we override the two methods OnElementChanged and OnElementPropertyChanged .

Now we can use our GoogleDriveViewerWebView control and just set the Uri property to the URL of the PDF file which is located on the internet.

The following GIF animation will show you this approach running on an Android device. But keep in mind that you have to be online to use this approach of displaying a PDF file in your application. The advantage is that you will stay in your application instead of launching a different app.

Using PDF.js

The third approach uses a small JavaScript library called PDF.js which is maintained by Mozilla. On this website you can easily download the latest version and save the ZIP file locally on your developer machine. After the download you can unzip the file.

In your Android project, open the Assets folder and create a folder called pdfjs in this folder. Now copy the whole content of the downloaded ZIP file (the folders build and web) into the pdfjs folder. Make sure that the Build Action of all files is set to AndroidAsset which should be the case automatically.

Now we create another control. This time I will call it PdfJsWebView which also inherits from WebView and will provide a BindableProperty called Uri.

Now we can create the CustomRenderer in the Android project called PdfJsWebViewRenderer. Basiclly we are using the same approach as with the GoogleDriveViewerWebViewRenderer by overwriting the two methods OnElementChanged and OnElementPropertyChanged. We are referencing the local viewer.html file provided by PDF.js and passing the path to the local PDF file.

Now we can use the PdfJsWebView control in our application. Keep in mind that you first have to download the PDF file and store it locally. But with this approach the displaying of the PDF file can happen without an internet connection.

Just a quick note from me: This approach doesn’t work on an emulator. But if you deploy the application on a real device everything as expected.

Conclusion

In this blog post I’ve showed to you three different approaches to display a PDF file in your Android application using Xamarin. The easiest way is the approach using the Launcher API from Xamarin.Essentials, but the user needs to have a PDF application installed on his device.

If you are sure that the user will have an internet connection you can use the second approach which uses the Google Drive Viewer website to display the PDF file. This is also very easy to integrate, because you don’t need to download the file first to show it.

The most flexible way is the usage of the PDF.js library. Because you can easily adjust the viewer.html file to remove features or add features to the website which will display the PDF file. You can also use this approach without an active internet connection.

As usual you can download the sample code showed in this post in my GitHub repository.