0
0
Android-kotlinHow-ToBeginner ยท 3 min read

How to Use WebView in Android: Simple Guide with Example

To use WebView in Android, add a WebView widget to your layout and load a URL or HTML content using webView.loadUrl(). Remember to enable JavaScript if needed with webView.getSettings().setJavaScriptEnabled(true).
๐Ÿ“

Syntax

The basic syntax to use WebView involves adding it to your layout XML and then loading a URL in your activity or fragment. You can enable JavaScript and control navigation behavior.

  • WebView widget: UI component to display web pages.
  • loadUrl(String url): Loads the web page at the given URL.
  • getSettings(): Access settings like enabling JavaScript.
xml
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
Output
A full-screen WebView area in the app UI.
๐Ÿ’ป

Example

This example shows a simple Android activity that loads the Google homepage inside a WebView. It enables JavaScript and handles basic navigation.

java
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        webView = new WebView(this);
        setContentView(webView);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("https://www.google.com");
    }

    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}
Output
App displays Google homepage inside the app with back navigation support.
โš ๏ธ

Common Pitfalls

Common mistakes when using WebView include:

  • Not enabling JavaScript when the page requires it, causing incomplete page rendering.
  • Not setting a WebViewClient, which causes links to open in the external browser instead of inside the app.
  • Ignoring back navigation, so pressing back closes the app instead of going back in web history.
java
/* Wrong: No WebViewClient, links open externally */
webView.loadUrl("https://example.com");

/* Right: Set WebViewClient to keep navigation inside app */
webView.setWebViewClient(new WebViewClient());
webView.loadUrl("https://example.com");
๐Ÿ“Š

Quick Reference

FeatureUsage
Add WebView in layout
Enable JavaScriptwebView.getSettings().setJavaScriptEnabled(true);
Load URLwebView.loadUrl("https://example.com");
Handle navigation inside appwebView.setWebViewClient(new WebViewClient());
Handle back buttonOverride onBackPressed() to call webView.goBack() if possible
โœ…

Key Takeaways

Always set a WebViewClient to keep navigation inside your app.
Enable JavaScript only if the web content requires it.
Override onBackPressed to support web page back navigation.
Add WebView in your layout or create it programmatically.
Test your WebView with different URLs to ensure correct behavior.