This article is going to explain how to create a pdf viewer inside the Android application using Xamarin forms in Visual Studio.
This article is going to explain how to create a pdf viewer inside the Android application using Xamarin forms in Visual studio and here, I am using the latest version Visual Studio 2017.
Step 1 Create a project in Visual Studio which has Xamarin installed.
To create the project, open Visual Studio and select File -> New -> Project then you can see a popup and select template as shown below.
As you can see, I have selected cross-platform Xamarin forms and I have given a name as pdf viewer. After clicking the ok button you can see one more popup and select that as in the following figure.
After clicking ok, you have successfully created a solution which contains portable project (pdfViewer) and android project (pdfViewer.android or pdfViewer.Droid).
Step 2 Now, design a page in portable project (pdfViewer) using xaml, for that you can see by default one page has been created; that is MainPage.xaml. Open that and add some labels and buttons as given in the below code.
Step 3 Now that we have designed a part of a page we have to add a pdf viewer. For this, download some support files from here
And unzip that, now you can see two folders, build and web. Create one folder and give a name as pdfjs and copy those two folders into this pdfjs folder as shown in the below figure.
After that copy this pdfjs folder into the Android project (pdfViewer.android or pdfViewer.Droid) -> Assets Folder as shown in the below figure.
Step 4 Let’s start writing functionality, for this create one class in the Android project (pdfViewer.android or pdfViewer.Droid) by right-clicking this project. Add a class and give a name as PdfViewRenderer and make this class public and add the following namespaces.
After that, inherit PdfViewRenderer class from WebViewRenderer Android platform class as shown below
And we have to write functionality for pdf view inside this class, before that we have to create a property in the portable project (pdfViewer) to access to PdfViewRenderer class, for this create one class in portable project (pdfViewer) and give a name as PdfView and inherit this from WebView and make the class public.
And create one bindable property as shown in the below code
Now, let’s access that PdfViewRenderer class through this above property, using this property you can pass pdf file path.
To give a connection between these two classes from different projects you have to export this PdfView into that PdfViewRenderer by adding the below code above the namespace of pdfViewer.Droid
Now, we can access PdfViewRenderer class and pass the file path to it.
Using this Uri property let's add functionality into PdfViewRenderer class as shown below:
Create one more class for printing and give name as FilePrintDocumentAdapter and inhert this class from PrintDocumentAdapter and add functionality into it as shown below:
Step 5 Now the pdf viewer is almost ready. Let’s see how to use this in our MainPage.xaml which we have designed. First call this pdf viewer inside this page, for this first add the reference in the above xaml page.
I think we have already added this, but if not add it, then add the below lines after MainStack:
So the full design code looks like below:
So far we have added a pdf viewer, now let’s call pdf file from button. Before this we need to install one plug in for selecting a file so right click in solution and select Manage NuGet Packages for solution and search for File Picker and install as shown in fig.
After installation success, just write the following code to pick a file from the device in button click
But I don’t know from this if I will be able to get file path, we can get only the name and file bytes, so we can create file in device with our own path and we can give that path to pdf viewer path, for this let’s create a dependency service . Create one interface in portable project (pdfViewer) for getting the path as shown below.
Create one dependency class and inherit that from the above interface in pdfViewer.Droid project for creating a file and returning that path back.
So, the dependency service is ready, next we can call this and get the path from this. After that we can assign this path to a pdf viewer, so rewrite the button code as shown.
Finally we have done it, but one more thing I have forgotten is that you have to give height for this pdf viewer. For this just override the OnSizeAllocated function as shown below
The output will be as follows,
View All