Android のバージョンが低いエミュレータで WebView の表示が崩れる問題とその解決策

ドワンゴ社の N予備校 Android アプリ開発チームに業務委託として参加している藤崎です。

Android のバージョンが低いエミュレータで WebView の表示が崩れたことはありませんか。原因は WebView の実装が古いからかもしれません。エミュレータの Android のバージョンが低いほど、プリインストールされている Android System View や Chrome ^[1] のバージョンは低くなります。

例えば、Android 8.0 でアプリの動作確認を行う場合、動作の軽快さを求めて Play Store が含まれていないエミュレータを使うことがあります。しかし、Android 8.0 のエミュレータにプリインストールされている Android System View や Chrome のバージョンは著しく低いので、WebView の表示が崩れることがあります。

このような場合は Play Store を含むエミュレータを使うようにし、Play Store 経由で Android System View と Chrome を最新にアップグレードしてみてください。WebView が正常に表示されるようになるはずです。

以下は Android Studio Giraffe | 2022.3.1 で確認した例です。

「Android 8.0 で PlayStore を含まないエミュレータ」の WebView implementation	「Android 8.0 で PlayStore を含むエミュレータ」の WebView implementation	「Android 8.0 で PlayStore を含まないエミュレータ」で開いた WebView	「Android 8.0 で PlayStore を含むエミュレータ」で開いた WebView

脚注

1. 一般に WebView の実装として Android System View か Chrome のどちらかが使われます。どちらが使われているかは、Developer options の WebView implementation で確認できます。