Save Android Webview Content as PDF File

Hello everybody!

What you are seeing here is an Android app that shows a local html file inside a Web View.

Then on top of the web view there is a button to save web view contents as a pdf file.

Pdf file is saved localy after you tapped the button and you can open it using your favorite pdf viewer app in your phone.

Adding html file inside assets folder (Creating HTML5 Android WebApp)

Now we are ready to add our html file inside assets folder. Create a folder named assets and put your html file there. Then build the app. You will see your app is running displaying that html page.

This code is for html sample page used in this tutorial:

<!DOCTYPE html>
<html>
	<head>
		<title>LightWeight NoteTaker</title>
	</head>
	<body>
		<h1>Hello!</h1>
		<p>This is a LightWeight NoteTaker HTML5 Android app</p>
	</body>
</html>

Edit the MainActivity.java file (Creating HTML5 Android WebApp)

The next step is to edit MainActivity.java file. Copy and paste this code to your MainActivity, but remember keep your package name unchanged, my package name is “com.thirteenov.lightweightnotetaker” so you must your own package name as it is your unique app identifier.

package com.thirteenov.lightweightnotetaker;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    WebView browser;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(
                WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN
        );

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        browser = findViewById(R.id.webview);
        browser.setWebChromeClient(new WebChromeClient());
        browser.getSettings().setJavaScriptEnabled(true);
        browser.getSettings().setDomStorageEnabled(true);
        browser.getSettings().setAllowFileAccessFromFileURLs(true);
        browser.getSettings().setAllowUniversalAccessFromFileURLs(true);
        browser.getSettings().setMediaPlaybackRequiresUserGesture(false);

        browser.loadUrl("file:///android_asset/index.html");

        browser.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView viewx, String urlx) {
                if(!urlx.contains("http")){
                    viewx.loadUrl(urlx);
                    return false;
                }else{
                    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(urlx));
                    startActivity(intent);
                    return true;
                }
            }
        });
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        WebView browser = findViewById(R.id.webview);
        if ((keyCode == KeyEvent.KEYCODE_BACK) &amp;&amp; browser.canGoBack()) {
            //if Back key pressed and webview can navigate to previous page
            browser.goBack();
            // go back to previous page
            return true;
        }
        else
        {
            finish();
        }
        return super.onKeyDown(keyCode, event);
    }
}

Adding the WebView to activity_main.xml in Android Studio (Creating HTML5 Android WebApp)

The next step is to add WebView to your layout file in Android Studio.

Delete everything in your layout before adding WebView. Then after you drag and drop the WebView, you need to make it full screen.

Make sure you set the constraint correctly and set the layout-width and layout-height to match constraint.

Give it an id: “webview”

Now we are done with layout. Next is to edit MainActivity.java file.

Creating New Android Project (Creating HTML5 Android WebApp)

As usual, to create a new project of anything, in this case Android project, we just need to follow the dialog wizard.

I named this project LightWeight NoteTaker, a light weight html5 note taking app.

The package name of this app is “com.thirteenov.lightweightnotetaker” . So basically we need that package name as a unique identifier of our app.

I used Java as main programming language for this project, because it’s more convenient to me.

Then we click “Finish” button.

Let’s create an HTML5 based Android web app

Hi, I’m going to start creating an HTML5 based Android web app.

I’ve just Installed Android Studio and it’s getting ready now (it’s currently downloading some updates before I can use it).

So basically, the idea behind creating Android WebApp is to have a WebView in the app and we create everything (the content) inside that WebView.

So mostly we code in HTML5, and less in Java.