DEV Community

Cover image for MathRenderer for Android
Joysankar Majumdar
Joysankar Majumdar

Posted on • Edited on

MathRenderer for Android

What is MathRenderer ?

MathRenderer is a simple and easy to use kotlin library for rendering mathematical equations or formulas in your android application. It is based on the MathJax javascript library. It renders all the equations or formulas in a WebView as MathRendererView.

How it works ?

MathRenderer library uses the MathJax cdn javascript file to render the formulas or equations in a browser, so the app works when it is only connected with internet. Basically this library generate a html Base64 string and load it via WebKit WebView.

Customization

This library still now offers only four types of customization -

  • text
  • textColor
  • textAlignment
  • mathBackgroundColor

text

You need to give the LaTex or TeX string with proper syntax to the text field.

textColor

You need to pass the hex color code as a string here to change the colour of text.

textAlignment

You need to just set the proper TextAlign. There are three types of TextAlign - TextAlign.CENTER TextAlign.START TextAlign.END

mathBackgroundColor

You need to pass the colour code as a string to change the whole background colour of the MathRendererView.

A demo code

    binding.mathRenderView.apply {
                text = "This is an equation \\(x^2+6x-9\\)"
                textAlignment = TextAlign.CENTER
                textColor = "#FFFFFF"
                mathBackgroundColor = "#000000"
            }
Enter fullscreen mode Exit fullscreen mode

Installation

Add below lines to app's build.gradle

repositories {
    maven { url 'https://jitpack.io' }
}
Enter fullscreen mode Exit fullscreen mode
dependencies {
    implementation 'com.github.quantaDot:MathRenderer:1.0.3'
}
Enter fullscreen mode Exit fullscreen mode

And don't forget to add Internet permission in your app's AndroidManifest.xml file

    <uses-permission android:name="android.permission.INTERNET"/>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)