How do i display math equations in Android application - Android Latex Equations

Published November 30, 2021

Display math equations in Android application is a tricky functionality. In this android example we will cover load math latex equations using two different js files JQMath and MathJax

Let's get started
Step 1: Create android application
Step 2: Create simple layout with Webview
We all know that webview will use to load HTML text or any webpages. so here we will load JavaScript files inside webview then we will append our math equations to the webview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".JQMathActivity">

    <com.rrtutors.androidlatex.CustomWebview
        android:id="@+id/question"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:layout_weight="1"

        />
    <ProgressBar
        android:id="@+id/progressbar"
        android:layout_width="40dp"
        android:layout_gravity="center"
        android:visibility="invisible"
        android:layout_height="40dp"
        />
    <Button
        android:id="@+id/btn_call"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Load Data"
        />

</LinearLayout>

Step 3: Create simple json file which contains Latex Math Equations inside assets folder

Step 4: Read JSON file data from assets folder

fun loadFromAssets()
{
    var string: String? = ""
    try {
        val inputStream: InputStream = assets.open("latex.json")
        val size: Int = inputStream.available()
        val buffer = ByteArray(size)
        inputStream.read(buffer)
        string = String(buffer)
        quesValue=Utils.JQMath;
        quesValue= quesValue+JSONObject(string).getString("data");
       
        loadData();
    } catch (e: IOException) {
        e.printStackTrace()
    }
}

Step 5: Load Latex Math Equations using Mat?hJa?x:
Append below String to json data and load into webview
Before loading to the webview make sure that you have enabled JavaScript property for webview using

Using JQMath
Append below String to json data and load into webview

var JS_FILES = "<script>\n" +
        "MathJax = {" +
        "  tex: {" +
        "    inlineMath: [['$', '$'], ['\\(', '\\)']]\n" +
        "  }" +
        "};" +
        "</script>" +"<style type=\"text/css\">\n" +
        "html, body {" +
        "margin: 0px;" +
        "padding: 0px;" +
        "}" +
        "</style>"+
        "<script id=\"MathJax-script\" async src=\"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js\"></script>\n" +
        "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css\" crossorigin=\"anonymous\">" +"<style>img{display: inline;height: auto;max-width: 100%;}</style>"

Step 6: Now load data to webview

fun  loadData()
  {

      question.loadDataWithBaseURL("",  quesValue, "text/html", "utf-8", "");
  }

Step 7: Now run the application you can find Latex math equations in proper format

$Load Math equations in Android application$

$Latex Equations in android$

Complete activity code to load Latex Equations in Android application

package com.rrtutors.androidlatex


import android.os.Build
import android.os.Bundle
import android.provider.SyncStateContract
import android.util.Log
import android.view.View
import android.webkit.WebView
import android.widget.Button
import android.widget.ProgressBar
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AppCompatActivity
import com.android.volley.*
import com.android.volley.toolbox.StringRequest
import com.android.volley.toolbox.Volley
import org.json.JSONObject
import java.io.IOException
import java.io.InputStream
import javax.xml.transform.ErrorListener


class MathJSActivity : AppCompatActivity() {
    lateinit var question:WebView
    lateinit var btn_call:Button
    lateinit var progressbar:ProgressBar
    lateinit var mRequestQueue:RequestQueue
    var quesValue="";
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        progressbar=findViewById(R.id.progressbar)
        btn_call=findViewById(R.id.btn_call)
        question=findViewById(R.id.question)
        question.clearCache(true)
        question.getSettings().setAllowFileAccess(true);
        question.getSettings().setJavaScriptEnabled(true);
        question.getSettings().setBuiltInZoomControls(false);

        btn_call.setOnClickListener {
            quesValue="";
            loadFromAssets();
        }
    }

    fun loadFromAssets()
    {
        var string: String? = ""
        try {
            val inputStream: InputStream = assets.open("latex.json")
            val size: Int = inputStream.available()
            val buffer = ByteArray(size)
            inputStream.read(buffer)
            string = String(buffer)
            quesValue=Utils.JS_FILES;
            quesValue= quesValue+JSONObject(string).getString("data");
            loadData();
        } catch (e: IOException) {
            e.printStackTrace()
        }
    }

  fun  loadData()
    {

        question.loadDataWithBaseURL("",  quesValue, "text/html", "utf-8", "");
    }



}

Conclusion: In this Android Example tutorial we covered how to load Latex Math equations using JQMath and MathJax libraries. We can learn more in coming series how to load Math equations inside Android widgets

Article Contributed By :

1301 Views

Projects By category