PixiJS demos appear blank in WebView on Android emulator

Question

PixiJS demos such as http://pixijs.io/examples/?v=v4.7.0#/basics/basic.js don't load when rendered in a WebView.

Steps to reproduce

• Android Studio: 3.0.1
• Android Emulator: 27.1.12-4623001
• Emulator: A "Nexus 5" running API 25

Steps to reproduce

• Create a new app in Android Studio with a basic activity
  • File > New > New Project
  • On "Create Android Project" screen, click Next
  • On "Target Android Devices" screen, click Next
  • On "Add an Activity to Mobile" screen, click "Empty Activity" and then click Next
  • On "Configure Activity" screen, click Finish
• Add a WebView in activity_main.xml, it should look like this:

<?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.locuslabs.myapplication.MainActivity">

    <WebView
        android:id="@+id/llWebView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

• Add permission to AndroidManifest.xml, it should look like this:

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

    <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>

• Add the following code to MainActivity.java:

  package com.locuslabs.myapplication;
  
  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;
  import android.webkit.WebSettings;
  import android.webkit.WebView;
  import android.webkit.WebViewClient;
  
  public class MainActivity extends AppCompatActivity {
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
          WebView webView = findViewById(R.id.llWebView);
          webView.setWebViewClient(new WebViewClient());
          WebSettings webSettings = webView.getSettings();
          webSettings.setJavaScriptEnabled(true);
          String urlString = "http://pixijs.io/examples/?v=v4.7.0#/basics/basic.js";
          webView.loadUrl(urlString);
      }
  }
  

• When you run it in Android Emulator 27.1.12-4623001, it appears blank (see first screenshot below), but on Android Emulator 26.1.4-4266726 it renders fine (see second screenshot below).

How do I get the PixiJS demos running on Android Emulator?

Answer 1

I was able to get PixiJS demos running on Android Emulator by downgrading to Android Emulator 26.1.4-4266726. See How to downgrade Android Emulator