Handling Back Button in Android Webview

Question

I develop an app with WebView and Html5, It works, clicking a link in the webpage goes to the next page in the html file inside my app. But when I click the phone's back button, it give me this error : Unfortunately, APPNAME has stopped. I want to go back to the previous page in the website instead.

The website build with : https://github.com/01org/appframework

MainActivity.java

package com.package.name;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView WebView;

    //Back Button Code

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_BACK:
                    if (WebView.canGoBack()) {
                        WebView.goBack();
                    } else {
                        finish();
                    }
                    return true;
            }

        }
        return super.onKeyDown(keyCode, event);
    }

//--------------------

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView=(WebView) findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setDisplayZoomControls(true);

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

}

Activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.package.name.MainActivity">

    <WebView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </WebView>

</android.support.constraint.ConstraintLayout>

AndroidManifest :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.package.name">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

Answer 1

First,
Check if WebView is null.. rename the global variable to webView (private WebView webView;) and in onCreate change WebView webView=(WebView) findViewById(R.id.webview); to webView=(WebView) findViewById(R.id.webview);

You could also try moving the back button handling code to

@Override
public void onBackPressed()
{
 ....
}

instead of

@Override 
public boolean onKeyDown(int keyCode, KeyEvent event) 
{
    ...
} 

as in:

@Override
public void onBackPressed()
{
     if (webView.canGoBack()) {
         webView.goBack();
     } else { 
         super.onBackPressed();
     } 
}

as mentioned in https://developer.android.com/training/implementing-navigation/temporal.html#back-webviews