Simple and light third-party view library written in Kotlin
to ease displaying math formulas using jqMath. MathView
is based on WebView
and works similar to other math-rendering libraries, but it is compatible with Android DataBinding Library and allows user to customize the text a bit more.
About jqMath
jqMath is a JavaScript module that makes it easy to put formatted mathematical expressions in web pages. It uses a simple TeX-like syntax, with MathML semantics and is roughly 5 times faster than MathJax (which is actually much bigger). jqMath is lightweight, fast and concise. It is standards-based and cross-browser, using MathML when available, else simple HTML and CSS, and avoiding pixel-map images. Thus pages load quickly, and expressions can be resized by the user, or easily passed to screen reading, graphing, or computer algebra software.
The HTML source patterns that will result in math equations can be checked here.
All HTML characters can be added by Unicode code point (decimal) reference.
⊗ = โ
There is no need to add every special character by Unicode reference. The HTML characters can be copied straight into your code. Referencing is handy when you are entering characters with EditText
widget.
When building equations in Kotlin sometimes double backslash is needed to escape Kotlin String Interpolation
var math = "$\\F↖{→}=ma_g$"
Add below lines to app's build.gradle
repositories {
maven { url 'https://jitpack.io' }
}
dependencies {
implementation 'com.github.jstarczewski:MathView:0.4.0'
}
MathView
works nearly as TextView
. It renders math equation with MathML semantics.
<com.jstarczewski.pc.mathview.src.MathView
android:id="@+id/mvTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
mvTest.apply {
textZoom = 120
textColor = Color.GREEN.toString()
backgroundColor = Color.WHITE
text = "$\\F↖{→}=ma_g$"
}
While setting text directly in XML, remember to encode HTML special characters, for example : & = &
<com.jstarczewski.pc.mathview.src.MathView
android:id="@+id/mvTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:text="$F=mg$"
app:textZoom="75"/>
There are currently five custom functions available for the user. I plan to refactor them to fit more in Kotlin style.
// Apply properties
var mathView : MathView = findViewById<MathView>(R.id.mvEditTextExample)
mathView.apply {
text = "$\\F=10$" // sets text
textColor = "red" // sets text color, default value is "black"
backgroundColor = "blue" // sets background color, default value is "white"
}
mathView.textZoom = 120 // set text size based on pixel density, default value is 100 (%)
Back in 2016 I created an Android App which contained a lot of equations rendered with jqMath. I plan to rerelease the app and it is easier for me to write this simple library rather than convert all my equations to fit other rendering engine. MathView
is my first Android library and writing it is a great fun for me. I'm currently learning Kotlin so if you see situations where I am not using Kotlin's full potential, feel free to contribute.
Feel free to contribute and report issues. Feedback appreciated!