I have an application published in google play targetting API version 16 to 26 (minSdkVersion 16, targetSdkVersion 26). I got a few low rating reviews because "webview informations not appearing" on android 8 or higher. (not all devices, some)
This apps propose is to show LaTEX as mathematic formulas using MathJax.
I've tested my app using android studio emulators (all API versions) and there were no errors but low ratings are still rolling in.
this is my custom webiew:
public class MathView extends WebView {
String textColor = "#000000";
String backgroundColor = "#ffffff";
public Boolean loaded = false;
public String tag = "white";
public String text = "";
public MathView(Context context, AttributeSet attrs){
super(context, attrs);
this.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
String tag = "white";
if(attrs != null)
tag = attrs.getAttributeValue("http://schemas.android.com/apk/res/android", "tag");
initView(context,tag);
}
public void displayText(String text){
this.text = text;
loadMath();
}
private String getTemplate(){
String template = "<!DOCTYPE html>\n" +
"<html>\n" +
"<head>\n" +
"<style>\n" +
" img {\n" +
" max-width: 90% !important;\n" +
" height: auto!important;\n" +
" }\n" +
" .mjx-chtml {\n" +
" font-size: 100% !important;\n" +
" }\n" +
" </style>\n" +
" <script src=\"file:///android_asset/mathview/MathJax.js?config=TeX-MML-AM_CHTML\"></script>\n" +
" <script src=\"file:///android_asset/mathview/extensions/img.js?config=TeX-MML-AM_CHTML\"></script>\n" +
" <script>\n" +
" MathJax.Hub.Config({\n" +
" \"HTML-CSS\": {\n" +
" linebreaks: {\n" +
" automatic: !0\n" +
" }\n" +
" },\n" +
" CommonHTML: {\n" +
" linebreaks: {\n" +
" automatic: true\n" +
" }\n" +
" },\n" +
" SVG: {\n" +
" linebreaks: {\n" +
" automatic: true\n" +
" }\n" +
" },\n" +
" displayAlign: \"left\"\n" +
" });\n" +
" </script>\n" +
"</head>\n" +
"\n" +
"<body style=\"background:"+this.backgroundColor+";color:"+this.textColor+";overflow:hidden;font-family:serif;\">\n" +
this.text +
"</body>\n" +
"\n" +
"</html>";
return template;
}
public void setValues(float[] values){
// Do stuff calculating
}
private void initView(Context context, @Nullable String tag){
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.custom_webview, this);
this.getSettings().setJavaScriptEnabled(true);
getSettings().setAllowFileAccess(true);
getSettings().setDisplayZoomControls(false);
getSettings().setBuiltInZoomControls(false);
getSettings().setSupportZoom(false);
getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
if(tag != null)
this.tag = tag;
loadMath();
}
private void loadMath(){
if(!text.equals("")){
if(tag.equals("white")){
this.loadDataWithBaseURL("null",this.getTemplate(),"text/html","UTF-8","about:blank");
}
else if(tag.equals("purple")){
textColor = "#ffffff";
backgroundColor = "#da4b71";
this.loadDataWithBaseURL("null",this.getTemplate(),"text/html","UTF-8","about:blank");
}
else if(tag.equals("purple_dark")){
textColor = "#ffffff";
backgroundColor = "#bb4061";
this.loadDataWithBaseURL("null",this.getTemplate(),"text/html","UTF-8","about:blank");
}
else if(tag.equals("gray")){
backgroundColor = "#f1f1f1";
this.loadDataWithBaseURL("null",this.getTemplate(),"text/html","UTF-8","about:blank");
}
}
}
public void passValue(final String value){
this.text = value;
loadMath();
}
public void updateValue(final String value){
this.text = value;
loadMath();
}
public void setBackground(String color){
this.backgroundColor = color;
}
public void setTextColor(String color){
this.textColor = color;
}
}
This is my xml that will be associated with this custom webview inside and activity:
<packagename.views.MathView
android:id="@+id/titleMathView"
android:scrollbars="none"
android:tag="white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
and i use webview inside of an activity using this codes:
MathView titleMathView titleMathView = (MathView) findViewById(R.id.titleMathView);//this resource exists inside xml file
titleMathView.setWebChromeClient(new chromeClient());
titleMathView.displayText("\\(\\frac{1}{2}\\)"); //Now math must be displayed
this is my chromClient Class:
private ProgressDialog questionsLoading;
private class chromeClient extends WebChromeClient {
Runnable hideLoadingRunnable = new Runnable() {
@Override
public void run() {
questionsLoading.dismiss();
}
};
Runnable showLoadingRunnable = new Runnable() {
@Override
public void run() {
questionsLoading = ProgressDialog.show(QuizActivity.this, "",
"Loading questions...", true);
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
if(questionsLoading != null)
if(questionsLoading.isShowing())
hideLoadingRunnable.run();
}
}, 6000);
}
};
private chromeClient(){
if(questionsLoading == null)
showLoadingRunnable.run();
}
@Override
public void onProgressChanged(WebView view, int progress){//not working
if(progress == 100) {
if(questionsLoading != null)
hideLoadingRunnable.run();
}
}
}
This is the problematic display screenshot: (one user kindly emailed this to me)
This is what must displayed:
This is a list of devices that faced the problem (this list is base on reviews in google play, i can't reproduce problem using emmulators):
- Device: Pixel 3 XL (crosshatch) -> OS: Android 9
- Device: Pixel XL (marlin) -> OS: Android 9
- Device: Galaxy Tab A (2017) (gta2swifi) -> OS: Android 8.1
- Device: Galaxy J7 (j7y17lte) -> OS: Android 8.1
- Device: Galaxy S10+ (beyond2) -> OS: Android 9
