How to open pdf file url using webview in Android

 Sometimes we have requirement of showing pdf file in our Android Application. Although there are many third party gradle dependencies available online by which you can show your pdf file easily but one of the major drawback of using these libraries are they will increase you apk size .In some cases they will increase apk size upto ~14 MB. Alternatively you can access and show pdf file using assets and from storage options. This can take less size than any third party library.

Here we use pdf using url and if you directly open your pdf file url in webview you will get no result because it will start downoad if you open this link in any web browser. 

So in this article we will learn how we can open our pdf url using webview and without using any third party library. So lets Start step by Step:-

Lets Suppose you have a pdf file url something like

 http://yourwebsite.com/files/mydocumentfile.pdf

Step 1:

So we you this pdf file url to embed in our webview .First of all you have to host your pdf url on Google Drive or on Google Documents. Here we use Google Docs Viewer for our pdf url.

Step 2:

Your code will look like this

public class PDFWebView extends AppCompatActivity {
    WebView webView;
String mainUrl="https://docs.google.com/gview?embedded=true&url=http://yourwebsite.com/files/mydocumentfile.pdf";
private String removePdfTopIcon = "javascript:(function() {document.querySelector('[class=\"ndfHFb-c4YZDc-Wrql6b\"]').remove();})()";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pdfwebview);

        webView=(WebView)findViewById(R.id.webview);

        webView.loadUrl(removePdfTopIcon);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setSupportZoom(true);

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onReceivedError(WebView view, int errorCode,
                                        String description, String failingUrl) 
            {

            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) 
            {
                view.loadUrl(url);
                return true;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);

                webView.loadUrl(removePdfTopIcon);
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);

                webView.loadUrl(removePdfTopIcon);
            }
        });

        webView.loadUrl(mainUrl);
       
    }

  
}

Here we use https://docs.google.com/gview?embedded=true&url= to view our pdf file using Google Docs . But you will see pop out icon on right side 

 

Alternatively you can use Google Drive link but it also have top header bar which will show in your Web View.

Now what is the Solution ?

via GIPHY

Don't worry In code snippet if you noticed I used some script to load on page load .This do nothing but hide the top bar from Drive and Pop out icon from Google Docs Viewer on page load .

javascript:(function() {document.querySelector('[class=\"ndfHFb-c4YZDc-Wrql6b\"]').remove();})()

Now that all .Your pdf viewer is ready using WebView .Hope you like this Article .If yes Share this post and also Subscribe for more Android related articles.Thank you Once again.😐😐😐