WebView state management

WebView is a commonly used component that offers an advanced system for state management. A WebView must maintain its state and scroll position across configuration changes. A WebView can lose scroll position when the user rotates the device or unfolds a foldable phone, which forces the user to scroll again from the top of the WebView to the previous scroll position.

Best practices

Minimize the number of times a WebView is recreated. WebView is good at managing its state, and you can leverage this quality by managing as many configuration changes as possible. Your app must handle configuration changes because Activity recreation (the system's way of handling configuration changes) recreates the WebView as well, which causes the WebView to lose its state.

Ingredients

• android:configChanges: Attribute of the manifest <activity> element. Lists the configuration changes handled by the activity.
• View#invalidate(): Method that causes a view to be redrawn. Inherited by WebView.

Steps

To save the WebView state, avoid Activity recreation as much as possible, and then let the WebView invalidate so that it can resize while retaining its state.

1. Add configuration changes to AndroidManifest.xml

Avoid activity recreation by specifying the configuration changes handled by your app (rather than by the system):

<activity
  android:name=".MyActivity"
  android:configChanges="screenLayout|orientation|screenSize
      |keyboard|keyboardHidden|smallestScreenSize" />

2. Invalidate WebView on configuration changes

override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    webView.invalidate()
}

@Override
public void onConfigurationChanged(@NonNull Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    webview.invalidate();
}

This step applies only to the view system, as Jetpack Compose does not need to invalidate anything to resize Composable elements correctly. However, Compose recreates a WebView often if not managed correctly. Use the Accompanist WebView wrapper to save and restore WebView state in your Compose apps.

Results

Your app's WebView components now retain their state and scroll position across multiple configuration changes, from resizing to orientation change to folding and unfolding.

Additional resources

To learn more about configuration changes and how to manage them, see Handle configuration changes.